CODEWITHSUNDEEP
react-native
Nie Selam
Nie Selam

Reputation: 1451

props.navigation when component is not part of stack navigator

I have a stackNavigator and DrawerNavigator defined in AppNavigator.js file. It is then imported by App. In AppNavigator, I have a drawer icon to open the sidebar but I can't open it yet because navigate don't exist. I can't pass navigation to AppNavigator sine App component is not part of the stack navigator. I am trying to contain my navigation in one file and still be able to open/close my drawer bar from there. Any help?

AppNavigator.js:

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ScreenHome from './screens/member/ScreenHome';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from "react-native-vector-icons/Ionicons";

const authenicatedNavigation = createStackNavigator(
  {
    Home: {
      screen: ScreenHome,
      navigationOptions: ({ navigation }) => ({
        title: "Home",
        drawerLabel: "Home"
      })
    }
  },
  {
    initialRouteName: "Home",
    headerMode: "screen",
    defaultNavigationOptions: {
      headerStyle: {
          backgroundColor: '#ffffff',
          elevation: 0,
          shadowOpacity: 0
      },
      headerTintColor: '#333333',
      headerTitleStyle: {
          fontWeight: 'bold',
          color: '#ffffff'
      },
      headerLeft: (

        <Icon
        style={{paddingLeft: 10, color:'white'}}
        onPress={()=> navigation.openDrawer()} //-----undefined navigation
        name="md-menu"
        size={30}
        />
      )

  }
  }
)

const MainDrawer = createDrawerNavigator(
  {
    MainTabs: authenicatedNavigation,
  },
  {
    hideStatusBar : false,
    drawerBackgroundColor: 'rgba(255,255,255,0)',
    overlayColor : '#f68873',
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#6b52ae'
    }
  }



  );

const App = createSwitchNavigator({
  App: {
    screen: MainDrawer,
  }
});


const AppNavContainer = createAppContainer(
 App,
 {
  initialRouteName: 'App',
}
);

export default AppNavContainer;

App.js:

import React , {Component}  from 'react';
import { StyleSheet, View } from 'react-native';
import AppNavContainer from './AppNavigator';
import NavigationService from './shared/NavigationService';
import  {axios} from './shared/httpinterceptor';

export default class App extends Component {
  constructor(){
    super();
  }

  render() { 

  return (
    <View>
      <AppNavContainer
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
      />
    </View>
  );
  }
}

Currently, in ScreenHome file, I can open the drawer by:

  <Button onPress={this.props.navigation.openDrawer}  title="Open"/>

Given I have no access to props.navigation in Apps, how do I open the drawer from AppNavigator?

Upvotes: 0

Views: 72

Answers (1)

bug
bug

Reputation: 4150

defaultNavigationOptions (as well as navigationOptions) can be defined as a function which receives the navigation instance as parameter, so you'd just need to update your defaultNavigationOptions as follows:

defaultNavigationOptions: ({navigation}) => ({
  headerStyle: {
    backgroundColor: '#ffffff',
    elevation: 0,
    shadowOpacity: 0
  },
  headerTintColor: '#333333',
  headerTitleStyle: {
    fontWeight: 'bold',
    color: '#ffffff'
  },
  headerLeft: (
    <Icon
      style={{paddingLeft: 10, color:'white'}}
      onPress={()=> navigation.openDrawer()}
      name="md-menu"
      size={30}
    />
  )
})

Upvotes: 1

Related Questions