How to render MainNavigator in React Native Realm Login

MongoDB Atlas App Services & Realm
1

I have successfully login and do some crud operation in realm. Now I have login screen and the user enter email and password, the login is successfully but how to render MainNavigator component, I have already built my app other API and I am useing Redux libraries, but now I am testing realm login so how to re-render the component when I login with realm.
Note is when I first login with realm it required user in realm config but got undefined MainNavigator,
but when I closed the app the app get render and I successfully go the dashbaord. So how to re-render the MainNavigator, I tried redux but still not getting the result.

You can the MainNavigtore code below

const appId = ‘MyApp Id’;

const appConfig = {

    id: appId,

    timeout: 10000,

};

const myapp = new Realm.App(appConfig)

const {currentUser} = myapp

console.log("my app ", myapp.currentUser);

return (

    <NavigationContainer initialRouteName="Auth">

        <Stack.Navigator initialRouteName="Auth">

            {

                Object.keys(USER.user).length == 0 || !myapp.currentUser ?

               

                (<Stack.Screen name="Auth" component={AuthNavigator} options={screenCofigWithoutHeader} />)

                :

                (<Stack.Screen name="Home" component={MyTabs} options={screenCofigWithoutHeader} />)

            }

        </Stack.Navigator>

    </NavigationContainer>

);

Capture
Capture1137×658 27.4 KB

2

To render a **MainNavigator** in React Native after a successful login with Realm, you can follow these steps:

  1. In your login component, create a function that will be called after the login is successful. This function should navigate to the **MainNavigator** screen.
const navigateToMain = () => {
  navigation.navigate('MainNavigator');
};
  1. In the login function, after the login is successful, call the ‘navigateToMain function’ to navigate to the MainNavigator screen.
const login = async () => {
  // Perform login with Realm
  // If login is successful, call navigateToMain
  navigateToMain();
};
  1. In your main app component, use the **createStackNavigator** function from the react-navigation library to create a stack navigator with a screen for the **MainNavigator** and any other screens that you want to include in the stack.
import { createStackNavigator } from 'react-navigation';

const MainNavigator = createStackNavigator({
  Main: {
    screen: MainScreen
  },
  Settings: {
    screen: SettingsScreen
  }
});
  1. In the main app component, use the **createAppContainer** function from the react-navigation library to create an app container with the **MainNavigator** as the root navigator.
import { createAppContainer } from 'react-navigation';

const AppContainer = createAppContainer(MainNavigator);
  1. Render the **AppContainer** component in the main app component.
render() {
  return (
    <AppContainer />
  );
}

I hope this helps! Let me know if you have any additional questions.

3

Thanks for the help, but before your message I somehow manage.