How to access directory or file outside of root directory in React Native

I am working on project that involves creating a mobile app and website, so I decide to create same or shared screen (pages) for both my app and website.

So I decided to go with this file structure.

Monorepo App(React-Native) Web(Next.js) Screen (all screens will be here)

now, I'm stuck at one problem: I can't access file outside of my root directory, that is my App directory how can I access files outside of root directory?

I also change my metro.config.js file and babel.config.js file now they look like this:

metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require("path");

/**
Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const extraNodeModules = {
    shared: path.resolve(__dirname + "/../screen"),
  };
  const watchFolders = [path.resolve(__dirname + "/../screen")];

const nodeModulesPaths = [path.resolve(path.join(__dirname, "./node_modules"))];
const config = {
    resolver:{
    extraNodeModules,
    nodeModulesPaths,
    },
    watchFolders
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    "react-native-reanimated/plugin",
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          "@screen": "../screen",
        },
      },
    ],
  ],
}

and I am getting this error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

I try changing the metro.config.js file to access files outside of my file, but I always get different types of errors.

I am expecting that I can access my shared file in my React Native App folder.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/KtZYgRC