Install a fresh react native project:
react-native init AwesomeProject
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.
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
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 + 1to fix the scaling to 100%.
Another thing that threw me off initially was with the
GoogleService-Info.plistfile. 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.
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.
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(
I ran into some rendering issues and an overload of requests on every refresh without enabling it.
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.