CODEWITHSUNDEEP
react-native
user4086990
user4086990

Reputation:

Share common components between two react native applications

I have an existing react native application with certain custom components I made. Now I'm trying to make a new application and use some of those components, so there's no need to copy/paste when changes occur. Let's name these applications app1 and app2.

Here's what I tried:

  1. keeping the file structure app1 => src, node_modules, ios, etc

app2 => src, node_modules, ios, etc

shared_folder => components, node_modules

that didn't work because the shared_folder needed node_modules to import react, react-native, etc. Npm complained of all the duplicate node modules it was looking at

  1. Then I tried the structure

app_folder => node_modules, app1, app2, shared_folder

That didn't work because when running npm start, it didn't know which index.ios.js to look for. Also, xcode for both app1 and app2 projects kept complaining about finding certain react files.

My question is, what's the best way to structure these 2 applications so I can share certain components between them?

Upvotes: 4

Views: 1835

Answers (3)

Chris Nguyen
Chris Nguyen

Reputation: 2910

You can try with git submodule

Upvotes: 0

Razem Ponad-kilo
Razem Ponad-kilo

Reputation: 158

Here's a link which can be an answer to your question.

In src folder you can find 3 different projects: react native, expo and web(react). There is also a folder called shared which stores common functions and common react native modules. There is a module called Sample and it is used in expo and react native project just to show how to import common react native modules from the shared assembly.

If you download the project remember to run 

yarn

in the main route directory and the same for each project directory. If you want to run expo project you need to go to the expo project directory and use command 

yarn run android

If you want to run rn project you need to go to the rn project directory and use command 

react-native run-android

Upvotes: 1

Zohar Levin
Zohar Levin

Reputation: 2444

not sure i understand your exact scenario but usually shared components that make sense for more than one project should go in their own module (you could create private scoped npm packages). assuming there's some logic that groups them together

Upvotes: 0

Related Questions