Quickstart Guide for a React-Native (iOS), Facebook Login, and Firebase Realtime DB setup

Instructions:

Install a fresh react native project:
react-native init AwesomeProject

Install react-native-firebase:
npm i react-native-firebase --save

Run to the iOS installation guide
Add the google-services.plist
Add Firebase import to your AppDelegate.m, along with [FIRApp configure];

Run the Automatic Install
react-native link react-native-firebase
cd ios && pod update --verbose

Note: You need to use the ios/[YOUR APP NAME].xcworkspace instead of the ios/[YOUR APP NAME].xcproj file from now on.

Now we’re going to grab the Facebook SDK and add it to our xcworkspace file in XCode.

https://developers.facebook.com/docs/ios/getting-started/

Download the SDK and move it to ~/Documents/FacebookSDK

Follow the instructions to reference the framework files to the XCode project, add the Framework Search path to the Build settings, and add the necessary XML to to the Info.plist file in your RN’s ios directory.

After the Facebook SDK configuration is complete, try running
react-native run-ios

Updating XCode build paths

If the build fails, try updating the build path settings in XCode. Go to File > Workspace Settings > Advanced and select Custom > Relative to Workspace and add a build/ prefix to each path.

Quick tip: When running react-native run-ios with an external monitor, the Scaling will be off on the Simulator. You can hit Cmd + 1 to fix the scaling to 100%.

Another thing that threw me off initially was with the GoogleService-Info.plist file. I originally just copied this file to my ios directory. However, you should also drag this file to your XCode project root and create a reference, otherwise the build failed.

Dependencies

Once we have our initial run-ios running properly, we can start adding our React dependencies.

  • Moment: Time/date handling library
  • @shoutem/ui: Some nifty component styling shortcuts
  • react-native-linear-gradient: Required by shoutem ui
  • react native element: More UI stuff
  • react native scrollable tab view: For horizontal navigation
  • react-native-vector-icons: Lots of icons
  • react-navigation: Currently the standard for react native navigation

npm install --save moment @shoutem/ui react-native-linear-gradient react-native-elements react-native-scrollable-tab-view react-native-vector-icons react-navigation

At this point it’s worth running react-native link to compile any package libraries to our XCode project.

React Native Facebook Login

I felt the Facebook SDK was inadequate (or just lacking documentation), so I’m additionally relying on the Facebook Login component to handle my login states.

##Navigation
This is a tricky topic, as the React Native community has been working out how navigation should be handled in a React Native app. React is, after all, a View layer to an application, so handling state in a component tree doesn’t readily translate into route handling.

One tip for React Navigation, is to use lazy loading in development for TabNavigator.

export const MainScreenNavigator = TabNavigator(
  tabRoutes,
  {
    lazy: true
  }
);

I ran into some rendering issues and an overload of requests on every refresh without enabling it.

App Icons

https://github.com/dwmkerr/app-icon

Conclusion

This is a part 1 of a series of tutorials for getting a React Native app up and running with Facebook login and Firebase backend.