React native ScrollView scroll to position

Hello Friends,

Welcome To Infinitbility!

The simplest way of scroll to position in react native using ScrollView ref.

Introduction

The simplest way of auto-scroll store scrolled position on our state and use in the vertical and horizontal auto-scroll.

but how it is possible auto-scroll in react native?

for auto-scroll, we are use scrollView as a ref, and ScrollView provides scrollTo function for scrolling on any position in a scroll view.

First Create Refs on Class

Refs provide a way to access DOM nodes or React elements created in the render method. ~ from the react-native document


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ScrollView = React.createRef();
  }
}

Store scrolled height and width on state

State generally use in react-native to store data.


<ScrollView
  showsVerticalScrollIndicator={false}
  // define ref
  ref={ref => (this.ScrollView = ref)}
  // use for store scrolled value
  onScroll={event =>
      this.setState({horizontalScroll:event.nativeEvent.contentOffset.x, VerticalScroll:event.nativeEvent.contentOffset.y})
  }
>
// Your list data
</ScrollView>

Use ScrollView ref to scroll to a destination position


// auto scroll function
autosScroll(){

   // X use for horizontal
   let horizontalScroll = this.state.horizontalScroll;

   // Y use for Vertical
   let VerticalScroll = this.state.VerticalScroll;

  this.ScrollView.scrollTo({x: horizontalScroll, y: VerticalScroll, animated: true});
}

Thanks for reading…

React native ScrollView scroll to position

Introduction

First Create Refs on Class

Store scrolled height and width on state

Use ScrollView ref to scroll to a destination position

More From React Native Tutorial

Basics

Advances

Error & Issue Solution

Introduction#

First Create Refs on Class#

Store scrolled height and width on state#

Use ScrollView ref to scroll to a destination position#

More From React Native Tutorial#

Basics#

Advances#

Error & Issue Solution#

Introduction

First Create Refs on Class

Store scrolled height and width on state

Use ScrollView ref to scroll to a destination position

More From React Native Tutorial

Basics

Advances

Error & Issue Solution