Firebase setup (@react-native-firebase) in React Native - Mini App: Build & Ship

Build: Firebase Setup Screen

This screen shows a simple message confirming Firebase is set up correctly in a React Native app using @react-native-firebase.

Target UI

-------------------------
| Firebase Setup Screen  |
|-----------------------|
|                       |
|  Firebase is ready!    |
|                       |
|-----------------------|

Install and configure @react-native-firebase/app in the React Native project

Initialize Firebase in the app

Create a screen that displays 'Firebase is ready!' text

Ensure the app runs without errors related to Firebase

Starter Code

React Native

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

// TODO: Import Firebase app module

export default function FirebaseSetupScreen() {
  // TODO: Initialize Firebase app if needed

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Loading Firebase...</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  text: {
    fontSize: 18,
    color: '#333'
  }
});

Task 1

Task 2

Task 3

Solution

React Native

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';
import firebase from '@react-native-firebase/app';

export default function FirebaseSetupScreen() {
  // Firebase app is auto-initialized by @react-native-firebase/app

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Firebase is ready!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  text: {
    fontSize: 18,
    color: '#333'
  }
});

We import the @react-native-firebase/app module which automatically initializes Firebase using the native configuration files (GoogleService-Info.plist for iOS and google-services.json for Android).

Since initialization is automatic, we just display a simple message confirming Firebase is ready.

This setup ensures the app can use Firebase services without manual initialization code.

Final Result

Completed Screen

-------------------------
| Firebase Setup Screen  |
|-----------------------|
|                       |
|  Firebase is ready!    |
|                       |
|-----------------------|

User opens the screen and sees the message 'Firebase is ready!'

No buttons or inputs on this screen

Stretch Goal

Add a button that checks Firebase app initialization status and shows an alert

💡 Hint

Use firebase.app().name to verify initialization and React Native Alert API to show messages