How to show a ListView in react-native where the rank of a logged in user should always visible

Question

I want to show a ListView in react-native where the rank of a logged in user (let's say "my rank") should always visible with other users list:

If "my rank" is higher then other users (visible users), then show the "my rank" row at the bottom (like a sticky row): Here the row with the blue background is the user of higher rank (my rank row) (Sticky row).

While scrolling, when scrolled users rank reaches the "my rank" (sticky row rank), then the "my rank" (sticky row) should move up as a normal row along with other users. See image (like a normal rank list)

While scrolling, when "my rank" (the one which is scrolling now along with other users) reaches the top of the list, it should stick at the top. So when the user scrolls further, "my rank" row should stick at the top which is always visible.

I want to achieve this using react-native. Please suggest a way to achieve this.

Answer 1

You can use stickyHeaderIndices to achieve this. Refer stickyHeaderIndices