CODEWITHSUNDEEP
react-nativereact-navigation
Morton
Morton

Reputation: 5782

this.props.navigation is undefined

I use library with react-navigation and i can slide the drawer as well.

Now i want to set a button can open the drawer , but i find that my this.props.navigation is undefined from console.log(this.props.navigation).

So it will cause the undefined error if i try to use 

<Button transparent onPress={() =>   
  {this.props.navigation.navigate('DrawerOpen')}>
  <Icon name='menu' />
</Button>

How do i fix the error ? Any help would be appreciated.

I create my Drawer with a component like this:

    import React, { Component } from 'react';
    import { Image, ScrollView } from 'react-native';
    import { DrawerNavigator, DrawerItems } from 'react-navigation';
    import PageOne from './PageOne';
    import PageTwo from './PageTwo';


    class MyDrawer extends Component {

        render() {

            const TheDrawer = DrawerNavigator({
                PageOne: {
                    screen: PageOne,
                    navigationOptions: {
                        drawerLabel: 'It\s page One',
                        drawerIcon: () => (
                            <Image source={require('../img/nav_icon_home.png')} />
                        ),
                    },
                },

                PageTwo: {
                    screen: PageTwo,
                    navigationOptions: {
                        drawerLabel: 'It\'s page Two',
                        drawerIcon: () => (
                            <Image source={require('../img/nav_icon_home.png')} />
                        ),
                    },
                },
            }, {
                    drawerWidth: 300,
                    contentComponent: props => <ScrollView>
                        <DrawerItems {...props}
                            activeTintColor='#008080'
                            activeBackgroundColor='#EEE8AA'
                            inactiveTintColor='#20B2AA'
                            inactiveBackgroundColor='#F5F5DC'
                            style={{ backgroundColor: '#F5F5DC' }}
                            labelStyle={{ color: '#20B2AA' }}
                        />
                    </ScrollView>
                });

            return (
                <TheDrawer />
            );
        }

};

export default MyDrawer;

Use MyDrawer in App.js: (Undefined error is over here)

import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { TabNavigator, DrawerNavigator } from 'react-navigation';
import MyDrawer from './screens/MyDrawer';

import { Container, Header, Button, Text, Icon, Left, Right, Title, Body } from 'native-base';

//style={[styles.icon, { tintColor: tintColor }]}
export default class App extends React.Component {

  render() {
    // it shows undefined
    console.log(this.props.navigation);

    return (
      <Container>
        <Header>
          <Left>
            <Button transparent onPress={() => { alert('test') }}>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>I am Title Man</Title>
          </Body>
          <Right />
        </Header>
        <MyDrawer />
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Upvotes: 0

Views: 2095

Answers (1)

ufxmeng
ufxmeng

Reputation: 2600

To control TheDrawer navigator from App component, you need to store the ref of TheDrawer to a service, and dispatch actions from that service.

class MyDrawer extends Component {
  // ...

  render(): {
    //...

    return (
      <TheDrawer
        ref={navigatorRef => {
          NavigatorService.setContainer(navigatorRef);
        }}
      />
    );
  }
}

Then use NavigatorService.navigate('DrawerOpen') to open the drawer. For more details, you can see this

Upvotes: 1

Related Questions