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

user4535674 picture user4535674 · Jan 13, 2018 · Viewed 12.2k times · Source

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>;

Answer

saiful619945 picture saiful619945 · Jan 14, 2018

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>