How do i navigate to a new screen from FlatList?

Question

I would like to navigate to a screen called GridVid when clicking the items in my FlatList. I can't figure out how to do this as the

onPress={() => this.props.navigation.navigate('GridVid')}

only will work being called in App.js as thats where the StackNavigator is defined, not the ListItem class (which is in a separate file called ListItem.js)

//App.js

class SettingsClass extends Component {

    constructor(props) {
      super(props)

      this.state = {
        columns: 3, //Columns for Grid
      };   
    }


  render() {
     const {columns} = this.state
      return (

         <View style={styles.grid}>
            <FlatList
                  numColumns={columns}         
                  data={[
                    {uri:'https://randomuser.me/api/portraits/thumb/women/12.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/13.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/14.jpg'},
                  ]}
                  renderItem={({item}) => {            
                      return (<ListItem itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
                                        image={item}                                           
                              />                                
                            )
                       }}
                  keyExtractor={
                     (index) => { return index } 
                  } 
            />
         </View>
      );
  }
}

//Settings Class swipes to GridVid
const SettingsStack = createStackNavigator({
  SettingsScreen: {
    screen: SettingsClass
  },
  GridVid: {
    screen: GridVidClass
  },
});

//ListItem.js

export default class ListItem extends Component {

    state = {
       animatepress: new Animated.Value(1)
    }

    animateIn() {
        Animated.timing(this.state.animatepress, {
            toValue: 0.90,
            duration: 200
        }).start()
    }

    animateOut() {
      Animated.timing(this.state.animatepress, {
          toValue: 1,
          duration: 200
      }).start()
  }   

    render() {
      const {itemWidth} = this.props
      return (
          <TouchableWithoutFeedback
             onPressIn={() => this.animateIn()}
             onPressOut={() => this.animateOut()} 
             onPress={() => this.props.navigation.navigate('GridVid')} //WONT WORK HERE in this file!!!!
             >       
             <Animated.View style={{
                margin:5,
                transform: [{scale: this.state.animatepress}] }}>

                  <Image style={{width:itemWidth, height: 100}} source={this.props.image}></Image>   

             </Animated.View>
          </TouchableWithoutFeedback>

        );
    }

  }

//GridVid.js

export default class GridVidClass extends Component {

    render() {
      return (
        <View style={styles.container}> 
             <Text>On GridVid </Text>

        </View> 
        );
    }

  }

Is there any way to call onPress={() => this.props.navigation.navigate('GridVid') within the FlatList (or anywhere in App.js) as opposed to ListItem (where it wont work at the moment)? In ListItem however, at least i'm clicking the image that i want and have some reference to what i'm clicking.

Answer 1

What you need to do is pass a onPress prop to your ListItem that will make the navigation happen.

//App.js

class SettingsClass extends Component {

    constructor(props) {
      super(props)

      this.state = {
        columns: 3, //Columns for Grid
      };   
    }


  render() {
     const {columns} = this.state
      return (

         <View style={styles.grid}>
            <FlatList
                  numColumns={columns}         
                  data={[
                    {uri:'https://randomuser.me/api/portraits/thumb/women/12.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/13.jpg'},
                    {uri:'https://randomuser.me/api/portraits/thumb/women/14.jpg'},
                  ]}
                  renderItem={({item}) => {            
                      return (<ListItem itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
                                        image={item}        
                                        onPress={() => this.props.navigation.navigate('GridVid') // passing the onPress prop 
                              />                                
                            )
                       }}
                  keyExtractor={
                     (index) => { return index } 
                  } 
            />
         </View>
      );
  }
}

//Settings Class swipes to GridVid
const SettingsStack = createStackNavigator({
  SettingsScreen: {
    screen: SettingsClass
  },
  GridVid: {
    screen: GridVidClass
  },
});

//ListItem.js

export default class ListItem extends Component {

    state = {
       animatepress: new Animated.Value(1)
    }

    animateIn() {
        Animated.timing(this.state.animatepress, {
            toValue: 0.90,
            duration: 200
        }).start()
    }

    animateOut() {
      Animated.timing(this.state.animatepress, {
          toValue: 1,
          duration: 200
      }).start()
  }   

    render() {
      const {itemWidth} = this.props
      return (
          <TouchableWithoutFeedback
             onPressIn={() => this.animateIn()}
             onPressOut={() => this.animateOut()} 
             onPress={this.props.onPress} // using onPress prop to navigate
             >       
             <Animated.View style={{
                margin:5,
                transform: [{scale: this.state.animatepress}] }}>

                  <Image style={{width:itemWidth, height: 100}} source={this.props.image}></Image>   

             </Animated.View>
          </TouchableWithoutFeedback>

        );
    }

  }

Answer 2

ListItem is not in StackNavigator so it doesn't know what navigation is

You can go with like Vencovsky's answer or pass navigation prop from ListItem's parent component

<ListItem 
   itemWidth={(ITEM_WIDTH-(10*columns))/columns} 
   image={item} 
   navigation={this.props.navigation}                                   
/>