0

I am trying to scaffold a simple drawer and navigation in react-native.

As you can see I import the drawer and then I instantiate the Navigator below the Toolbar.

I want to be able to change the route from the AppDrawer but the only thing I get after the button click is

*undefined is not a function (evaluating '_this2.props.navigator.push({ id: 'component5' })') *

Note: I have not attached Component 3 or 5 code because they are simple text renders.

index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, Navigator, ToolbarAndroid} from 'react-native';

import Component3 from "./app/components/Component3/Component3";
import Component5 from "./app/components/Component5/Component5";


import MyAppDrawer from "./app/components/Miscellaneous/AppDrawer";
import Drawer from 'react-native-drawer';


const drawerStyles = {
    drawer: {
        shadowColor: "#343477",
        shadowOpacity: 0.8,
        shadowRadius: 0,
    }
}


export default class ReactTest extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            drawerType: 'overlay',
            openDrawerOffset: 50,
            closedDrawerOffset: 0,
            panOpenMask: .1,
            panCloseMask: .9,
            relativeDrag: false,
            panThreshold: .25,
            tweenHandlerOn: false,
            tweenDuration: 350,
            tweenEasing: 'linear',
            disabled: false,
            tweenHandlerPreset: null,
            acceptDoubleTap: false,
            acceptTap: false,
            acceptPan: true,
            tapToClose: false,
            negotiatePan: false,
            rightSide: false,
        };
    }


    openDrawer() {
        this.drawer.open()
    }


    renderScene(route, navigator) {
        switch (route.id) {
            case 'component2':
                return (<Component2 navigator={navigator}/>)
            case 'component3':
                return (<Component3 navigator={navigator}/>)
            case 'component4':
                return (<Component4 navigator={navigator}/>)
            case 'component5':
                return (<Component5 navigator={navigator} title="component5"/>)
            case 'component6':
                return (<Component6 user={route.user} navigator={navigator} title="component6"/>)
        }
    }

    onActionSelected(position) {
        console.log("Settings clicked");
    }

    onIconClicked(position) {
        console.log("App Drawer clicked");
    }


    render() {
        var controlPanel = <MyAppDrawer navigator={navigator} closeDrawer={() => {
            this.drawer.close();
        }}/>
        return (


            <View style={styles.containerToolbar}>


                <Drawer
                    ref={c => this.drawer = c}
                    type={this.state.drawerType}
                    animation={this.state.animation}
                    captureGestures={true}
                    openDrawerOffset={this.state.openDrawerOffset}
                    closedDrawerOffset={this.state.closedDrawerOffset}
                    panOpenMask={this.state.panOpenMask}
                    //panCloseMask={this.state.panCloseMask}
                    relativeDrag={this.state.relativeDrag}
                    panThreshold={this.state.panThreshold}
                    content={controlPanel}
                    styles={drawerStyles}
                    disabled={this.state.disabled}
                    // tweenHandler={this.tweenHandler.bind(this)}
                    // tweenDuration={this.state.tweenDuration}
                    // tweenEasing={this.state.tweenEasing}
                    acceptDoubleTap={this.state.acceptDoubleTap}
                    acceptTap={this.state.acceptTap}
                    acceptPan={this.state.acceptPan}
                    tapToClose={this.state.tapToClose}
                    negotiatePan={this.state.negotiatePan}
                    // changeVal={this.state.changeVal}
                    side={this.state.rightSide ? 'right' : 'left'}
                >
                    <ToolbarAndroid
                        style={styles.toolbar}
                        title="MyApp"
                        // logo={require('./dummy_logo.png')}
                        navIcon={require("./navigation_icon.png")}
                        onActionSelected={this.onActionSelected}
                        onIconClicked={this.openDrawer.bind(this)}
                        titleColor="black"
                        actions={[
                            {title: "Log out", show: "never"}
                        ]}
                    />
                    <Navigator
                        style={styles.container}
                        initialRoute={{id: 'component3'}}
                        renderScene={this.renderScene}/>
                </Drawer>

            </View>
        );
    }


}
const styles = StyleSheet.create({
    containerToolbar: {
        flex: 1,
        //justifyContent: 'center',
        justifyContent: 'flex-start',
        // https://github.com/facebook/react-native/issues/2957#event-417214498
        alignItems: 'stretch',
        backgroundColor: '#F5FCFF',
    },
    toolbar: {
        backgroundColor: '#e9eaed',
        height: 56,
    },

});


AppRegistry.registerComponent('ReactTest', () => ReactTest);

AppDrawer.js

import React, {Component} from 'react'; import {View, Text, Button, Navigator} from 'react-native';

import styles from './styles';

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

    render() {
        return (
            <View style={styles.controlPanel}>
                <Text style={styles.controlPanelWelcome}>
                    Control Panel
                </Text>
                <Button
                    onPress={() => {
                        console.log("pressed");
                        this.props.navigator.push({
                            id: 'component5',
                        });
                    }}  
                    title="Component 5"
                />
            </View>
        )
    }
}

1 Answer 1

0

Since you don't have MyAppDrawer inside your renderScene function, you don't have access to the navigator. You would need to add a ref and use that to get the navigator:

Add ref={navigator => this.navigator = navigator} to your Navigator component, then you can do

<MyAppDrawer navigator={this.navigator} closeDrawer={() => {
    this.drawer.close();
}}/>
4
  • also, it might be a good idea to take your control panel outside of your render and turn it into a function that returns a component.
    – Matt Aft
    May 16, 2017 at 22:19
  • Very good point indeed. Added : ref={navigator => this.navigator = navigator} Modified: <MyAppDrawer navigator={this.navigator} closeDrawer={() => { this.drawer.close(); }}/> But i am still getting the same error. May 17, 2017 at 6:54
  • What React Native version are you using? If its RN 0.44, Navigator was deprecated.
    – Matt Aft
    May 17, 2017 at 16:11
  • I am using RN 0.43. Ater many tries I still get the error. I will try implementing routing via React Navigation. Thank you so much for your input. May 17, 2017 at 22:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.