I am running into trouble with a React Native app.

Right now I have this file structure:

Outer Folder
Packages
—-ReactNativeApp1
——–All standard files for React Native App
—-shared (Folder for shared components)
——–Button.tsx sample component.

I ran npx react-native start to initialize this folder, then I created the Button.tsx file (source below):

import React from ‘react’;
import { TouchableOpacity, Text } from ‘react-native’;

const Button = ({ text, onPress }) => {
return (

{text}

);
};

export default Button;

My goal is to have one root folder, 2+ inner folders that represent React Native Apps, and a Shared folder that will hold code common to all the apps.

I have an App.tsx file inside ReactNativeApp1/App1 that properly registers the component, and imports the button:

import React from ‘react’;
import { View } from ‘react-native’;
import Button from ‘../shared/Button’;

const App1: React.FC = () => {
return (

<Button text=”Press Me” onPress={() => console.log(‘Button pressed!’)} />

);
};

export default App1;

However, whenever I try to run the app, I get this error:

error: Error: Unable to resolve module ../shared/Button from C:UsersusernameVSCode ProjectsSampleReactNativeSharedProjectpackagesReactNativeApp1App.tsx:

None of these files exist:

• ..sharedButton(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• ..sharedButtonindex(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  1 | import React from ‘react’;
  2 | import { View } from ‘react-native’;

3 | import Button from ‘../shared/Button’;

I have tried many things:

• Creating 2+ apps and Shared components folder
• Common troubleshooting techniques, like clearing the cache, print statements
• Searching the internet for “React Native Monorepo”
• Using ChatGPT to generate Sample code
• Watching youtube videos related to this issue
• Switching from NPM to Yarn + Yarn Workspaces
• Installing shared components as dependencies for App1 (and other apps)

However, it seems like I am stuck on this same issue either way.

I want to have all my projects (in subfolders) in one root folder, and a shared components subfolder too.

I would appreciate any help on this issue, and am happy to share more details.