App.tsx (The entry) - abhiram-shaji/Langroove GitHub Wiki

Function:
This function registers the main component of your app. It tells Expo to run this component.

Example:

registerRootComponent(App);

This means "run the App component when the app starts."

Function:
This is a React hook that allows you to add state to a functional component. In your code, it's used to track whether a user is logged in.

Example:

const [loggedIn, setLoggedIn] = useState<boolean | null>(null);

Here, loggedIn starts as null, and setLoggedIn is a function you can use to change its value.

Function:
This hook lets you perform side effects in your component, like fetching data or subscribing to events. In your code, it checks if a user is logged in when the component mounts.

Example:

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setLoggedIn(!!user); // If user exists, set loggedIn to true
  });
  return () => unsubscribe(); // Clean up when component unmounts
}, []);

This runs when the component loads and sets up a listener for authentication changes.

Function:
This is a component that shows a loading spinner while the app checks if the user is logged in.

Example:

if (loggedIn === null) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" />
    </View>
  );
}

This means "show a loading spinner while we determine if the user is logged in."

Function:
This component manages your app's navigation. It wraps the whole app so you can use navigation features.

Example:

<NavigationContainer>
  {/* Stack Navigator goes here */}
</NavigationContainer>

This means "enable navigation throughout the app."

Function:
This function creates a stack navigator, which manages a stack of screens. You can push new screens onto the stack and pop them off to go back.

Example:

const Stack = createStackNavigator<RootStackParamList>();

This sets up the stack navigator for your app.

Function:
This defines a screen in the stack navigator. Each screen can be a different part of your app.

Example:

<Stack.Screen name="Login" component={LoginScreen} />

This means "add a screen for the login, using the LoginScreen component."

Function:
This property sets the first screen that shows when the app starts.

Example:

initialRouteName={loggedIn ? 'Feed' : 'Login'}

This means "if the user is logged in, start with the Feed screen; otherwise, show the Login screen."