React-Navigation - DrawerNavigator Performance issue

Question

I'm experiencing a performance issue with DrawerNavigator with the following code.

class App extends Component {

  componentDidMount(){
    var salt = bcrypt.genSaltSync(10);
    var hash = bcrypt.hashSync("StrToHash", salt);
  }


  render() {
    console.log("rendering");
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Button
          onPress={ () => {} }
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

Home.navigationOptions = {
  drawerLabel: 'Home',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="move-to-inbox"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};

App.navigationOptions = {
  drawerLabel: 'App',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
  ),
};


export default DrawerExample = DrawerNavigator(
  {
    Home: {
      path: '/',
      screen: Home,
    },
    App: {
      path: '/sent',
      screen: App,
    },
  },
  {
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    initialRouteName: 'Home',
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);

I don't understand why, each time I put some logic in componentDidMount() DrawerNavigator start to be laggy and does not work properly on Android. I think I'm missing something but I don't know what. If I have to put some logic in a component, where should I put the logic code ? If someone would like to enlighten me:)

Answer 1

use prop detachInactiveScreens={false} in <Drawer.Navigator> but you also need to

import { enableScreens } from 'react-native-screens'

it solved my lagging issue of drawer.