How to Handle overflowing elements in React-native?

Question

How to use flex in react-native to make any element inside <View></View> to arrange themselves when their length got bigger than their container's ?

Below is my code:

const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row', }}>
   {artists.map(artist => (
     <Image
       key={cast.name}
       source={{ uri: artist.img }}
       style={{ width: 80, height: 100 }}
    />
   ))}

</View>
);

This is what I want. I want to make the 5th and others to go below the first row automatically after they hit the screen width limit, like what HTML usually does

But instead, this is what I get when in React Native, the <Image> elements continue to be rendered outside their parent's width

try flexWrap:'wrap'

Aravind S
– Aravind S

2018-07-31 11:00:04 +00:00
Commented Jul 31, 2018 at 11:00 — Aravind S
– Aravind S, Commented Jul 31, 2018 at 11:00
@AravindS works for me! Thank you!!!!

DennyHiu
– DennyHiu

2018-07-31 11:05:06 +00:00
Commented Jul 31, 2018 at 11:05 — DennyHiu
– DennyHiu, Commented Jul 31, 2018 at 11:05
Awesome ! i will add it as answer

Aravind S
– Aravind S

2018-07-31 11:05:50 +00:00
Commented Jul 31, 2018 at 11:05 — Aravind S
– Aravind S, Commented Jul 31, 2018 at 11:05

Aravind S · Accepted Answer · 2018-07-31 11:07:05Z

2

You can use the prop flexWrap:'wrap' for wrapping the elements. flexWrap controls whether children can wrap around after they hit the end of a flex container. More here

const FilmCasts = ({ artists }) => (
<View style={{ flex: 1, flexDirection: 'row',flexWrap:'wrap' }}>
   {artists.map(artist => (
     <Image
       key={cast.name}
       source={{ uri: artist.img }}
       style={{ width: 80, height: 100 }}
    />
   ))}

</View>
);

answered Jul 31, 2018 at 11:07

Aravind S

2,3952 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can simply defined image with dynamically using the Dimension property of react native .

like when you are using

<Image
   resizeMode="cover" or try "contain"
   key={cast.name}
   source={{ uri: artist.img }}
   style={{ width: width * 0.5 , height: 100 }} // this will be done currently defining the values . 
/>

Here is one blog regarding image handling in react native Click to see the blog

Hope my answer will give an idea to slove your problem

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 31, 2018 at 11:02

HpDev

2,9471 gold badge17 silver badges20 bronze badges

2 Comments

DennyHiu Over a year ago

even though flexWrap property is the easiest way, but I think I will try your suggestion here, I want to make sure same UI experience across any device and display width

HpDev Over a year ago

yes , both approach will work with width concepts . thanks

Collectives™ on Stack Overflow

How to Handle overflowing elements in React-native?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related