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

react-native init projectName

2. Imports following components

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button, ScrollView} from 'react-native';

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

  measure(){
    this.refs.Marker.measure((width, height, px, py, fx, fy) => {
      console.log("++++++ fy "+fy+" "+height); 
      this.setState({ scrollToHeight: fy });
      this.scrollToView(fy - 70);   
    });
  };

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

<View ref="Marker">
//Add components
</View>

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

<ScrollView ref={view => (this._scrollView = view)}>
//Add you compoents
</ScrollView>

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

 scrollToView(fy) {
    this.setState({ scrollToHeight: fy });
    var scrollSize = parseInt(this.state.scrollToHeight);
    console.log("+++++ scrollSize "+scrollSize);
    
    this._scrollView
      .getScrollResponder()
      .scrollTo({ x: 0, y: scrollSize, animated: true });
  }

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

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,FlatList, Button, ScrollView} from 'react-native';

export default class Home extends Component {

  constructor() {
    super();
    this.state = {
      scrollToHeight: 0,
      demoList:[
        {
          id: 3,
          name: "Omkar"
        },
        {
          id: 2,
          name: "Abhishek"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 4,
          name: "Chintan"
        },   
        {
          id: 6,
          name: "Hardik"
        },
        {
          id: 5,
          name: "Lalit"
        },
        {
          id: 2,
          name: "Abhishek"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 1,
          name: "Saurabh"
        },
        {
          id: 4,
          name: "Chintan"
        },   
        {
          id: 6,
          name: "Hardik"
        },
        {
          id: 5,
          name: "Lalit"
        },
      ]
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'DetailsView',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };

  componentDidMount() {
   // do API call here
  }

  // Method to meausre Y offset 
  measure(){
    this.refs.Marker.measure((width, height, px, py, fx, fy) => {
      console.log("++++++ fy "+fy+" "+height);
      
      this.setState({ scrollToHeight: fy });
      this.scrollToView(fy - 70);
    });
  };
  // Method to scroll to particular reference view components
  scrollToView(fy) {
    this.setState({ scrollToHeight: fy });
    var scrollSize = parseInt(this.state.scrollToHeight);
    console.log("+++++ scrollSize "+scrollSize);
    
    this._scrollView
      .getScrollResponder()
      .scrollTo({ x: 0, y: scrollSize, animated: true });
  }

  render() {
    return (
      <View style={styles.container}>
         <View >
          <Button
            title="Sort List"
            onPress={() => this.measure()}  //<--- call method
          />
          </View>
      <ScrollView ref={view => (this._scrollView = view)}>
      <View >
        <View  style={{margin:10, alignItems:'center', justifyContent:'center'}}>
        <FlatList
         data={ this.state.demoList }
         extraData={this.state}
         ItemSeparatorComponent = {this.ItemSeparatorLine}
         renderItem={({item}) => 
             <View>
               <View style={{flexDirection:'row'}}>
                <Text style={{fontSize:20, margin: 15}}>{item.id}</Text>
                <Text style={{fontSize:20, margin: 15}}>{item.name}</Text>
              </View>
            </View>
        }
         keyExtractor={(item, index) => index} />
       <View ref="Marker">   //<--- Reference view component
          <Button
            title="Measure me" />
      </View>
    </View>
   </View>
  </ScrollView>
  </View>
    );
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10, 
  },
  instructions: {
    marginBottom: 5, 
    fontSize: 18,
    textAlign: 'center',
    color: '#333333',
  },
});

7.  Output:

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

Thank you, enjoy coding… 🙂