FlatList - react native not scrolling - react-native

Question

I am unable to get my Flatlist to scroll in my expo react native app. At the moment it is just static, displaying a grid of images int he Flatlist with no scrolling functionality. Please can someone advise?
I am unable to get my Flatlist to scroll in my expo react native app. At the moment it is just static, displaying a grid of images int he Flatlist with no scrolling functionality. Please can someone advise?
import { StyleSheet, Text, View, Button, TextInput, TouchableWithoutFeedback, Keyboard, FlatList, ActivityIndicator } from 'react-native';
import { Image } from '#rneui/themed';
import ImageAPI from '../shared-components/ImageAPI';
export default function Home({ navigation }) {
const onCreate = () => {
console.log('create my image now');
};
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
{/** Enter text prompt */}
<View style={styles.section1}>
<View style={styles.txtInputView}>
<TextInput
style={styles.txtInput}
placeholder='Enter a prompt - a description of what you want to create'
multiline={true}
numberOfLines={4}
/>
</View>
<View style={styles.buttonView}>
<Text
style={styles.createBtnText}
onPress={onCreate}
>Create</Text>
</View>
</View>
{/** PROMPT EXAMPLES */}
<View style={styles.section2}>
<View style={styles.section2_sub0}>
<Text style={styles.promptEgTxt}>Prompt Examples</Text>
</View>
<View style={styles.section2_sub1}>
<ImageAPI />
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
section1: {
flex: 2,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffc6e2',
},
section2: {
flex: 5,
width: '100%',
backgroundColor: '#F8DB93',
},
// section3: {
// flex: 3,
// backgroundColor: '#BCF893',
// },
txtInputView: {
flex: 3,
width: '85%',
height: '50%',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
marginBottom: 20
},
buttonView: {
flex: 2,
width: '70%',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
backgroundColor: '#EE4A4A',
borderRadius: 40
},
txtInput: {
borderColor: '#AAAAAA',
borderWidth: 2,
padding: 10,
borderRadius: 15,
// width: '85%',
// height: '50%',
width: '100%',
height: '100%',
fontSize: 15,
},
createBtnText: {
fontSize: 18,
fontWeight: 'bold',
// backgroundColor: '#EEEC4A'
},
section2_sub0: {
flex: 1,
width: '100%',
height: '100%',
backgroundColor: '#EEEC4A',
justifyContent: 'center',
},
promptEgTxt: {
fontSize: 15,
fontWeight: 'bold',
marginLeft: 10
},
section2_sub1: {
flex: 8,
width: '100%',
height: '100%',
backgroundColor: '#A9F889'
},
});
This is the ImageAPI.js file:
import React from 'react';
import { FlatList, SafeAreaView, StyleSheet, ActivityIndicator, View, ScrollView } from 'react-native';
import { Image } from '#rneui/themed';
const BASE_URI = 'https://source.unsplash.com/random?sig=';
const ImageAPI = () => {
return (
<>
<SafeAreaView>
<FlatList
data={[...new Array(10)].map((_, i) => i.toString())}
style={styles.list}
numColumns={2}
keyExtractor={(e) => e}
renderItem={({ item }) => (
<Image
transition={true}
source={{ uri: BASE_URI + item }}
containerStyle={styles.item}
PlaceholderContent={<ActivityIndicator />}
/>
)}
/>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
list: {
width: '100%',
backgroundColor: '#000',
},
item: {
aspectRatio: 1,
width: '100%',
flex: 1,
},
});
export default ImageAPI

Answer 1

you need to give it a fixed height and set the contentContainerStyle prop to { flexGrow: 1 }. This will allow the content inside the FlatList to exceed the bounds of the container and be scrollable.
<View style={styles.section2_sub1}>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
data={data}
renderItem={({ item }) => <ImageAPI data={item} />}
keyExtractor={(item) => item.id}
/>
</View>

Answer 2

Try adding flex according to your requirement to your <SafeAreaView> which is the parent to your <Flatlist> Something like this:
<>
<SafeAreaView style = {{flex: 8}} >
<FlatList
data={[...new Array(10)].map((_, i) => i.toString())}
style={styles.list}
numColumns={2}
keyExtractor={(e) => e}
renderItem={({ item }) => (
<Image
transition={true}
source={{ uri: BASE_URI + item }}
containerStyle={styles.item}
PlaceholderContent={<ActivityIndicator />}
/>
)}
/>
</SafeAreaView>
</>
Or remove the SafeAreaView if not required.
Both should work.