Search code examples
androidreact-nativedrawerlayoutnavigator

Referencing Navigator from Drawer on Android in React-Native


I'm trying to push to Navigator from a drawer button in order to change views, but react is giving me the following error:

undefined is not an object (evaluating 'this.refs['NAV'].push')

Here's the code that has both Navigator and DrawerLayoutAndroid

    _renderScene(route, navigator) {
        if(route.id === 1){
            return <Checklist checklist={this.props.checklist}/>
        }else if(route.id === 2){
            return <Documents documents={this.props.documents}/>
        }else if(route.id === 3){
            return <Help refs={this.refs}  questions={this.props.questions} faqs={this.props.faqs}/>
        }else if(route.id === 4){
            return <Hospitals refs={this.refs}  hospitals={this.props.hospitals}/>
        }else if(route.id === 5){
            return <Profile refs={this.refs}  logout={this.props.logout} profile={this.props.profile} guarantor={this.props.guarantor}/>
        }
    },


    render() {

        console.log(this.refs)

        var navigationView = (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <TouchableOpacity onPress={this.refs['NAV'].push({id: 2})}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Checklist</Text>
                </TouchableOpacity>
                <TouchableOpacity >
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Documents</Text>
                </TouchableOpacity>
            </View>
        );

        return (
            <DrawerLayoutAndroid
            drawerWidth={300}
            ref={'DRAWER_REF'}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
                <Navigator
                initialRoute={{id: 1}}
                renderScene={this._renderScene}
                ref={'NAV'}
                />
            </DrawerLayoutAndroid>
        );

    }

Solution

  • The issue was I needed to call a function after the reference had ben created.

    <TouchableOpacity onPress={this._change.bind(this, 2)}>
    

    function:

    _change(route){
        this.refs.ref1.push({id: route})
    },