'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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source