title: React native error : undefined is not an object (evaluating 'this.props.navigator.push')
body: <p>i am new in react native,i try to developing native application in react native but i have onPress click event issue.
  InfoSwipper.js file i was click on Sign In button display "undefined is not an object(evaluating 'this.props.navigator.push') ". I am not sure what I am missing. please some one help me.
  Thank you in advance.</p>
  
  <p><strong>index.android.js file code</strong></p>
  
  <pre><code>"use strict";
  import React, { Component } from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator,
      StatusBar,
      AsyncStorage,
  } from 'react-native';
  var SignUp = require("./components/SignUp");
  var InfoScreens = require("./components/InfoScreens");
  import SplashScreen from 'react-native-splash-screen'
  var Kahaani = React.createClass({
      _renderScene(route, navigator) {
          if (route.id === 0) {
            return &lt;InfoScreens navigator={navigator} /&gt;
          }
          else if (route.id === 1) {
              StatusBar.setHidden(false);
              console.log('WRONG SIGNIN', "here");
            return &lt;LogIn navigator={navigator} /&gt; 
          }
      },
        componentDidMount() {
           // do anything while splash screen keeps, use await to wait for an async task.
          SplashScreen.hide();
      },
      render: function() {
          return (
            &lt;Navigator
                   style={styles.navigationContainer}
                   initialRoute={{id: 0, }}
                   renderScene={this._renderScene} /&gt;
          );
      }
  });
  var styles = StyleSheet.create({
      navigationContainer: {
          flex: 1,
      },
  });
  AppRegistry.registerComponent('Kahaani', () =&gt; Kahaani);
  </code></pre>
  
  <p><strong>swipperScreen.js</strong> </p>
  
  <pre><code>'use strict';
  import React, { Component } from 'react';
  import {
    Dimensions,       // Detects screen dimensions
    Platform,         // Detects platform running the app
    ScrollView,       // Handles navigation between screens
    StyleSheet,       // CSS-like styles
    View,  
    Text,Navigator, TouchableHighlight, // Container component
  } from 'react-native';
  import LogIn from './LogIn';
  var navigator;
  class InfoScreenSwiper extends Component {
      constructor(props)
        {
            super(props);
        } 
    static defaultProps = {
      horizontal: true,
      pagingEnabled: true,  
      showsHorizontalScrollIndicator: false,
      showsVerticalScrollIndicator: false,   
      bounces: false,   
      scrollsToTop: false,    
      removeClippedSubviews: true,  
      automaticallyAdjustContentInsets: false,
      index: 0
    };
    state = this.initState(this.props);
    initState(props) {
      const total = props.children ? props.children.length || 1 : 0,
      index = total &gt; 1 ? Math.min(props.index, total - 1) : 0,
      offset = width * index;
      const state = {
        total,
        index,
        offset,
        width,
        height,
      };
      this.internals = {
        isScrolling: false,
        offset
      };
      return state;
    }
    onScrollBegin = e =&gt; {
      // Update internal isScrolling state
      this.internals.isScrolling = true;
    }
    onScrollEnd = e =&gt; {
      // Update internal isScrolling state
      this.internals.isScrolling = false;
      // Update index
      this.updateIndex(e.nativeEvent.contentOffset
        ? e.nativeEvent.contentOffset.x
        // When scrolled with .scrollTo() on Android there is no contentOffset
        : e.nativeEvent.position * this.state.width
      );
    }
    onScrollEndDrag = e =&gt; {
      const { contentOffset: { x: newOffset } } = e.nativeEvent,
        { children } = this.props,
        { index } = this.state,
        { offset } = this.internals;
  
      if (offset === newOffset &amp;&amp;
        (index === 0 || index === children.length - 1)) {
        this.internals.isScrolling = false;
      }
    }
    updateIndex = (offset) =&gt; {
      const state = this.state,
        diff = offset - this.internals.offset,
        step = state.width;
      let index = state.index;
      if (!diff) {
        return;
      }
      index = parseInt(index + Math.round(diff / step), 10);
      this.internals.offset = offset;
      this.setState({
        index
      });
    }
    swipe = () =&gt; {
      if (this.internals.isScrolling || this.state.total &lt; 2) {
        return;
      }
      const state = this.state,
        diff = this.state.index + 1,
        x = diff * state.width,
        y = 0;
      this.scrollView &amp;&amp; this.scrollView.scrollTo({ x, y, animated: true });
      this.internals.isScrolling = true;
      if (Platform.OS === 'android') {
        setImmediate(() =&gt; {
          this.onScrollEnd({
            nativeEvent: {
              position: diff
            }
          });
        });
      }
    }
    renderScrollView = pages =&gt; {
      return (
        &lt;ScrollView ref={component =&gt; { this.scrollView = component; }}
          {...this.props}
          contentContainerStyle={[styles.wrapper, this.props.style]}
          onScrollBeginDrag={this.onScrollBegin}
          onMomentumScrollEnd={this.onScrollEnd}
          onScrollEndDrag={this.onScrollEndDrag}
        &gt;
          {pages.map((page, i) =&gt;
            // Render each slide inside a View
            &lt;View style={[styles.fullScreen, styles.slide]} key={i}&gt;
              {page}
            &lt;/View&gt;
          )}
        &lt;/ScrollView&gt;
      );
    }
    renderPagination = () =&gt; {
      if (this.state.total &lt;= 1) {
        return null;
      }
      const ActiveDot = &lt;View style={[styles.dot, styles.activeDot]} /&gt;,
        Dot = &lt;View style={styles.dot} /&gt;;
      let dots = [];
      for (let key = 0; key &lt; this.state.total; key++) {
        dots.push(key === this.state.index
          // Active dot
          ? React.cloneElement(ActiveDot, { key })
          // Other dots
          : React.cloneElement(Dot, { key })
        );
      }
      return (
        &lt;View
          pointerEvents="none"
          style={[styles.pagination, styles.fullScreen]}&gt;
          {dots}
        &lt;/View&gt;
      );
    }
      onMainPressLogIn= () =&gt;
        {
            console.log('WRONG SIGNIN', "onMainPressLogIn");
          this.props.navigator.push({
              id:1
          });
        }
      onSubmitPressed () {
          console.log('WRONG SIGNIN', "onSubmitPressed");
          this.props.navigator.push({
              id:2
          })  
        }
   renderButtonBottom = () =&gt; {
      const lastScreen = this.state.index === this.state.total - 1;
      return (
        &lt;View pointerEvents="box-none" style={[styles.buttonWrapper]}&gt;
          &lt;View style={ [styles.viewButton]}&gt;
              &lt;Text style={[styles.buttonLogIn,styles.buttonAll]}  onPress={this.onMainPressLogIn} &gt;LOG IN&lt;/Text&gt;
              &lt;Text style={[styles.buttonSignUp,styles.buttonAll]} onPress={(this.onSubmitPressed.bind(this))}&gt;SIGN UP&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
    render = ({ children } = this.props) =&gt; {
      return (
        &lt;View style={[styles.container, styles.fullScreen]}&gt;  
          {/* Render screens */}
          {this.renderScrollView(children)}
          {/* Render pagination */}
          {this.renderPagination()}
          {/* Render Continue or Done button */}
          {this.renderButtonBottom()}
        &lt;/View&gt;
      );
    }
  }
  module.exports = InfoScreenSwiper;
  </code></pre>