React Native fails to import files from folder above project folder

Question

React noob here.

I started with react and was able to do the basic. When I wanted to make my code structured for future use, I failed.

I have my project folder, and parallel to it I have a folder for all my common

| code:\
|- Code Folder\
|-- Project\
|--- App.js\
|--- screens\
|---- HomeScreen.js\
|-- CommonLibrary\
|--- COLORS.js\

COLORS is suppose to contain all the defines for common used colors:

export default {
    COLOR_BLACK: "#000000",
    COLOR_DARKBLUE: "#0F3274",
    COLOR_DARKGRAY: "#999",
    COLOR_LIGHTBLUE: "#6EA8DA",
    COLOR_ORANGE: "#C50",
    COLOR_TEXT_LIGHTBLUE: "#159EEA",
    COLOR_WHITE: "#FFFFFF",
};

Regardless of what I do, I cannot import the COLORS from HomeScreen. I tried:

import COLORS from "../../CommonLibrary/COLORS"
import COLORS from "../../CommonLibrary/COLORS.js"
import {COLORS} from "../../CommonLibrary/COLORS"
import {COLORS} from "../../CommonLibrary/COLORS.js"

I tried nohoist, using index.js in the CommonLibrary folder (but I think I did that wrong). This file is just one example of what I want to do. I also want to make files for commonly used components like custom buttons and things, but those can be after the colors work.

I have googled to the best of my abilities and tried what I can decipher from online but nothing has worked.

Any assistance is greatly appreciated!

Answer 1

Inside COLORS.js it should be

export const colors = {
    COLOR_BLACK: "#000000",
    COLOR_DARKBLUE: "#0F3274",
    COLOR_DARKGRAY: "#999",
    COLOR_LIGHTBLUE: "#6EA8DA",
    COLOR_ORANGE: "#C50",
    COLOR_TEXT_LIGHTBLUE: "#159EEA",
    COLOR_WHITE: "#FFFFFF",
};

Then in your HomeScreen import it like below:

import {colors} from "../../CommonLibrary/COLORS"

Answer 2

COLORS.js should be inside project folder

import COLORS from "../COLORS" should work