Use specific package name when setting up a react-native project

The below worked for me. Substitute your own app name for "Foo App" and your own package name for org.newpackage.app.

NEW_APP_NAME="Foo App"
NEW_PACKAGE_NAME=org.newpackage.app
OLD_PACKAGE_NAME=org.reactjs.native.example
npx react-native init rndemo && \
  cd rndemo && \
  npx react-native-rename "${NEW_APP_NAME}" -b ${NEW_PACKAGE_NAME} && \
  rm -rf ios/Pods && \
  pod install --project-directory=./iOS && \
  grep -rl ${OLD_PACKAGE_NAME} * | \
    xargs sed -i '.bak' "s/${OLD_PACKAGE_NAME}/${NEW_PACKAGE_NAME}/g"

I've created a gist that does this, prompting interactively for the app name and package name. The gist is a tiny bit more sophisticated, in that (in the above example) it would initially create the app fooapp instead of rndemo.

Explanation:

  1. Create a react-native app. It's called rndemo temporarily; we need to know what it's going to be called so we can change to it.
  2. Run react-native-rename to rename the new project to whatever you specified; this lets us replace the package name too.
  3. Remove the installed cocoa pods and reinstall them (so they'll pick up the new folder locations etc).
  4. Search for the default package name org.reactjs.native.example and replace it with your new package name. Currently this will only find ios/FooApp.xcodeproj/project.pbxproj. The old project.pbxproj file will be saved with a '.bak' extension. This step would probably be better done with find . -name project.pbxproj -exec ..... but this was good enough for my needs.

Note: it's working only in RN 0.37 and maybe one or two versions up, in 0.40+ this feature was removed.

You need to specify a --package option:

$ react-native init MyApp --package=com.organization.project.app

Tags:

React Native