CODEWITHSUNDEEP
react-native
Yathindra Kodithuwakku
Yathindra Kodithuwakku

Reputation: 135

React native TouchableHighlight ignore the first item

I have used TouchableHighlight for the FlatList in React native. Here used to display cities which will be returned by an API. But when each item in the flat list is touched only the 1st item is been ignored. But other items except the 1st one get highlighted when I press. Also, I am running the app on my device, not in an emulator. The screenshot of the flatlist

Code 

export default class SearchResultsList extends Component {

render() {

    return (
        (this.props.list &&
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }} keyboardShouldPersistTaps={'always'}>
                <FlatList
                    data={this.props.list}
                    renderItem={({ item }) => (
                        <TouchableHighlight
                            onPress={() => {
                                console.log(item.primaryText);
                            }}
                            underlayColor="#cca016"
                        >
                            <ListItem
                                title={item.primaryText}
                                subtitle={item.secondaryText}
                                containerStyle={{ borderBottomWidth: 0 }}
                            />
                        </TouchableHighlight>
                    )}
                />
            </List>)
    );
}}

When I check without keyboardShouldPersistTaps={'always'} also the same issue is there.

Upvotes: 0

Views: 193

Answers (1)

Andrea junior
Andrea junior

Reputation: 121

it seems that you're using react-native-elements List component.

If it's the case, you should not place a FlatList inside the react-native-elements List.

Hope it helps

Upvotes: 3

Related Questions