I'm defining a function inside an object, and then passing it to a ListView.
However I'm having trouble getting the function to fire onPress. At the moment it's not doing anything when pressed.
export default class Settings extends Component {
componentWillMount() {
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
const listItems = [
{ title: 'Profile', icon: 'ios-contact', action: () => console.log('Profile') },
{ title: 'Log out', icon: 'ios-log-out', action: () => console.log('Log out') }
]
this.setState({ dataSource: ds.cloneWithRows(listItems) })
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(item) =>
<TouchableOpacity onPress={() => item.action}>
<View>
<Ionicons name={item.icon} size={20} />
<Text>{item.title}</Text>
</View>
</TouchableOpacity>
}
/>
)
}
};
I'm fairly new to React/JS, so I suspect it might be a syntax issue. Thanks!
You should remove fat arrow from TouchableOpacity onPress , like this
<TouchableOpacity onPress={item.action}>
This will work.
Edit: I created a project at snack. You can see that this approach fix your problem.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments