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
1class MyComponent extends React.Component {2 constructor(props) {3 super(props);4 this.ScrollView = React.createRef();5 }6}
Store scrolled height and width on state
State generally use in react-native to store data.
1<ScrollView2 showsVerticalScrollIndicator={false}3 // define ref4 ref={ref => (this.ScrollView = ref)}5 // use for store scrolled value6 onScroll={event =>7 this.setState({horizontalScroll:event.nativeEvent.contentOffset.x, VerticalScroll:event.nativeEvent.contentOffset.y})8 }9>10// Your list data11</ScrollView>
Use ScrollView ref to scroll to a destination position
1// auto scroll function2autosScroll(){34 // X use for horizontal5 let horizontalScroll = this.state.horizontalScroll;67 // Y use for Vertical8 let VerticalScroll = this.state.VerticalScroll;910 this.ScrollView.scrollTo({x: horizontalScroll, y: VerticalScroll, animated: true});11}
if you get help, please share post on your social network
More From React Native Tutorial
Basics
- Introduction To React Native
- React Native Environment Setup using expo
- React Native Environment Setup for windows
- React Native Environment setup on Mac OS
- React Native Environment setup on linux
- React Native Project Structure
- React Native State
- React Native Props
- React Native Styling
- React Native Flexbox
- React Native Text
- React Native Textinput
- React Native Commands
- React Native ScrollView
Advances
- React Native Dark Mode
- React Native Fonts
- React Native SQLite
- React Native DatepickerAndroid
- React native ScrollView scroll to position
- How to align icon with text in react native
- React Native Image
- React Native Firebase Crashlytics
- React Native Async Storage
- React Native Share
Error & Issue Solution
- Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
- Expiring Daemon because JVM heap space is exhausted In React Native
- Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
- Unable to determine the current character, it is not a string, number, array, or object in react native
- App crashed immediately after install react native video or track player
- how to delete SQLite database in android react native
- React native material dropdown twice click issue
- How to get the current route in react-navigation?
- how to disable drawer on the drawer navigation screen?
- Image not showing in ios 14 react native
- React Native image picker launchimagelibrary on second time issue
- how to open any link from react native render Html