react native Horizontal Scroll on Button click
17,407
Solution 1
I cant gurantee this is the best approach as I havent worked alot with React Native.
Add this.scroll.scrollTo({ x: calculatedStartPositionOfTheScreen})
to your button Press handler
https://facebook.github.io/react-native/docs/scrollview#scrollto
e.g
<View>
...
<View style={styles.ButtonContainer}>
<Button title="Screen 1" onPress={() => { this.scroll.scrollTo({ x: 0 }) }} />
</View>
<View style={styles.ButtonContainer}>
<Button title="Screen 2" onPress={() => { this.scroll.scrollTo({ x: screenWidth }) }} />
</View>
<View style={styles.ButtonContainer}>
<Button title="Screen 3" onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2 }) }} />
</View>
...
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
ref={(node) => this.scroll = node}
>
...
</ScrollView>
</View >
For this use case in bigger projects you can also consider https://reactnavigation.org
Solution 2
Try this.
<View>
...
<View style={styles.ButtonContainer}>
<Button title="Screen 1" onPress={() => { this.refs.scroll.scrollTo({ x: 0 }) }} />
</View>
<View style={styles.ButtonContainer}>
<Button title="Screen 2" onPress={() => { this.refs.scroll.scrollTo({ x: screenWidth }) }} />
</View>
<View style={styles.ButtonContainer}>
<Button title="Screen 3" onPress={() => { this.refs.scroll.scrollTo({ x: screenWidth * 2 }) }} />
</View>
...
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
ref={'scroll'}
>
...
</ScrollView>
</View >
Author by
Biks
Updated on July 04, 2022Comments
-
Biks almost 2 years
I am a beginner at React Native. As you can see from the image that I have a Scroll View and two buttons. I have successfully implemented the scroll View which works fine but I also want to them to auto scroll on the press of a button. I have tried searching a lot but not getting anything which is working. So any help is appreciated. Please find my code below.
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Dimensions, ScrollView, Button } from 'react-native'; var screenWidth = Dimensions.get('window').width; export default class App extends React.Component { render() { return ( <View style={styles.MainContainer}> <View style={styles.ButtonViewContainer}> <View style={styles.ButtonContainer}> <Button title="Screen 1" /> </View> <View style={styles.ButtonContainer}> <Button title="Screen 2" /> </View> </View> <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} > <View style={styles.ScrollContainer}> <Text style={styles.ScrollTextContainer}> Screen 1 </Text> </View> <View style={styles.ScrollContainer}> <Text style={styles.ScrollTextContainer}> Screen 2 </Text> </View> </ScrollView> </View> ); } } const styles = StyleSheet.create({ MainContainer: { backgroundColor: '#abe3a8', flex: 1, justifyContent: 'center', alignItems: 'center' }, ScrollContainer: { backgroundColor: '#cdf1ec', flexGrow: 1, marginTop: 0, width: screenWidth, justifyContent: 'center', alignItems: 'center' }, ScrollTextContainer: { fontSize: 20, padding: 15, color: '#000', textAlign: 'center' }, ButtonViewContainer: { flexDirection: 'row', paddingTop: 35, }, ButtonContainer: { padding: 30, }, });