White screen on initial yarn ios

[ironspur5]

Step 4 Implement the UI in the accompanying guide leads to a white screen blank expo app on iOS simulator when login and registration should be showing up.

[harrytruong]

I assume you're referring to Step 4 from this guide: https://www.freecodecamp.org/news/react-native-firebase-tutorial/

The white screen blank issue comes from the code for App.js as described in Step 3:

  if (loading) {
    return (
      <></>
    )
  }

I think the author (cc @mrcflorian) made a mistake here, and did not mean to include this return (<></>) render logic as part of Step 3, since there's no corresponding logic to update loading to become false (This gets implemented later, in Step 7 of the guide.)

QUICK FIX:

If you've completed Step 4, and don't see the UI with the login/registration screens, then you should update App.js and just comment out the loading state render logic:

//  if (loading) {
//    return (
//      <></>
//    )
//  }

RECOMMENDED FIX:

@mrcflorian Would you mind fixing Step 3 of the tutorial?

[mrcflorian]

Thanks for taking a look guys. @harrytruong is right. I've just updated the tutorial.

[harrytruong]

Damn @mrcflorian, that was a crazy fast response, haha. Thank you for the very quick update! (I'm pointing my intern to your tutorial to help them learn React Native, and it's been very helpful so far.)

If you have time, I think you might want to review your tutorial one more time:

• Step 7 still references setLoading (which is now undefined)
• Also, Step 5 includes a call to navigation.navigate('Home', {user: data}) which I'm not sure will work (b/c App.js hasn't rendered <Stack.Screen name="Home" /> at that point.)

[mrcflorian]

I've updated the loading thing again, to reflect the right order. Home has been defined at step 3, so it should be available already at step 7/8.

[harrytruong]

Home has been defined at step 3, so it should be available already at step 7/8.

Yeah, but it's conditionally rendered based on the user value (which is defaulted to null, and doesn't get updated by Step 5)

        { user ? (
          <Stack.Screen name="Home">
            {props => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}

@mrcflorian I might be wrong, but it seems like without <Stack.Screen name="Home" /> being rendered, the calls to navigation.navigate('Home', ...) in Step 5 & 6 would fail?

(It all works properly by the end of Step 7, when setUser() is added. The problem is just that it's in a broken state by the end of the Step 5 of your tutorial.)

[ironspur5]

Thank you both very much for looking at this issue! I'n new to React Native, so I'll continue to follow this thread to see a complete resolution.

[tpssim]

Home has been defined at step 3, so it should be available already at step 7/8.

Yeah, but it's conditionally rendered based on the user value (which is defaulted to null, and doesn't get updated by Step 5)

        { user ? (
          <Stack.Screen name="Home">
            {props => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}

@mrcflorian I might be wrong, but it seems like without <Stack.Screen name="Home" /> being rendered, the calls to navigation.navigate('Home', ...) in Step 5 & 6 would fail?

(It all works properly by the end of Step 7, when setUser() is added. The problem is just that it's in a broken state by the end of the Step 5 of your tutorial.)

The registration remains broken even after Step 7. Just remove the user from Firebase console and try to sign up again. You will get the same navigation error and after a reload you get to home screen because of the persistent login.

Because of the conditional render 'Home' screen won't exist simultaneously with 'Login' and 'Registration' and thus the navigator cant find 'Home' when called from 'Login' or 'Registration.'

Edit: Here is a way to move from login to home without using NAVIGATE: https://reactnavigation.org/docs/auth-flow