2

I'm sorry for the what might turn out to be a very stupid question, but for some time now I'm struggling with the following issue, but I'm new to react-native. I create a react-native app in which I implement the react-navigation-drawer navigation precisely as in the example. What happens is that whenever I open the App the drawer is opened. The same things happens when i copy and paste the example from here: https://reactnavigation.org/docs/en/drawer-based-navigation.html

This makes me think I'm missing something with the dependencies. I've upgraded all i could think of from the needed librabries. My CPU is not a good one so I'm using my Android phone for testing.

I also get the warning "componentWillMount has been renamed..." when i use the react-navigation-drawer.

If you could help guide me to some information that would be helpful! Thank you all in advance!

Below is some code for an example:

import React from 'react';
import { FlatList, ActivityIndicator, Text, Header, Image, View, ScrollView, Alert, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, StyleSheet  } from 'react-native';
import {Button, Icon, ThemeProvider} from 'react-native-elements';

import {createAppContainer, DrawerNavigator, withNavigation} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator, DrawerActions, DrawerLayoutAndroid} from 'react-navigation-drawer';
.....
const Screen1PageScreenStack = createStackNavigator({
    Screen1Page: {
        screen: Screen1Page,
    }
},{
    navigationOptions: ({ navigation }) => ({
        initialRouteName: 'Screen1Page',
        headerMode: 'screen',
        drawerLabel: 'HOME',
        drawerBackgroundColor: '#0000FF',
    }
)
});

const Screen2PageScreenStack = createStackNavigator({
    Screen2Page: {
        screen: Screen2Page,
    }
},{
    navigationOptions: ({ navigation }) => ({
        initialRouteName: 'Screen2Page',
        headerMode: 'screen',
        drawerLabel: 'Categories',

    }
),
});

const appNavigator = createDrawerNavigator({
Screen1Page: {
    name: 'Screen1PageScreenStack',
    screen: Screen1PageScreenStack,
},
Screen2Page: {
    name: 'Screen2PageScreenStack',
    screen: Screen2PageScreenStack,
}
});



const MyDrawerStrugglesApp = createAppContainer(appNavigator);
export default MyDrawerStrugglesApp ;
Gergana Georgieva
  • 21
  • 1
  • 5
  • 1
    Can you please reproduce your code here, so that it could be easy to help ? – amrs-tech Oct 01 '19 at 11:10
  • Have you tried my answer below ? – amrs-tech Oct 01 '19 at 11:48
  • I did and unfortunately what it does is it just hides the Label of the menu from the drawer. But the drawer is still there and is opened above the rest of the app. :( – Gergana Georgieva Oct 01 '19 at 11:49
  • Try to redefine your stack and drawer like in this example : https://jsfiddle.net/fte9sp2b/ . Also try to open your drawer with `onClick` of any hamburger menu button instead of using default swiping gesture – amrs-tech Oct 01 '19 at 12:01
  • Still no luck. Though if I come up with a decent solution I will let you know! Thanks a lot for you help! – Gergana Georgieva Oct 01 '19 at 14:14
  • Sorry that I couldn't give you a helpful solution – amrs-tech Oct 02 '19 at 03:44
  • 2
    @amrs-tech So, the problem was with the fact I had to test the app on my phone, due to not having enough CPU. So i could test i had to shake the phone so I can get the debugging menu where i had to click on Reload. What happened was that I got so sick of it that I decided to generate a release APK so I can be definitely sure it's the testing environment that was causing the issue. And YES! That was the problem! And everything else works fine so far with the drawer navigation and the stack navigation altogether! Thanks again for your help, I just wanted to give you some feedback! – Gergana Georgieva Oct 02 '19 at 16:46
  • Thanks for your feedback @Gergana Georgieva – amrs-tech Oct 03 '19 at 05:30

3 Answers3

1

You can try this code to keep your drawer hidden for required screen :

const Nav = createDrawerNavigator(

{
    Home: {
      screen: AppLogin,
      navigationOptions:{
        drawerLockMode: 'locked-closed',
        drawerLabel: <Hidden />
      },

    },
}
);

Your Hidden class should be as follows :

class Hidden extends React.Component {
  render() {
    return null;
  }
}

You can change the drawerLockMode value to keep the drawer opened or closed - Refer here for different values.

Also you can refer this SO answer here for avoiding the componentWillMount deprecation error. Hope this helps !

amrs-tech
  • 485
  • 2
  • 14
0

With react-navigation V5 you can pass the openByDefualt prop

 <Drawer.Navigator
      initialRouteName="Home"
      openByDefault>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 </Drawer.Navigator>
U.A
  • 2,991
  • 3
  • 24
  • 36
0

With react-navigation v6 all you need to do is pass defaultStatus="closed" prop directly to Drawer.Navigator. The app will always load with the drawer closed.

PunainenAurinko
  • 77
  • 2
  • 8