Menu
I am developing a React Native application for Learning purposes. Now I am using FlatList in my application. But I am having a problem. My flat list is not scrolling to see all the items. It bounces back when I tried to scroll it out of screen size. I used the solutions I found online adding the flex to 1 on the root, but it is not working.
Here is my code:
class Events extends React.Component {
static navigationOptions = {
title: "Events"
};
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
name: "Name 1"
},
{
id: 2,
name: "Name 2"
},
{
id: 3,
name: "Name 3"
},
{
id: 4,
name: "Name 4"
},
{
id: 5,
name: "Name 5"
},
{
id: 6,
name: "Name 6"
},
{
id: 7,
name: "Name 7"
},
{
id: 8,
name: "Name 8"
},
{
id: 9,
name: "Name 9"
},
{
id: 10,
name: "Name 10"
},
{
id: 11,
name: "Name 11"
},
{
id: 12,
name: "Name 12"
},
{
id: 13,
name: "Name 13"
},
{
id: 14,
name: "Name 14"
},
{
id: 15,
name: "Name 15"
},
{
id: 16,
name: "Name 16"
},
{
id: 17,
name: "Name 17"
},
{
id: 18,
name: "Name 18"
},
{
id: 19,
name: "Name 19"
},
{
id: 20,
name: "Name 20"
},
{
id: 21,
name: "Name 21"
},
{
id: 22,
name: "Name 22"
},
{
id: 23,
name: "Name 23"
},
{
id: 24,
name: "Name 24"
}
]
};
}
_handleLoadMore() {}
renderItem(item) {
return (
<Card>
<CardItem>
<Left>
<Thumbnail source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }} />
<Body>
<Text>NativeBase</Text>
<Text note>GeekyAnts</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }}
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>
);
}
render() {
return (
<FlatList
contentContainerStyle={{
flex: 1,
flexDirection: "column",
height: "100%",
width: "100%"
}}
data={this.state.data}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => this.renderItem(item)}
onEndReached={this._handleLoadMore}
/>
);
}
}
export default Events;
But it is not scrolling to see the items off the screen. How can I fix it?
Here is the screenshot. I cannot scroll down more than that.
626
Change some styling in FlatList view and add View as main container
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>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
