Common Issues Coming in First React Native Project Set Up.

Hey, again In a series of discussion about React-Native here we are talking about Challenges coming in First React Native Project Setup. I am writting this because i am facing these issues so commonly on setting up a first react native project on different Machines and also find some issues which are coming without any permanent solution so that these issues becomes irritating at some points and demotivate a new comer in React Native. So I am going to list out some problems with their solutions.

  1. Module Installation and Versioning issues: In case of react native project there are so many issues are coming with version. So before going for all the setup and running successfully your project go a check for all necessary installation and their min required version:

a. Node Version(4.0 or newer)

b. React Native Cli(latest)

c. RNPM(latest)

d. React(compatible with React Native Version)

2. Scripting Issue: In some cases when we initialize a react native Project with command “react-native init ProjectName”, then in case of iOS build, by default there is script is written in Xcode setting build phase which is creating issue in finding the right path of react library from node module. To Solve this Issue follow these below steps:

a. Open Xcode Project from Project Directory.

b. Select Project Target in Side bar in Xcode.

c. Goto BuildPhase → Bundle React Native Code and Images and if there is any script is written then delete this.

(link: https://github.com/facebook/react-native/issues/12217)

3. In some cases after successful build formation of ios build there is a issue coming in simultor with showing red screen with a message like.. ”did not find node modules/lib/react and Systrace” some thing like this. then in this case You have to use react-native-git-upgrade , simply run this command in terminal on the path of project directory and if there is issue coming with message that react-native-git-upgrade command not found, then firstly Install this module globally with command npm install -g react-native-git-upgrade.

(link: https://github.com/facebook/react-native/issues/13390)

4.CFBundleIdentifier Not Found: This issue coming with many reason but commanly this issue coming with Analyzer issue like there are some library which are not analysed during compilation like showing error that: analyzer issue in Yoga or YGNodeList. To solve this Issue you have to set React Library as Shared Library through XCode setting. FirstLy Go through Xcode → Product → Manage Scheme → and then from list check React as Shared library.

5.boost/config/user.hpp file not found: This issue is coming to me with new version of React Native 0.45 and 0.46; still looking for the reason why this is coming in these new versions but for now we can resolve this issue with initialising an new react native project with react native version 0.44 with command react-native init ProjectName — version 0.44.0 or just simple degared version of react native in package.json by command npm install -S react-native@0.44.0 .

(link: https://github.com/facebook/react-native/issues/4917)

6. Header Files Not Found in XCode: This issue is so common and on doing some R&D you find that this issue is due to some Version mismatch of react and react-native. For Example: “React/RCTlog.h” or “React/RCTBridge.h” file not found; after doing some R&D we found that in new version these file import Syntax are change to <React/RCTLog.h> and <React/RCTBridge.h> so It is not possible to change all these syntax for all import statement in Project. In that case this issue is resolved with version check and changes in them.

7.Duplicacy in Import Files and Interfaces: There are some cases when we find an issue with showing error in some header file that “duplicacy in declaration”. In Mostly cases this issue can be resolved by simply deleting all the node modules and again install them after clearing the npm cache.

8. Xcode version compatibility with React Native Version: According to official docs of React Native XCode 7.0 or newer is required for initialising a new project of React Native.

9. In some cases some libraries are not not linked properly so at the time of build formation with XCode they are creating issues that any specific header file of a specific Library is not Found. So in that case we also have to make a seperate build of that Library. For Example if React/RCTLog.h file or React/RCTBridge.h file not found then in that case all these files belongs to React Library so You have to follow the following steps to build a specific library or .xcodeproj file of React Native.

a. Open Xcode and Click on Project target Options(On just left of Simulator Selection Dropdown).

b. Open Manage Scheme and select Library You want to build which is not Linked Properly.

c. Click on Build Button after Clearing your Xcode Proj. with (cmd + shift + k).

All the issues discussed above are realated to each other so it is possible that one solution is worked for more than one issues. For Example: Versioning issues are so common in react native so in that case react-native-git-upgrade is work like a charm. So Keep Exploring and Enjoy Coding!!! :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.