Checking if the element is already in view?

[zaynv]

Use case:

There is a fixed button on bototm of the screen that scrolls into a View when pressed on. However, I want to hide that button if the element has already been scrolled to manually. Is there a way to see if my element is already at the current scroll position?

My code:

<CustomScrollView>
  <ScrollIntoView>
    <View> {/* MyElement */}
      ...
    </View>
  </ScrollIntoView>
</CustomScrollView>
<FloatingButton hidden={/* I want to check here if MyElement is already scrolled to}>Scroll to View</FloatingButton>

Thanks

[slorber]

Hi

I understand the usecase

I could add a method to know weither the view is above, under or into view, but this would be imperative so you would have to wire it in a on scroll JS listener. Would it be fine?

On holiday 2 weeks so won't be able to work on this soon

[jsamr]

@slorber @zaynv I would also be interested in such a feature!

[slorber]

Hi

For this usecase I think you should use an animated value on scrollY and hide the Fab if scrollY is > some threshold.

This lib is not made for tracking visibility state of elements over time and it's likely to be less performant for your usecase as it cant run fully on the native side

[jsamr]

@slorber Actually, my use case is more analog to FlatList prop onViewableItemsChanged ... but I realize I can accomplish this with little effort via the FlatList component.

[slorber]

I guess you can yes but sometimes you may want to prefer using a ScrollView, depends if you want virtualization or not.

About your usecase @jsamr I think it may be complicated to efficiently track the position of those items in the view over time but I can see what's possible, have some ideas for that.

What API do you have in mind? Something like that?

I guess we should be able to

        <ScrollIntoView align="center" onVisibilityChange={...}>
          <View></View>
        </ScrollIntoView>

[slorber]

But I feel this feature does not really belong to this lib and could be more useful in a separate lib.

I'm thinking of splitting it this way:

Some primitives:

• react-native-scrollview-context: provide scrollview instance to a tree through context (ie, primitive building block for other similar libs)
• react-native-scrollview-computations: lib to do the maths of position computations to know where a rectangle is, relative it the scrollview rectangle

Some libs for user consumption:

• this lib for scroll into view feature only
• react-native-scrollview-visibility for the feature you ask for

I also feel like the primitives could be used in https://github.com/APSL/react-native-keyboard-aware-scroll-view

@alvaromb what do you think of this idea?
I know RNKASV support other things than scrollview, wonder if we could build on top of shared primitives many scroll-related libs?
Also I'm pretty sure RNKASV will need to be rewritten with a more modern API at some point (using context/hooks etc), maybe it's time to start thinking about all this.