title: undefined is not an object (evaluating 'this.props.navigation.navigate) React Native modules
body: <p>I have installed react-native-elastic-image-slider module and it works fine. I have made some custom changes in the module file. it works but when i am using this.props.navigation.navigate('View') than it will show error. it works fine on Android devices. error will show only on IOS devices. 
  module path is myapp/node-module/react-native-elastic-image-slider-new
  my module file:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      Image,
      Text,
      View,
      StyleSheet,
      Animated,
      PanResponder,
      TouchableHighlight,
      TouchableOpacity,
      Dimensions,
      LayoutAnimation,
      UIManager,AsyncStorage,
      Platform,ViewPropTypes
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import styles from './style';
  import PropTypes from 'prop-types';
  
  
  class ImageSliderNew extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              position: this.props.initialPosition,
              height: new Animated.Value(this._scaleHeight(this.props.images[this.props.initialPosition])),
              left: new Animated.Value(0),
              scrolling: false,
              timeout: null,
              hideArrow:true,
          };
  
          // Enable LayoutAnimation under Android
          if (Platform.OS === 'android') {
              UIManager.setLayoutAnimationEnabledExperimental(true)
          }
      }
  
      static defaultProps = {
          position: 0,
          initialPosition: 0
      };
  
      _move(index) {
          const width = Dimensions.get('window').width;
          const to = index * -width;
          const scaleH = this._scaleHeight(this.props.images[index]);
  
          Animated.timing(this.state.left, {toValue: to, friction: 10, tension: 10, velocity: 1, duration: 10}).start();
          Animated.timing(this.state.height, {
              toValue: scaleH,
              friction: 10,
              tension: 10,
              velocity: 1,
              duration: 10
          }).start();
  
          if (this.state.timeout) {
              clearTimeout(this.state.timeout);
          }        
          this.setState({
              position: index,
              timeout: setTimeout(() =&gt; {
                  this.setState({scrolling: true, timeout: null});
                  if (this.props.onPositionChanged) {
                      this.props.onPositionChanged(index);
                  }
              }, 10)
          });
      }
  
      _scaleHeight(image) {
          const imageWidth = Dimensions.get('window').width;
          const imageHeight = Dimensions.get('window').width-35;
          return Dimensions.get('window').width * imageHeight / imageWidth;
      }
  
      _getPosition() {
          if (typeof this.props.position === 'number') {
              //return this.props.position;
          }
          return this.state.position;
      }
  
      componentWillReceiveProps(props) {
          if (props.position !== undefined) {
              this.setState({scrolling: true});
              this._move(props.position);
          }
      }
  
      componentWillMount() {
          const width = Dimensions.get('window').width;
  //~ alert('yes'+Math.round(this.props.images.length/2))
          this.state.left.setValue(-(width * this.state.position));        
      if(Math.round(this.props.images.length/2) &gt;1)
      {
          this.setState({hideArrow:true})
          }
      else{
          this.setState({hideArrow:false})
          }   
  
          if (typeof this.props.position === 'number') {
              //this.state.left.setValue(-(width * this.props.position));
          }
  
          let release = (e, gestureState) =&gt; {
              const width = Dimensions.get('window').width;
              const relativeDistance = gestureState.dx / width;
              const vx = gestureState.vx;
              let change = 0;
  
              if (relativeDistance &lt; -0.5 || (relativeDistance &lt; 0 &amp;&amp; vx &lt;= 0.5)) {
                  change = 1;
              } else if (relativeDistance &gt; 0.5 || (relativeDistance &gt; 0 &amp;&amp; vx &gt;= 0.5)) {
                  change = -1;
              }
              const position = this._getPosition();
              if (position === 0 &amp;&amp; change === -1) {
                  change = 0;
              } else if (position + change &gt;= Math.round(this.props.images.length/2)) {
                  change = (Math.round(this.props.images.length/2)) - (position + change);
              }
              this._move(position + change);
              return true;
          };
  
          this._panResponder = PanResponder.create({
              onMoveShouldSetPanResponderCapture: (evt, gestureState) =&gt; Math.abs(gestureState.dx) &gt; 5,
              onPanResponderRelease: release,
              onPanResponderTerminate: release,
              onPanResponderMove: (e, gestureState) =&gt; {
                  const dx = gestureState.dx;
                  const width = Dimensions.get('window').width;
                  const position = this._getPosition();
                  let left = -(position * width) + Math.round(dx);
                  if (left &gt; 0) {
                      left = Math.sin(left / width) * (width / 2);
                  } else if (left &lt; -(width * (Math.round(this.props.images.length/2) - 1))) {
                      const diff = left + (width * (Math.round(this.props.images.length/2) - 1));
                      left = Math.sin(diff / width)  (width / 2) - (width  (Math.round(this.props.images.length/2) - 1));
                  }
                  this.state.left.setValue(left);
                  if (!this.state.scrolling) {
                      this.setState({scrolling: true});
                  }
  
                  //scale
                  let change = 0;
  
                  if (dx &gt;= 0) {
                      change = -1;
                  } else if (dx &lt; 0) {
                      change = 1;
                  }
                  if (position === 0 &amp;&amp; change === -1) {
                      change = 0;
                  } else if (position + change &gt;= Math.round(this.props.images.length/2)) {
                      change = (Math.round(this.props.images.length/2)) - (position + change);
                  }
                  const originH = this._scaleHeight(this.props.images[position]);
                  const scaleH = this._scaleHeight(this.props.images[position + change]);
                  Animated.timing(this.state.height, {
                      toValue: (scaleH - originH)*Math.abs(dx/width) + originH,
                      friction: 10,
                      tension: 10,
                      velocity: 1,
                      duration: 0
                  }).start();
              },
              onShouldBlockNativeResponder: () =&gt; true
          });
      }
  
      componentDidMount() {       
  
      }
  
      componentWillUnmount() {
          if (this.state.timeout) {
              clearTimeout(this.state.timeout);
          }
      }
  
      componentWillUpdate() {
          const CustomLayoutAnimation = {
              duration: 100,
              //create: {
              //    type: LayoutAnimation.Types.linear,
              //    property: LayoutAnimation.Properties.opacity,
              //},
              update: {
                  type: LayoutAnimation.Types.linear
              }
          };
          LayoutAnimation.configureNext(CustomLayoutAnimation);
          //LayoutAnimation.linear();
      }
    _next() {
      const Ilength  = Math.round(this.props.images.length/2);    
      const pos = this.state.position === Ilength-1 ? 0 : this.state.position + 1;    
      this._move(pos);
      this.setState({position: pos});
    }
  
    _prev() {
      const Ilength  = Math.round(this.props.images.length/2);    
      const pos = this.state.position === 0 ? Ilength-1 : this.state.position - 1;
      this._move(pos);
      this.setState({position: pos});
    }
    _test(dataval) {        
      const {navigate} = this.props.navigation;         
        this.props.navigation.navigate('View',{ProId:dataval,isLoading:true});
        }
      render() {
          const customStyles = this.props.style ? this.props.style : {};
          const width = Dimensions.get('window').width;
          const position = this._getPosition();
          return (&lt;View&gt;
              &lt;Animated.View
                  style={[styles.container, customStyles, {height: Dimensions.get('window').width/1.4, width: width * Math.round(this.props.images.length/2), backgroundColor:'#fff',transform: [{translateX: this.state.left}]}]}
                  {...this._panResponder.panHandlers}&gt;
                  {this.props.images.map((image, indexI) =&gt; {
  
                      const imageWidth = Dimensions.get('window').width;
                      const imageHeight = Dimensions.get('window').width-35;
                      const scaleH = Dimensions.get('window').width * imageHeight / imageWidth;
                      let captionComponent= &lt;View&gt;
                          {image.title === undefined ? null : &lt;Text style={{width:Dimensions.get('window').width/2.3,fontWeight: '300', fontSize: 13, color: '#333',textAlign:'center'}}&gt;{image.title}&lt;/Text&gt;}
                          {image.caption === undefined ? null : &lt;Text style={{width:Dimensions.get('window').width/2.3,fontWeight: '300', fontSize: 13, color: '#ff0000',textAlign:'center'}}&gt;{image.caption}&lt;/Text&gt;}
                          &lt;/View&gt;;                                            
                      let imageComponent = &lt;TouchableOpacity onPress={() =&gt; this._test(image.id)}  key={indexI}&gt;
                          &lt;View&gt;
                          &lt;Animated.Image                        
                          source={{uri: image.url}}
                          style={{height: Dimensions.get('window').width/2.3, width:Dimensions.get('window').width/2.3,backgroundColor:'#fff',marginLeft:10,marginRight:10}}
                          resizeMode={Image.resizeMode.stretch}
                          /&gt;
                          {captionComponent}
                          &lt;/View&gt;&lt;/TouchableOpacity&gt;;
                      if(typeof image.url === 'number') {
                          imageComponent = &lt;View&gt;&lt;Animated.Image                           
                           source={image.url}
                          style={{height: Dimensions.get('window').width/2.3, width:Dimensions.get('window').width/2.3,backgroundColor:'#fff',marginLeft:10,marginRight:10}}
                              resizeMode={Image.resizeMode.stretch}
                              /&gt;
                          {captionComponent}
                          &lt;/View&gt;;                            
                      }
                      if (this.props.onPress) {
                          return (
                              &lt;TouchableOpacity                            
                                  onPress={() =&gt; {
                                      this.props.onPress({ image, index })
                                  }}
                                  delayPressIn={100}
                                  &gt;
                                  {imageComponent}
                                  {captionComponent}
                              &lt;/TouchableOpacity&gt;
                          );
                      } else {
                          return imageComponent;
                      }
                  })}
              &lt;/Animated.View&gt;  
  
                  &lt;View style={{width:'7%',left:10,position: 'absolute',top:Dimensions.get('window').width/4.5}}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this._prev()}&gt;
                          &lt;Image source={{uri: 'https://www.furnitureinfashion.net/images-dir-mob/arrow-new-arrival-left.png'}} style={{width:20,height:20}} /&gt;
                      &lt;/TouchableOpacity&gt; 
                  &lt;/View&gt;         
  
  
                  &lt;View style={{width:'7%',right:10,position: 'absolute',top:Dimensions.get('window').width/4.5}}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this._next()}&gt;
                          &lt;Image source={{uri: 'https://www.furnitureinfashion.net/images-dir-mob/arrow-new-arrival-right.png'}} style={{width:20,height:2    import React, {Component} from 'react';
  import {
      Image,
      Text,
      View,
      StyleSheet,
      Animated,
      PanResponder,
      TouchableHighlight,
      TouchableOpacity,
      Dimensions,
      LayoutAnimation,
      UIManager,AsyncStorage,
      Platform,ViewPropTypes
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import styles from './style';
  import PropTypes from 'prop-types';
  
  
  class ImageSliderNew extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              position: this.props.initialPosition,
              height: new Animated.Value(this._scaleHeight(this.props.images[this.props.initialPosition])),
              left: new Animated.Value(0),
              scrolling: false,
              timeout: null,
              hideArrow:true,
          };
  
          // Enable LayoutAnimation under Android
          if (Platform.OS === 'android') {
              UIManager.setLayoutAnimationEnabledExperimental(true)
          }
      }
  
      static defaultProps = {
          position: 0,
          initialPosition: 0
      };
  
  
      _move(index) {
          const width = Dimensions.get('window').width;
          const to = index * -width;
          const scaleH = this._scaleHeight(this.props.images[index]);
  
          Animated.timing(this.state.left, {toValue: to, friction: 10, tension: 10, velocity: 1, duration: 10}).start();
          Animated.timing(this.state.height, {
              toValue: scaleH,
              friction: 10,
              tension: 10,
              velocity: 1,
              duration: 10
          }).start();
  
          if (this.state.timeout) {
              clearTimeout(this.state.timeout);
          }        
          this.setState({
              position: index,
              timeout: setTimeout(() =&gt; {
                  this.setState({scrolling: true, timeout: null});
                  if (this.props.onPositionChanged) {
                      this.props.onPositionChanged(index);
                  }
              }, 10)
          });
      }
  
      _scaleHeight(image) {
          const imageWidth = Dimensions.get('window').width;
          const imageHeight = Dimensions.get('window').width-35;
          return Dimensions.get('window').width * imageHeight / imageWidth;
      }
  
      _getPosition() {
          if (typeof this.props.position === 'number') {
              //return this.props.position;
          }
          return this.state.position;
      }
  
      componentWillReceiveProps(props) {
          if (props.position !== undefined) {
              this.setState({scrolling: true});
              this._move(props.position);
          }
      }
  
      componentWillMount() {
          const width = Dimensions.get('window').width;
  //~ alert('yes'+Math.round(this.props.images.length/2))
          this.state.left.setValue(-(width * this.state.position));        
      if(Math.round(this.props.images.length/2) &gt;1)
      {
          this.setState({hideArrow:true})
          }
      else{
          this.setState({hideArrow:false})
          }   
  
          if (typeof this.props.position === 'number') {
              //this.state.left.setValue(-(width * this.props.position));
          }
  
          let release = (e, gestureState) =&gt; {
              const width = Dimensions.get('window').width;
              const relativeDistance = gestureState.dx / width;
              const vx = gestureState.vx;
              let change = 0;
  
              if (relativeDistance &lt; -0.5 || (relativeDistance &lt; 0 &amp;&amp; vx &lt;= 0.5)) {
                  change = 1;
              } else if (relativeDistance &gt; 0.5 || (relativeDistance &gt; 0 &amp;&amp; vx &gt;= 0.5)) {
                  change = -1;
              }
              const position = this._getPosition();
              if (position === 0 &amp;&amp; change === -1) {
                  change = 0;
              } else if (position + change &gt;= Math.round(this.props.images.length/2)) {
                  change = (Math.round(this.props.images.length/2)) - (position + change);
              }
              this._move(position + change);
              return true;
          };
  
          this._panResponder = PanResponder.create({
              onMoveShouldSetPanResponderCapture: (evt, gestureState) =&gt; Math.abs(gestureState.dx) &gt; 5,
              onPanResponderRelease: release,
              onPanResponderTerminate: release,
              onPanResponderMove: (e, gestureState) =&gt; {
                  const dx = gestureState.dx;
                  const width = Dimensions.get('window').width;
                  const position = this._getPosition();
                  let left = -(position * width) + Math.round(dx);
                  if (left &gt; 0) {
                      left = Math.sin(left / width) * (width / 2);
                  } else if (left &lt; -(width * (Math.round(this.props.images.length/2) - 1))) {
                      const diff = left + (width * (Math.round(this.props.images.length/2) - 1));
                      left = Math.sin(diff / width)  (width / 2) - (width  (Math.round(this.props.images.length/2) - 1));
                  }
                  this.state.left.setValue(left);
                  if (!this.state.scrolling) {
                      this.setState({scrolling: true});
                  }
  
                  //scale
                  let change = 0;
  
                  if (dx &gt;= 0) {
                      change = -1;
                  } else if (dx &lt; 0) {
                      change = 1;
                  }
                  if (position === 0 &amp;&amp; change === -1) {
                      change = 0;
                  } else if (position + change &gt;= Math.round(this.props.images.length/2)) {
                      change = (Math.round(this.props.images.length/2)) - (position + change);
                  }
                  const originH = this._scaleHeight(this.props.images[position]);
                  const scaleH = this._scaleHeight(this.props.images[position + change]);
                  Animated.timing(this.state.height, {
                      toValue: (scaleH - originH)*Math.abs(dx/width) + originH,
                      friction: 10,
                      tension: 10,
                      velocity: 1,
                      duration: 0
                  }).start();
              },
              onShouldBlockNativeResponder: () =&gt; true
          });
      }
  
      componentDidMount() {       
  
      }
  
      componentWillUnmount() {
          if (this.state.timeout) {
              clearTimeout(this.state.timeout);
          }
      }
  
      componentWillUpdate() {
          const CustomLayoutAnimation = {
              duration: 100,
              //create: {
              //    type: LayoutAnimation.Types.linear,
              //    property: LayoutAnimation.Properties.opacity,
              //},
              update: {
                  type: LayoutAnimation.Types.linear
              }
          };
          LayoutAnimation.configureNext(CustomLayoutAnimation);
          //LayoutAnimation.linear();
      }
    _next() {
      const Ilength  = Math.round(this.props.images.length/2);    
      const pos = this.state.position === Ilength-1 ? 0 : this.state.position + 1;    
      this._move(pos);
      this.setState({position: pos});
    }
  
    _prev() {
      const Ilength  = Math.round(this.props.images.length/2);    
      const pos = this.state.position === 0 ? Ilength-1 : this.state.position - 1;
      this._move(pos);
      this.setState({position: pos});
    }
    _test(dataval) {        
      const {navigate} = this.props.navigation;         
        this.props.navigation.navigate('View',{ProId:dataval,isLoading:true});
        }
      render() {
          const customStyles = this.props.style ? this.props.style : {};
          const width = Dimensions.get('window').width;
          const position = this._getPosition();
          return (&lt;View&gt;
              &lt;Animated.View
                  style={[styles.container, customStyles, {height: Dimensions.get('window').width/1.4, width: width * Math.round(this.props.images.length/2), backgroundColor:'#fff',transform: [{translateX: this.state.left}]}]}
                  {...this._panResponder.panHandlers}&gt;
                  {this.props.images.map((image, indexI) =&gt; {
  
                      const imageWidth = Dimensions.get('window').width;
                      const imageHeight = Dimensions.get('window').width-35;
                      const scaleH = Dimensions.get('window').width * imageHeight / imageWidth;
                      let captionComponent= &lt;View&gt;
                          {image.title === undefined ? null : &lt;Text style={{width:Dimensions.get('window').width/2.3,fontWeight: '300', fontSize: 13, color: '#333',textAlign:'center'}}&gt;{image.title}&lt;/Text&gt;}
                          {image.caption === undefined ? null : &lt;Text style={{width:Dimensions.get('window').width/2.3,fontWeight: '300', fontSize: 13, color: '#ff0000',textAlign:'center'}}&gt;{image.caption}&lt;/Text&gt;}
                          &lt;/View&gt;;                                            
                      let imageComponent = &lt;TouchableOpacity onPress={() =&gt; this._test(image.id)}  key={indexI}&gt;
                          &lt;View&gt;
                          &lt;Animated.Image                        
                          source={{uri: image.url}}
                          style={{height: Dimensions.get('window').width/2.3, width:Dimensions.get('window').width/2.3,backgroundColor:'#fff',marginLeft:10,marginRight:10}}
                          resizeMode={Image.resizeMode.stretch}
                          /&gt;
                          {captionComponent}
                          &lt;/View&gt;&lt;/TouchableOpacity&gt;;
                      if(typeof image.url === 'number') {
                          imageComponent = &lt;View&gt;&lt;Animated.Image                           
                           source={image.url}
                          style={{height: Dimensions.get('window').width/2.3, width:Dimensions.get('window').width/2.3,backgroundColor:'#fff',marginLeft:10,marginRight:10}}
                              resizeMode={Image.resizeMode.stretch}
                              /&gt;
                          {captionComponent}
                          &lt;/View&gt;;                            
                      }
                      if (this.props.onPress) {
                          return (
                              &lt;TouchableOpacity                            
                                  onPress={() =&gt; {
                                      this.props.onPress({ image, index })
                                  }}
                                  delayPressIn={100}
                                  &gt;
                                  {imageComponent}
                                  {captionComponent}
                              &lt;/TouchableOpacity&gt;
                          );
                      } else {
                          return imageComponent;
                      }
                  })}
              &lt;/Animated.View&gt;  
  
                  &lt;View style={{width:'7%',left:10,position: 'absolute',top:Dimensions.get('window').width/4.5}}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this._prev()}&gt;
                          &lt;Image source={{uri: 'https://www.furnitureinfashion.net/images-dir-mob/arrow-new-arrival-left.png'}} style={{width:20,height:20}} /&gt;
                      &lt;/TouchableOpacity&gt; 
                  &lt;/View&gt;         
  
  
                  &lt;View style={{width:'7%',right:10,position: 'absolute',top:Dimensions.get('window').width/4.5}}&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this._next()}&gt;
                          &lt;Image source={{uri: 'https://www.furnitureinfashion.net/images-dir-mob/arrow-new-arrival-right.png'}} style={{width:20,height:20}} /&gt;
                      &lt;/TouchableOpacity&gt;               
                  &lt;/View&gt;
  
          &lt;/View&gt;);
      }
  }
  
  ImageSliderNew.propTypes = {
      images: PropTypes.array,
      caption: PropTypes.string,
      title: PropTypes.string,    
      id:PropTypes.number,
      position: PropTypes.number,
      initialPosition: PropTypes.number,
      onPositionChanged: PropTypes.func,
      style: ViewPropTypes.style
  };
  export default ImageSliderNew;0}} /&gt;
                      &lt;/TouchableOpacity&gt;               
                  &lt;/View&gt;
  
          &lt;/View&gt;);
      }
  }
  
  ImageSliderNew.propTypes = {
      images: PropTypes.array,
      caption: PropTypes.string,
      title: PropTypes.string,    
      id:PropTypes.number,
      position: PropTypes.number,
      initialPosition: PropTypes.number,
      onPositionChanged: PropTypes.func,
      style: ViewPropTypes.style
  };
  export default ImageSliderNew;
  </code></pre>
  
  <p>what can I do to navigate it on View Screen?</p>