How to recognize if element is on the screen using react native?

Question

When user scrolling posts in my app i want recognize the current post the user is seeing now.

are you using `pagingEnabled` – stereodenis Aug 23 '16 at 15:25 — stereodenis, Aug 23 '16 at 15:25

score 2 · Accepted Answer · edited Nov 26 '21 at 08:39

2

You can get y position on scroll from contentOffset

<ScrollView
  ref={(s) => this.scrollview = s}
  onScroll={(event) => {console.log(event.nativeEvent.contentOffset.y)}}
  ...
></ScrollView>

edited Nov 26 '21 at 08:39

Mario Petrovic

answered Aug 25 '16 at 08:32

stereodenis

Yes, but you still did not tell me how recognise which component/element the user see now while he scrolling. – ROI Aug 26 '16 at 17:34
1

if all items in scrollview have equal height then `contentOffset.y / itemHeight`. If not equal — sum one by one while they reach your `y` – stereodenis Aug 26 '16 at 19:19
Please if you can give me a tiny working example, cause i really still miss something..... let׳s say if we have the position y of scrollView and we know the height of post is similar to each post. How do i know that now the user see the item number seven? , Of course if i calculate it in my head i will know it, but how do i recognise it with react native script while i am scrolling? How do i know to trigger the visible element to user at the moment he see it? – ROI Aug 28 '16 at 16:08
I think i got your idea now, i will test it and if everything will works well according your suggestion i will accept your answer. – ROI Aug 29 '16 at 00:51
If i want to the same action with listView, does it the same idea or there is another way? – ROI Aug 29 '16 at 01:00

1 Answers1