TypeScript

Using TypeScript with React Native Firebase

The React Native Firebase project comes with support for TypeScript. The project provides Ambient Declarations for each Firebase module, without having to install any additional dependencies.

Example

To demonstrate TypeScript usage in a practical example, the following assumes TypeScript is already setup on your environment. If you are looking to setup a new project or migrate an existing project to TypeScript please check out this official blog post.

The below example makes use of the Authentication module, demonstrating how to safely type code using the declarations the module provides.

Lets go ahead and create a new App.tsx component:

import * as React from 'react';
import { Text } from 'react-native';
import auth from '@react-native-firebase/auth';

function App() {
  const user = auth().currentUser;

  return <Text>Welcome {user.email}</Text>;
}

export default App;

This code will produce a TypeScript error: Object is possibly null. Accessing currentUser returns the current User if the user is signed in or null if they are signed out. This error prevents our code from compiling and for good reason - without checking the users authentication status, accessing the email property on User will cause the app to crash!

To rectify our unsafe code, we can check the existence of the user before accessing it:

function App() {
  const user = auth().currentUser;

  if (!user) {
    return <Text>Please login</Text>;
  }

  return <Text>Welcome {user.email}</Text>;
}

TypeScript will no longer show any errors, allowing us to safely continue developing our app.

It is also possible to access the module types directly, if you need to locally reference variables within your own codebase.

For example, we may need to store the User in local state. Manually defining a type for local state TypeScript loses the ability to type check the code.

We can easily access the types manually through the module though, for example:

import * as React from 'react';
import { useEffect, useState } from 'react';
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';

function App() {
  const [loading, setLoading] = useState<boolean>(true);
  const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);

  useEffect(() => {
    auth().onAuthStateChanged(userState => {
      setUser(userState);

      if (loading) {
        setLoading(false);
      }
    });
  }, []);
}

export default App;

We firstly initialize a local state variable called user, and manually provide a type definition of that state item of <FirebaseAuthTypes.User | null>. As we are unaware of the users authentication state, we initialize state with a value of null which is a valid type for this state.

The onAuthStateChanged listener triggers with a User or null parameter whenever the users authentication state changes. The @react-native-firebase/auth module provides TypeScript with these types automatically. As the returned types match the local state type, we are able to set the state immediately without any type check errors.

Attempting to set user state to anything other than the User or null will throw a TypeScript error.

Definitions

The full set of TypeScript definitions for each module can be found on the invertase/react-native-firebase repository within each package.

For example, the auth module definitions are located at react-native-firebase/packages/auth/lib/index.d.ts.