Notes taken while setting up a modern React Native environemnt

2019-05-12

Hello World

I started by creating a GitHub repository, and initializing a React Native project using the React Native CLI.

react-native init RNSprout

The full instructions can be foune here

Firebase

Next, I installed react-native-firebase v5.

At the time of this writing, v6 looks close to being ready, but not quite there.

Steps

I followed the steps listed here

  1. npm install --save react-native-firebase
  2. Add GoogleService-Info.plist
    • I already had a Firebase project setup, but there are instructions here.
    • Once I had the plist file, I moved it to /src/ios/FirebaseDev/GoogleService-Info.plist
  3. Install the SDK using Cocoapods
    • cd ios
    • pod update
    • pod init
    • I added the following pods to my Podfile:
       pod 'Firebase/Core', '~> 5.20.1'
       pod 'Firebase/Auth', '~> 5.20.1'
       pod 'Firebase/Database', '~> 5.20.1'
       pod 'Firebase/Messaging', '~> 5.20.1'
       pod 'GoogleUtilities', '= 5.8.0'
      

    The reason for adding GoogleUtilities is because I was getting an “Undefined symbols” error.

    This GitHub issue helped me figure this out.

  4. Use Firebase in App.js to be sure everything is setup correctly. ``` import firebase from ‘react-native-firebase’

[…]

componentDidMount = () => { firebase.auth().onAuthStateChanged(firebaseUser => { console.log(‘firebaseUser’, firebaseUser) }) } ```

Victory Charts

victory-native is a charting library for React Native. I followed the instructions in the readme to get a chart to load.

Troubleshooting

After installing react-native-svg, my app was crashing with the error, “Invariant Violation: requireNative Component: “RNSVGPath” was not found in the UIManager”

This issue was solved by explicitely declaring some pod dependencies as detailed in this article.

As a general thing to do if there are errors, be sure that victory-native and react-native-svg are installed properly.

  • Check package.json to verify both libraries are installed.
  • Take a look at manual linking steps and double check that the lib is properly linked.