React Native FlexBox & Wrap - how to detect if element moved to next row?

user_6103535 0
Viewed 568

I'm having a React Native View with flexDirection: 'row' and flexWrap: 'wrap'. Inside I render a bunch of tags with icons, some of them move to next row.

I would like to detect new row to not render the dot marked with yellow:

enter image description here

Any idea how to achieve that?

flexbox react-native position word-wrap
1 Answers

You can be able to know the initial height of the flexbox, and then attach an onLayout event to it so when the height exceeds your initial height you will know that the items have now span another row down due to the flex-wrap , this is the syntax for the onLayoutEvent

 <View onLayout={(event) => {
  let {height} = event.nativeEvent.layout;
   }} />

Depending on the height, you can update your component state and base on that to conditionally apply a style to your UI elements.

user_82167770
Related