Using git with React Native team

Question

My current .gitignore file has:

# OSX
# .DS_Store

# Xcode
# build/
*.pbxuser !default.pbxuser
*.mode1v3 !default.mode1v3
*.mode2v3 !default.mode2v3
*.perspectivev3 !default.perspectivev3 xcuserdata
*.xccheckout
*.moved-aside DerivedData
*.hmap
*.ipa
*.xcuserstate project.xcworkspace

# Android/IntelliJ
# build/ .idea .gradle local.properties
*.iml

# node.js
node_modules/ npm-debug.log yarn-error.log

# BUCK buck-out/ \.buckd/
*.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/

*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

# Bundle artifact
*.jsbundle

#React Files
android/
ios/

Then, I did the usual.

git add .
git commit -am "First commit"
git push -u origin master

It got loaded up.

When the team member did git clone and then did npm install

It did not load anything!

package.json

{
  "name": "gmxWorldWide",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "watchman": "^1.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "5",
    "jest": "23.4.1",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

It does not install anything.

I come from php background where composer.json would be replicated across the team and composer install would do the trick.

How is it different and what can be done to enable npm install do the work?

EDIT:

The code was create using react-native init command

Nuwan Attanayake · Accepted Answer · 2018-07-19 12:24:03Z

1

Your required modules are already loaded when you clone the app since you have committed the node_modules directory to git.You have to ignore node_modules from the repository.But i see in your .gitignore it has been commented

# node.js
# node_modules/ npm-debug.log yarn-error.log

Update that to following(un-comment)

# node.js
node_modules/ npm-debug.log yarn-error.log

best way to create react native app is by using create-react-native-app. Read more here https://facebook.github.io/react-native/docs/getting-started.html

EDIT: You have to commit the package-lock.json file to make sure all your team in same set of library versions.But anyway this might add bit of a hassle sine each npm install might update the existing packages to their desired version as mentioned in the package.json file.

more details on package-lock.json here : https://docs.npmjs.com/files/package-lock.json

SECOND EDIT: If you want to lock the versions then use package.json file to do it.Just use exact package version instead of using version ranges(<=,~,^)

Fixed versions on package.json

....
"dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "watchman": "1.0.0"
  },
....

edited Jul 19, 2018 at 12:24

answered Jul 19, 2018 at 12:08

Nuwan Attanayake

1,20110 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keval Domadia Over a year ago

Tried it. Doesn't work. The question is to make use of git and npm install to replicate that team is on the same page.

Keval Domadia Over a year ago

The modules are created dynamically by react-native. I have answered my question. See below.

Keval Domadia · Accepted Answer · 2018-07-19 13:34:20Z

1

Turns out React comes with a built-in command.

We performed:

react-native eject

and it re-created the Android and iOS folders with native code back in the project.

After pull:

npm install
react-native eject

answered Jul 19, 2018 at 13:34

Keval Domadia

4,7631 gold badge39 silver badges65 bronze badges

Collectives™ on Stack Overflow

Using git with React Native team

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related