react-native-navigation drawer not changing screens

Question

I am trying to follow react-native-navigation example and build a small test app. I am unable to get the drawer to render the required screen and is always going to the home screen instead. At the home screen i have a button that pushes the next screen and that is working fine. Appreciate if someone can help.

index.ios.js

import App from './App/App'

const app = new App();

App.js

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

import { Navigation } from 'react-native-navigation';

// screen related book keeping
import { registerScreens } from './Screens/screens';
registerScreens();

const navigatorStyle= {
  navBarBackgroundColor: '#4dbce9',
  navBarTextColor: '#ffff00',
  navBarSubtitleTextColor: '#ff0000',
  navBarButtonColor: '#ffffff',
  statusBarTextColorScheme: 'light',
  statusBarTextColorScheme: 'light',
  tabBarBackgroundColor: '#4dbce9',
  tabBarButtonColor: '#ffffff',
  tabBarSelectedButtonColor: '#ffff00'
};

export default class App extends Component {



constructor(props){
   super(props)
   //load some data
   this.startApp();
}


startApp() {
   Navigation.startSingleScreenApp({
      screen: {
        screen: 'app.Home',
        title: 'Home',
        navigatorStyle
      },
      drawer: {
        left: {
          screen: 'app.Drawer'
        }
      }
    });

 }//end of startApp



}//end of App

screens.js

import { Navigation } from 'react-native-navigation';

import Drawer from './Drawer';
import Screen1 from './Screen1';
import Home from './Home'


export function registerScreens() {
  Navigation.registerComponent('app.Drawer', () => Drawer);
  Navigation.registerComponent('app.Home', () => Home);
  Navigation.registerComponent('app.Screen1', () => Screen1);
}

Drawer.js

 import React, { Component, PropTypes } from 'react';
 import {
    Text,
    View,
    TouchableOpacity,
    ToastAndroid,
  StyleSheet
 } from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';


class Drawer extends Component {

  //navigate to Screen1 from Drawer
  _goToScreen1() {
        this._toggleDrawer();
        this.props.navigator.popToRoot({
      title: "Screen 1",
      screen: "app.Screen1"
        });
    }//end _goToScreen1

  _toggleDrawer() {
        this.props.navigator.toggleDrawer({
            to: 'closed',
            side: 'left',
            animated: true
        });
    }//end _toggleDrawer


  render(){
    const iconSearch = (<Icon name="md-search" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 2 }]} />);
        const iconMovies = (<Icon name="md-film" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 3 }]} />);
        const iconTV = (<Icon name="ios-desktop" size={26} color="#000000" style={styles.drawerListIcon} />);

    return(
                <View style={styles.container}>
                    <View style={styles.drawerList}>

                        <TouchableOpacity onPress={this._goToScreen1.bind(this)}>
                            <View style={styles.drawerListItem}>
                                {iconMovies}
                                <Text style={styles.drawerListItemText}>
                                    Screen1
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <View style={styles.drawerListItem}>
                            {iconTV}
                            <Text style={styles.drawerListItemText} onPress={() => ToastAndroid.show('Coming Soon!', ToastAndroid.SHORT)}>
                                Coming Soon
                            </Text>
                        </View>
                    </View>
                    <Text style={styles._version}>
                        {/* 'v1.0.0' */}
                    </Text>
                </View>

    );//end of return
  }//end of render


}//end of Drawer


Drawer.propTypes = {
  navigator: PropTypes.object
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: 25,
        justifyContent: 'center'
    },
    drawerList: {

    },
    drawerListIcon: {
        width: 27
    },
    drawerListItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 23
    },
    drawerListItemText: {
        color: 'red',
        fontWeight: 'bold',
        fontSize: 23,
        paddingLeft: 15,
        flex: 1
    },
    linearGradient: {
        // top: 0,
        // left: 0,
        // right: 0,
        // height: 248,
        // position: 'absolute'
        flex: 1
    },
    _version: {
        color: '#3c3c3c',
        position: 'absolute',
        bottom: 25,
        marginLeft: 53
    }
});

export default Drawer

Home.js

 import React, { Component } from 'react';
 import {
    Text,
    View,
  TouchableOpacity,
  StyleSheet,
  Alert
 } from 'react-native';

class Home extends Component {

  static navigatorButtons = {
    leftButtons: [
      {
        //icon: require('../../img/navicon_menu.png'),
        title: 'Menu',
        id: 'menu'
      }
    ],
    rightButtons: [
      {
        title: 'Edit',
        id: 'edit'
      },
      {
        //icon: require('../../img/navicon_add.png'),
        title: 'add',
        id: 'add'
      }
    ]
  };

  constructor(props){
    super(props);
    // if you want to listen on navigator events, set this up
   this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

  onNavigatorEvent(event) {
    if (event.id === 'menu') {
      this.props.navigator.toggleDrawer({
        side: 'left',
        animated: true
      });
    }
    if (event.id === 'edit') {
      Alert.alert('NavBar', 'Edit button pressed');
    }
    if (event.id === 'add') {
      Alert.alert('NavBar', 'Add button pressed');
    }
  }


  onPressScreen1() {
    this.props.navigator.push({
      title: "Screen 1",
      screen: "app.Screen1"
    });
  }

  render(){
    return(
      <View style={{flex: 1, padding: 20}}>
        <Text>Home</Text>
        <TouchableOpacity onPress={this.onPressScreen1.bind(this)}>
          <Text style={styles.button}>Screen 1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    textAlign: 'center',
    fontSize: 18,
    marginBottom: 10,
    marginTop: 10,
    color: 'blue'
  }
});

export default Home

Screen1.js

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

class Screen1 extends Component {
  render(){
    return(
      <View>
        <Text>Screen 1 :)</Text>
      </View>
    );
  }
}

export default Screen1

Answer 1

there is an issue with this.props.navigator.popToRoot function. Instead use this.props.navigator.handleDeepLink({link: "link_name"}) and an onNavigatorEvent(event) handler in the home screen (Home.js) which checks for this DeepLink

// handle a deep link
    if (event.type == 'DeepLink') {
      const parts = event.link;
      if (parts == 'Screen1') {
        this.onPressScreen1();
      }
    }

https://github.com/wix/react-native-navigation/issues/624