Description

For some reason, Touchable* elements within a FlatList or SectionList view, do not register touches. Rather, it seems that upon rendering a FlatList, a touch event immediately occurs.

Reproduction Steps and Sample Code

The following, upon render, will produce an alert, "Touched". This should not happen, only on element touch. Furthermore, you cannot touch the TouchableHighlight element and have an alert popup (no highlight colours, nothing).

import {
	Alert,
	FlatList,
	TouchableHighlight,
} from 'react-native';

...

<FlatList
	data={[{'name': 'Frodo Baggins', 'address': 'Bag End, Bagshot Row, Hobbiton'}]}
	renderItem={({person}) =>
		<TouchableHighlight
			onPress={() => Alert.alert('Touched') }
			underlayColor='black'
		>
			<View>
				<Text style={{ fontSize: 24 }}>{ person.name }</Text>
				<Text>{ person.address }</Text>
			</View>
		</TouchableHighlight>
	}
	style={{ flex: 1, flexDirection: 'column', padding: 10 }}
/>

Solution

Make elements touchable within FlatList (and SectionList, which exhibits the same behaviour).

Additional Information

• React Native version: react-native: 0.44.0
• Platform: both
• Development Operating System: Linux & Mac OSX Sierra
• Dev tools: Xcode 8, react-native run-android