Get Y offset and scroll to position react-native

Scroll to particular view react-native, Get Y offset and scroll to position using ScrollView

In this article, we are going to learn about Scroll to particular view react-native get Y offset and scroll to position, this is going to a very useful article, as developers want to scroll the screen up to particular view component, we are using this.refs.measure on view to measure view position this will return height, width, px, py, fx, fy coordinates of the view, we have to use fy as Y-axis to get the position of view component after that we will create a reference to scrollView and use scrollview.getScrollResponder().scrollTo() method to scroll to that view, so let’s start with the example

1. Create a new project

2. Imports following components

3. Setup view components

As you seen in above screenshots I have added one list and at the end of the list view added another view button will have to scroll scrollView to that view for that I have created a method to calculate the position and another method for scroll

4. Get view position

I have created a method that returns width, height, px, py, fx, fy. for this you have to give reference to view like below

after this you can use this.refs.Marker.measure after this I have created another method to scroll view

5. Scroll to a particular view

First, give reference to scrollView like below

Then, we have to pass fy through the method parameter minus 70

Now just call this.measure() method to scroll to a particular ref view component, let’s see the whole score code

6. Full source code

7.  Output:

Scroll to particular view, get Y offset and scroll to position
Scroll to particular view, get Y offset and scroll to position

On button press, scrollView gets scroll to reference view components which are outside the screen and display on-screen window

Thank you, enjoy coding… 🙂

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *