React Native FlexBox & Wrap - 如何检测元素是否移动到下一行？

Question

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:

Any idea how to achieve that?

Answer 1

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.