Ping SDKs

Step 4. Build and run the project

Now that everything is set up, build and run the to-do app project.

  1. Open your Finder application and find the following file ios/reactnativetodo.xcworkspace.

  2. Double click this file to open and load the project within Xcode.

  3. Once Xcode is ready, select iPhone 11 or higher as the target for the device simulator on which to run the app.

  4. Now, click the build/play button to build and run this application in the target simulator.

With everything up and running, you will need to rebuild the project with Xcode when you modify the bridge code (Swift files). But, when modifying the React Native code, it will use "hot module reloading" to automatically reflect the changes in the app without having to manually rebuild the project.

Troubleshooting

  1. Make sure libFRAuth.a is added to your Target’s Frameworks, Libraries, and Embedded Content under the General tab.

  2. Make sure the Metro server is running; npx react-native start if you want to run it manually.

  3. Bridge code has been altered, so be aware of API name changes.

  4. If you get the error, [!] CocoaPods could not find compatible versions for pod "FRAuth", run pod repo update then pod install.

Xcode, iOS Simulator and Safari dev tools

We recommend the use of iPhone 11 or higher as the target for the iOS Simulator. When you first run the build command in Xcode (clicking the "play" button), it takes a while for the app to build, the OS to load, and app to launch within the Simulator. Once the app is launched, rebuilding it is much faster if the changes are not automatically "hot reloaded" when made in the React layer.

react native home screen
Figure 1. To-do app home screen
Only the home screen will render successfully at this moment. If you click on the Sign In button, it won’t be fully functional. This is intended as you will develop this functionality throughout this tutorial.

Once the app is built and running, you will have access to all the logs within Xcode’s output console. Both the native and JavaScript logs display here. Because of this, there’s quite a lot of output, so you may want to use it only when the Safari console does not provide enough information for debugging purposes.

react native xcode login response
Figure 2. Xcode log output

For additional tooling, click "Device" within the top menu, and then select "Shake". This triggers the React Native dev tools, allowing you to reload the app, inspect the UI, as well as other actions.

Due to a particular confusing bug in React Native, we do not recommend using the Chrome debugger, but recommend using Safari for debugging. To use Safari for debugging the React code, follow the instructions found in the React Native docs.
react native safari devtools
Figure 3. Safari dev tools

Tips if the home screen doesn’t render

  1. Restart the app (in Xcode) and Metro (in terminal).

  2. Didn’t work? Using Xcode, clean the build folder and rebuild/rerun the app.

  3. If that doesn’t work, remove the following from the reactnative-todo directory: node_modules, package-lock.json, ios/.Pods, ios/Podfile.lock, and then reinstall dependencies with npm i and within the ios/ directory pod install.

  4. If you’re still having issues, within the simulator, click the Home button and long press the React Todo application to .remove it. Then, restart from the project Xcode.

  5. You can also use Device > Erase All Content and Settings if the problem persists.