I have a React Native project with two version numbers. The first is the one that's configured in XCode for the iOS version of the app, and the other is from the version property in the project's package.json file. Apple restricts the format that the version number can take to just numbers and two dots, however I'm using Semver and the additional fields this provides are useful for internal and TestFlight pre-releases.
XCode marketing version: 4.0.0
npm Semver version: 4.0.0-alpha.2
I want to display the Semver version in the app UI to make it clear which version is in use, and whether it is a pre-release. The obvious way to do this, is to import the package.json file, and access the version property directly:
import { version } from 'App/package.json'...<Text>v{version}</Text>This works, however, when I come to bundle the JavaScript for a deployment, I find that Metro copies the package.json file into the ios/assets folder in the React Native project. This causes the XCode build to fail with the error:
error: File /Users/.../main.jsbundle does not exist.
Attempting to bundle the JavaScript again produces another error:
Loading dependency graph...jest-haste-map: Haste module naming collision: App The following files share their name; please adjust your hasteImpl: * <rootDir>/App/package.json * <rootDir>/ios/assets/App/package.json...npm ERR! app@0.0.0 build-ios:prod: `react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios`npm ERR! Exit status 1
How can I get Metro to play nice so that package.json can be imported without breaking the bundle? Is there another/better way of getting the version number from the package.json file?