React Native - Horizontal Flatlist OnPress of component with TouchableNativeFeedback not executing

Question

I have a horizontal flatlist in which I want to execute a function when any of the elements in the list is pressed. However, the OnPress is not executing, the ripple effect does show.

I am currently troubleshooting by outputting through the console in the OnPress attribute.

I have tried wrapping the component with a as some people have suggested but it still does not work.

Here is my code

 //...IMPORTS export default class DatePicker extends Component { //... render() { return ( <FlatList initialScrollIndex={8} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} style={styles.datepickerContainer} horizontal= {true} contentContainerStyle={{justifyContent: 'center'}} horizontal={true} data={this.state.datesArray} keyExtractor={item => item.id.toString()} renderItem={({ item }) => ( <TouchableNativeFeedback style={styles.view} onPress={() => console.log("Test")}> <View> <NonSelectedDate currentTime={item.currentTime} dateOffset={item.offset}/> </View> </TouchableNativeFeedback> )} /> ); } }; const styles = StyleSheet.create( { datepickerContainer: { marginTop: 5, flexDirection: 'row', flex: 1, maxHeight: '7.5%', }, view: { flex: 1, width: width*0.1428, }, }) 

Answer 1

The problem may be that it might not be entering inside the flatlist render item method. Debug that by adding an alert inside the flatlist render item method.

Also see that whether that works with TouchableOpacity or not. Try giving the inside views style and see whether they render or not. If using android also try by using zIndex