text: import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { useSelector } from 'react-redux';
  
  import { navigationRef } from './NavigationService';
  
  import Login from 'app/features/login/containers';
  import Home from 'app/features/home/containers';
  
  const Stack = createStackNavigator();
  
  const homeOptions = {
    title: 'My home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
  
  function App() {
    const isLoggedIn = useSelector(state => state.loginReducer.isLoggedIn);
  
    return (
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator>
          {isLoggedIn ? (
            <Stack.Screen name="Home" component={Home} options={homeOptions} />
          ) : (
            <Stack.Screen
              name="Login"
              component={Login}
              options={{
                // When logging out, a pop animation feels intuitive
                // You can remove this if you want the default 'push' animation
                animationTypeForReplace: isLoggedIn ? 'push' : 'pop',
              }}
            />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  
  export default App;
  