Question 33141 in React native Question posted in
The official React Native documentation can be found here.

FlatList React Native – full image not showing in each element

I am trying to use the FlatList in my expo React Native application. I am able to get the FlatList working but the FULL image is not being displayed for each Item (it appears as though only the top left of the image is being displayed). Each image is 717×717 in dimension. Please can someone advise? Perhaps i am having a styling issue? I would like the images not to be of fixed width and height but dynamic in size which is what i tried to achieve below without success. I have included the link to the images below.

const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        resizeMode={'contain'}
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        source={item.path}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
    },
});


const EXAMPLES = [
    {
        id: '1',
        path: require('../assets/img-1_small.png'),
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
    {
        id: '2',
        path: require('../assets/img-2_small.png'),
        prompt: 'A van Gogh style painting of an American football player'
    },
    {
        id: '3',
        path: require('../assets/img-3_small.png'),
        prompt: '3D render of a cute tropical fish in an aquarium on a dark blue background, digital art'
    },
    {
        id: '4',
        path: require('../assets/img-4_small.png'),
        prompt: 'A cartoon of a cat catching a mouse'
    },
    {
        id: '5',
        path: require('../assets/img-5_small.png'),
        prompt: 'A comic book cover of a superhero wearing headphones'
    },
    {
        id: '6',
        path: require('../assets/img-6_small.png'),
        prompt: 'A hand-drawn sailboat circled by birds on the sea at sunrise'
    },
    {
        id: '7',
        path: require('../assets/img-7_small.png'),
        prompt: 'An expressive oil painting of a basketball player dunking, depicted as an explosion of a nebula'
    },
    {
        id: '8',
        path: require('../assets/img-8_small.png'),
        prompt: 'A hand drawn sketch of a Porsche 911'
    },
];

export default Inspiration;

This is the link to the images i am trying to display Examples

enter image description here

Tags:

3

Answers


  1. 0

    You can add resizeMode in Image Component.

    <Image
   source={item.path}
   resizeMode={'contain'}
   // Other Props remain same
 />

    Hope this will fix your problem.

    Login or Signup to reply.
  2. 0

    solved your problem
    check this Expo snack Link
    Expo Link

    Login or Signup to reply.
  3. 0

    you can use the stretch property

    const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        resizeMode={'stretch'}
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        source={item.path}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
        height: 400

    },
});

    you add the Height and Width preferences to your image

    you can try my way. hope it can help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search