React Native LIstItem component TouchableHighlight onPress not working

user_1022260 0
Viewed 2173

I have the following React Native ListItem and the onPress is not logging to the console:

    <ListItem
        rightIcon={{name: 'delete', style: {color: 'white'}}}
        component={TouchableHighlight}
        containerStyle={styles[item.foodType]}
        title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}>
        onPress={() => console.log("Feeding", item) }
    </ListItem>

Everything else works fine, list looks good, etc...

Why do I not see the message?

react-native
1 Answers

You put the closing tag of ListItem before onpress which is wrong, just change it to after onpress like this.

Before

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}>
    onPress={() => console.log("Feeding", item) }
</ListItem>

After

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}
    onPress={() => console.log("Feeding", item) }>
</ListItem>

Or like this

<ListItem
    rightIcon={{name: 'delete', style: {color: 'white'}}}
    component={TouchableHighlight}
    containerStyle={styles[item.foodType]}
    title={<Text style={styles[item.foodType]}>{item.amount}&nbsp;{item.foodType}&nbsp;<FormattedDateTime epoch={item.when}/></Text>}
    onPress={() => console.log("Feeding", item) }/>
user_73340290
Related