Show loading spinner in react native app while waiting for firebase authentification

user_15541305 0
Viewed 1732

I want to implement a loading spinner in my react native app while waiting for firebase authentification to be done.

Here's my login function:

async (email, password) => {
    try {
      await auth().signInWithEmailAndPassword(email, password);
    } catch (e) {
      alert(e);
    }
}

Thanks in advance for your answers!

asyncstorage firebase-authentication firebase react-native
1 Answers

Provided you work with functional components you can define a loading state with the useState Hook from react

const [loading, isLoading] = useState(false);

In your code it will looks like this:

login: async (email, password) => {
      try {
        setLoading(true);
        await auth().signInWithEmailAndPassword(email, password);
        setLoading(false);
      } catch (e) {
        alert(e);
      }
    }

Based on that state you can render this:

if(isLoading) {
  return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
           <ActivityIndicator/>
       </View>
  )
 }
user_31601350
Related