FlatList - react native not scrolling

JohnDoe
January 25, 2023
250 views
0 votes
2 Answers

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

Tags: flatlist react-native

Answers

- KhalidH
- January 25, 2023 at 11:48 am
- 0 votes
0
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>
```
Login or Signup to reply.

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.

Please signup or login to give your own answer.

Click here to cancel reply.

FlatList – react native not scrolling

Answers