Using the native Firebase SDK
It's possible to use Firebase through the web SDK, built only in JavaScript, or the native SDK, which is built in native code for iOS and Android. The web SDK only provides access to some Firebase features and the most notable limitation is the lack of support for browser features used in Firebase Analytics or the redirect URI scheme used for phone authentication. If this is important for you, it may make sense to install the native SDK in your app.
If you have not done so already, create a Firebase project for your app by clicking on
Add project in the
Firebase Console.
This will guide you through a series of steps to create your own Firebase project.
Some (but not all) native Firebase features can be used with the Managed Workflow. The most notable native feature is Firebase Analytics,
which is otherwise unavailable in react-native using the Firebase JavaScript SDK.
- To being using Native Firebase with Expo, you will start using the plugin
@react-native-firebase/app
. You can reference the React Native Firebase docs for more details as needed. - Note: By doing this you will convert your project into a semi-managed project and will need to rebuild it if any native code changes. For more information on adding custom native code, see here.
{
"expo": {
"plugins": [
"@react-native-firebase/app"
]
}
}
- Once the plugin is in use you will need to:
- To prebuild your project, you will run
expo prebuild
. This will need to be done after every native code change. - To run your project on a local simulator you will run
expo run [ios:android]
- To run your project on a external device you will need to build a development client and install it on your external device. This development client will act as a custom version of Expo Go built with your native code. To start the developemnt client you will run
expo start --dev-client
- To build your project you will use
eas build
- Open Project overview in the firebase console and click on the Android icon or + button to Add Firebase to your Android app.
- Make sure that the Android package name is the same as the value of
android.package
in your app.json. - Register the app & download the config file by clicking "Download google-services.json" and drag the file into your Expo project folder.
- Add the relative path to the Android google-services.json file to app.json.
{
"expo": {
"android": {
"package": "com.mypackage.coolapp",
"googleServicesFile": "./google-services.json"
}
}
}
- Open Project overview in the Firebase console and click on the iOS icon or + button to Add Firebase to your iOS app.
- Make sure that the iOS bundle ID is the same as the value of
ios.bundleIdentifier
in your app.json. - Register the app & download the config file by clicking "Download GoogleService-Info.plist" and drag the file into your Expo project folder.
- Add the relative path to the iOS GoogleService-Info.plist file to app.json.
{
"expo": {
"ios": {
"bundleIdentifier": "com.mypackage.coolapp",
"googleServicesFile": "./GoogleService-Info.plist"
}
}
}
- Open Project overview in the Firebase console and click on the Web icon or + button to Add Firebase to your Web app.
- Register the app & copy the config into your app.json under the key
web.config.firebase
.
{
"expo": {
"web": {
"config": {
"firebase": {
"appId": "xxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
"apiKey": "AIzaXXXXXXXX-xxxxxxxxxxxxxxxxxxx",
"projectId": "my-awesome-project-id",
...
"measurementId": "G-XXXXXXXXXXXX"
}
}
}
}
}
In the bare workflow, the firebase configuration needs to be added according to the native Firebase SDK installation guides
for
iOS and
Android.
Below you will find a tailored instruction for use with react-native and the Expo Bare Workflow.
Open Project overview in the Firebase console and click on the iOS icon or + button to Add Firebase to your iOS app.
Make sure that the iOS bundle ID is the same as the value of Bundle Identifier
of your iOS project.
Register the app & download the config file by clicking "Download GoogleService-Info.plist".
Open your Expo iOS project in Xcode ios/{projectName}.xcworkspace
and then drag the services file into your project. If you don't see the .xcworkspace
workspace file, run npx pod-install
to create it.
- Be sure to enable 'Copy items if needed'.
Initialize the default Firebase app by opening the AppDelegate file in your project.
Note that following the upgrade to Expo SDK 45, your AppDelegate file will have the .mm
extension as opposed to the .m
extension.
At the top of the didFinishLaunchingWithOptions
method:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FIRApp configure];
Rebuild your iOS project to see the changes: expo run:ios
After following the iOS and Android setup, you can optionally configure your project to work with react-native-firebase
version 6 as well.
- Install the
react-native-firebase
packages (e.g. yarn add @react-native-firebase/app @react-native-firebase/auth etc..
) - Install the pods on iOS