CODEWITHSUNDEEP
react-nativereact-native-flatlist
user4535674
user4535674

Reputation:

React Native FlatList with other Component doesn't scroll to the end

I got a page RN flatlist with textbox/button/others component, but the problem is I am not able to scroll till the end of flatlist, there is some other part was kind of overflow. enter image description here

 <View>
<TextInput
    value={this.state.code}
    onSubmitEditing={this.getPr}
    style={styles.input}
    placeholder="placeholder"
/>
<Button onPress={this.getPr} title="Cari" color="blue" />
<FlatList
    data={this.props.produk}
    renderItem={({ item }) => (
        <View key={item.id}>
            <Image
                resizeMode="cover"
                source={{ uri: item.thumb }}
                style={styles.fotoProduk}
            />
        </View>
    )}
    keyExtractor={(item, index) => index}
/>
</View>;

Upvotes: 13

Views: 16803

Answers (5)

Sabri Mevis
Sabri Mevis

Reputation: 2431

In my case, I had to add flex:1 to the outer view to fix the issue.

enter image description here

Upvotes: 0

Qamber
Qamber

Reputation: 108

  1. Adding style={{flex:1}} in View.

  2. In FlatList add contentContainerStyle={{ paddingBottom: 10}}. Check the example code:

         <View style={{flex:1}}>
         <FlatList
             contentContainerStyle={{ paddingBottom: 10}}
             renderItem={({ item }) =>
               return(console.log(item))
             }
             />
     </View>

Upvotes: 3

Teddy Sterne
Teddy Sterne

Reputation: 14221

I had the same issue. I was trying to add padding to the top which caused the rest of the content to be pushed down. You need to set the contentContainerStyle prop to modify this correctly and then set all the remaining styles on the style prop of the FlatList. Example:

<FlatList
  style={{
    flex: 1
  }}
  contentContainerStyle={{
    paddingTop: 40
  }}
  data={this.props.produk}
  renderItem={({ item }) => (
    <View key={item.id}>
      <Image
        resizeMode="cover"
        source={{ uri: item.thumb }}
        style={styles.fotoProduk}
      />
    </View>
  )}
  keyExtractor={(item, index) => index}
/>

Upvotes: 5

Alien_VIII
Alien_VIII

Reputation: 1

You can set width: '100%', height: '100%' in style of FlatList/ ScrollView to try.

Upvotes: -4

saiful619945
saiful619945

Reputation: 964

Wrap Flatlist with style={{flex:1}}. If it does not work add marginBottom to flatlist

<View style={{flex:1}}>

<FlatList
    data={this.props.produk}
    renderItem={({ item }) =>
        <View key={item.id} >
            <Image resizeMode="cover" source={{ uri: item.thumb }} style={styles.fotoProduk} />
        </View>
    }
    keyExtractor={(item, index) => index}/>
</View>

Upvotes: 26

Related Questions