react-native

React native Flatlist TouchableOpacity OnPress Not Working On Android


Can some help me with this issue. On press not working in Flatlist render function. here my code. i checked other screens touch case working fine but when i try it in Flatlist it's not working



render(){
            return (
                <View style={styles.container} >
                          <FlatList
                                data={this.state.categories}
                                numColumns={2}
                                keyExtractor={item => item.id}
                                renderItem={item => this.renderItem(item)}
                            />
  </View>

 );
}

renderItem = ({item,index}) => {
        return (
          
            <TouchableOpacity onPress={() => this.moveToLocation(item.id)} style={styles.items}>
                <Image source={{uri:item.img}}
                    resizeMode="center"
                    style={styles.itemsimg} />
                <Text style={{textAlign:'center',fontSize:20, }} onPress={() => this.moveToLocation(item.id)}>{item.name}</Text>
            </TouchableOpacity>
            
        );
    }

Solution

  • You need to wrap your row element (inside your renderItem method) inside tag. TouchableWithoutFeedback takes onPress as it's prop where you can provide onPress event.

    For TouchableWithoutFeedback refer https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html