Skip to content

React Native

Jump to bottom
Marwan Zogheib edited this page Jun 29, 2024 · 12 revisions

Installation

  1. Follow all instructions at here for the base installation. Note the following:
    • Name cannot be in kebab-case. See here. So choose snake_case.
    • --directory client-mobile to install into directory named client-mobile. Otherwise it will install into client_mobile, which is not consistent with other directory names.
    • --pm yarn to use Yarn. Otherwise a package-lock.json will be created.
cd packages
npx react-native@latest init client_mobile --pm yarn --directory client-mobile

  1. React Native needs extra care in a monorepo. Do the following:

    • Do not hoist any of its dependencies by adding this to client-mobile/package.json 
      "installConfig": {
  "hoistingLimits": "workspaces"
}
    • Watch the root folder in order to import packages from within the monorepo 
      // metro.config.js
const config = {
  watchFolders: [path.resolve(__dirname, "../..")],
};

  2. Re-install (from the root directory)

yarn clean-node-modules
yarn
  1. Run the following for the iOS build.
cd packages/client-mobile/ios
bundle install
bundle exec pod install
  1. For Android, make sure all the right tools are installed and at the right version.
npx react-native doctor

Local development

Android

  • If running a local api, e.g. on http://localhost:3001, the emulator needs access to that port.
  • See here and here.
adb reverse tcp:3001 tcp:3001

Troubleshooting

Clean up

  • iOS
cd ios
rm -rf build/ Pods/
bundle install
bundle exec pod install
  • Android
cd android
./gradlew clean
  • NPM
yarn clean-node-modules
yarn

Cannot find node

  • After a reinstall of Node.js using nvm the iOS project may be looking for the node binary in an old location
  • This will lead to a build failure in Xcode with something like
/usr/local/bin/node: No such file or directory
  • To fix this, find the new location and specify it in .xcode.env.local 
which node
/Users/yourname/.nvm/versions/node/v18.20.3/bin/node

// copy the output into .xcode.env.local
export NODE_BINARY=/Users/yourname/.nvm/versions/node/v18.20.3/bin/node
Clone this wiki locally