I am developing a React Native application for learning purposes. Now I am using TouchableWithoutFeedback component to response the user interaction. But I am getting an error. Please see my code below.
class Events extends React.Component {
static navigationOptions = {
title: "Events"
};
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
name: "Name 1",
image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
},
{
id: 2,
name: "Name 2",
image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
},
{
id: 3,
name: "Name 3",
image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
}
]
};
}
_handleLoadMore() {}
renderItem(item) {
return (
<TouchableWithoutFeedback onPress={() => {
}}>
<View>
<Card>
<CardItem cardBody>
<Image
source={{ uri: item.image_url }}
style={{ height: 200, width: null, flex: 1 }}
/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>12 Likes</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>4 Comments</Text>
</Button>
</Body>
<Right>
<Text>11h ago</Text>
</Right>
</CardItem>
</Card>
</View>
</TouchableWithoutFeedback>
);
}
render() {
return (
<View style={{ flex: 1, width: "100%" }}>
<FlatList
data={this.state.data}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => this.renderItem(item)}
onEndReached={this._handleLoadMore}
/>
</View>
);
}
}
export default Events;
When I click on the view, I got this error.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
What's wrong with my code and how can I fix it?