Got a component with the name "" for screen ""

Question

So im making an app with authentication flow and followed the docs now even though there was no user in the state the navigation didn't move to login screen so i changed the condition for rendering and now the i'm on Login page except there's no output and following error

Got a component with the name 's' for the screen 'Settings'.Got a component with the name 'l' for the screen 'Login'.Got a component with the name 'p' for the screen 'Home'. React Components must start with an uppercase letter. If you're passing a regular function and not a component, pass it as children to 'Screen' instead. Otherwise capitalize your component's name.

App.js

import React, {createContext, useContext, useEffect, useState} from 'react';

import {NativeBaseProvider, Box} from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {theme} from './theme';
import {NavigationContainer} from '@react-navigation/native';
import {
  signInWithEmailPassword,
  signOutFunc,
  signUpWithEmailPassword,
  signInWithGoogle,
} from './components/auth/helper';
import Login from './components/auth/Login';
import Settings from './components/core/Settings';
import Home from './components/core/Home';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator();
export const AuthContext = createContext();

export default function App({navigation}) {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_USER':
          return {...prevState, user: action.user, isLoading: false};
        case 'SIGN_IN':
          return {...prevState, isSignout: false, user: action.user};
        case 'SIGN_OUT':
          return {...prevState, isSignout: true, user: null};
      }
    },
    {
      isLoading: true,
      isSignout: false,
      user: null,
    },
  );
  const authContext = React.useMemo(
    () => ({
      signIn: async (data, type) => {
        let user;
        if (type === 'email') {
          user = await signInWithEmailPassword(data.email, data.password);
        } else {
          user = await signInWithGoogle();
        }

        if (user) {
          try {
            await AsyncStorage.setItem('user', JSON.stringify(user));
            dispatch({type: 'SIGN_IN', user: user});
          } catch (e) {
            console.log(e);
          }
        }
      },
      signOut: async type => {
        try {
          signOutFunc('google');
        } catch (e) {
          console.log(e);
        }
        try {
          signOutFunc('email');
        } catch (e) {
          console.log(e);
        }
        dispatch({type: 'SIGN_OUT'});
      },
      signUp: async (data, type) => {
        let user;
        if (type === 'email') {
          user = await signUpWithEmailPassword(data.email, data.password);
        } else {
          user = await signInWithGoogle();
        }
        if (user) {
          try {
            const user = await AsyncStorage.setItem(
              'user',
              JSON.stringify(data),
            );
            dispatch({type: 'SIGN_IN', user: user});
          } catch (e) {
            console.log(e);
          }
        }
      },
    }),
    [],
  );
  useEffect(() => {
    const bootstrapAsync = async () => {
      let user;
      try {
        user = await AsyncStorage.getItem('user');
        console.log(user);
      } catch (e) {
        console.log(e);
      }
      dispatch({type: 'RESTORE_USER', user: user});
    };
    bootstrapAsync();
  }, [state.user]);

  return (
    <NativeBaseProvider theme={theme}>
      <AuthContext.Provider value={authContext}>
        <NavigationContainer
          screenOptions={{
            headerShown: false,
          }}>
          {state.user !== null ? (
            <Tab.Navigator>
              <Tab.Screen name="Login" component={Login} />
            </Tab.Navigator>
          ) : (
            <Tab.Navigator screenOptions={{headerShown: false}}>
              <Tab.Screen name="Home" component={Home} />
              <Tab.Screen name="Settings" component={Settings} />
            </Tab.Navigator>
          )}
        </NavigationContainer>
      </AuthContext.Provider>
    </NativeBaseProvider>
  );
}

Login.js

import {View, Text} from 'react-native';
import React from 'react';
import EmailSignUp from './EmailSingUp';
import GoogleSignin from './GoogleSignIn';

const Login = () => {
  return (
    <View>
      <GoogleSignin />
      <EmailSignUp />
    </View>
  );
};

export default Login;

Setting.js

import {View, Text} from 'react-native';
import React from 'react';
import {AuthContext} from '../../App';
import {Button} from 'react-native-paper';

const Settings = () => {
  const {signOut} = React.useContext(AuthContext);
  return (
    <View>
      <Text>Settings</Text>

      <Button onPress={() => signOut()}>Sign Out </Button>
    </View>
  );
};

export default Settings;

Answer 1

I had the same issue on Android. I realised that my "JS Minify" setting was checked which loads the JavaScript bundle with minify=true.

It might be the same issue in your case.

In order to disable this settings, open the Developer menu, select "Settings" and then unselect "JS Minify" option.

Close your app/uninstall it first to ensure that you no longer have this issue.