React Native flexbox - detect last element in row

Question

I have a dynamic list with text (tags, for example) rendered in a row with flex-wrap. I want to add a bullet separator between all items, except for every last one in each row.

For example, let's say I have the list ['apple', 'peach', 'orange', 'watermelon', 'pear']. Depending on screen size, I want them rendered in rows and little bullets between.

apple • peach • orange

watermelon • pear

As you can see, there would be two rows and bullets only between element on one row. Now, I can use index to check whether it is the last element in the list arr.map((i, index) => index < arr.length-1 && <View>...</View>) but I get a bullet after the last element in the first row

apple • peach • orange •

watermelon • pear

and that is not what I want. Now let's say I have longer names of the items and only two of them are rendered in the first row, I want the same effect, no bullets at the end.

Can someone help me to detect the last element in one row.

Here is example of my code.

<View style={styles.section}>
    {
        tags.map((tag, index) => (
            <View key={tag.id} style={styles.tagItem}>
                <Text style={styles.tagTitle}>{tag.title}</Text>
                {index < tags.length - 1 && <Text>•</Text>}
            </View>
        ))
    }
</View>

And this is my styles object:

{
    section: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    tagItem: {
        paddingHorizontal: 5,
        flexDirection: 'row',
    },
}

score 2 · Accepted Answer · answered Jun 12 '20 at 00:53

2

You can divide them in sets by the offset on y-axis. Then you can check which element is furthest to the right from each set and then you can skip that dot.

answered Jun 12 '20 at 00:53

n.pejovski

58
7

You actually gave me an idea to take only x offset and place bullets before text instead of after it. I can save first element x-offset and then check which element has the same offset and render it without bullet. – Ilcho Taleski Jun 12 '20 at 01:54

score 0 · Answer 2 · answered Oct 30 '20 at 13:45

0

My solution was to show separators before every element and hide them with negative left margin. Maybe it wasn't the most elegant, but for sure it doesn't require so much effort.

answered Oct 30 '20 at 13:45

krystian

53
1
6

score -1 · Answer 3 · answered May 01 '20 at 19:19

You can do that whith this css trick : li + li::before

.list  {
  list-style: none;
  display: flex;
}

li span {
  padding: 20px
}

li + li::before {
      content: "\02022"
}

<ul class="list">
    <li>
        <span>Apple</span>
    </li>
    <li>
        <span>Banana</span>
    </li>
    <li>
        <span>Peach</span>
    </li>
</ul>

React Native flexbox - detect last element in row

3 Answers3