CODEWITHSUNDEEP
react-nativenative-base
user10286245
user10286245

Reputation:

Native-base Hstack, go to the next line automatically

I'm trying to do a simple things, i want to render few images in my App.But when i got too much images, the images goes off the screen on the right side.

How can i automatically make the image to come to a new line ?

For exemple, i want to have 3 images side by side, then 3 images to the next line. Based on a map loop.

Here is my code actually :

        <Container>
            <HStack space={3}>
                <Center>Test</Center>
                <Center>Test</Center>
                <Center>Test</Center>
                <Center>Test</Center>
                <Center>Test</Center>
                <Center>Test</Center>
            </HStack>
        </Container>

I'm pretty sure there is a easy way to fix that, but i don't want to make a new HStack every 3/4 items because i want differentes number of images depends on the screen size.

For exemple, i want to have 3 images side by side on phone, but maybe 5 on tablet.

Upvotes: 1

Views: 2406

Answers (1)

apeltop
apeltop

Reputation: 21

You can use flexWrap={'wrap'}

    <HStack space={3} flexWrap={'wrap'}>
        <Center>Test</Center>
        <Center>Test</Center>
        <Center>Test</Center>
        <Center>Test</Center>
        <Center>Test</Center>
        <Center>Test</Center>
    </HStack>

Upvotes: 2

Related Questions