react native Horizontal Scroll on Button click

Question

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,
  },
});

couldn't find any click function for the button you referring? where you want to autoScroll? — Aravind S
– Aravind S, Commented Aug 1, 2018 at 9:54
Right now the scroll is working fine.. but i also have two buttons which when clicked should auto scroll to respective screens. (Please check the image i.sstatic.net/HFnuQ.png ) — Biks
– Biks, Commented Aug 1, 2018 at 10:04

Uyiosa Enabulele · Accepted Answer · 2018-08-01 10:11:14Z

9

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

edited Aug 1, 2018 at 10:11

answered Aug 1, 2018 at 10:05

Uyiosa Enabulele

1781 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Uyiosa Enabulele Over a year ago

that is surprising, maybe there is some fundamental issue, I ran it here and it works for both android and IOS, modified your code and added the onPress methods snack.expo.io/r1r_8MJHQ

Biks Over a year ago

Thanks.. built a new project and tried and it worked.. There was some problem with my previous project i guess..

Yasin Ugurlu · Accepted Answer · 2018-08-01 10:29:05Z

1

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 >

answered Aug 1, 2018 at 10:29

Yasin Ugurlu

6995 silver badges11 bronze badges

Comments

KienLV · Accepted Answer · 2018-08-01 10:37:17Z

0

You can try:

onPress = (index) => {
   this.scroll.scrollTo({x: index * screenWidth, y: 0, animated: true})
}

 <Button title="Screen 1" 
    onPress = {() => this.onPress(0)}
 />
 ...
  <Button title="Screen 2" 
    onPress = {() => this.onPress(1)}
 />
 ...
 <ScrollView
      horizontal={true}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      ref = {re => this.scroll = re}
 >
 </ScrollView>

edited Aug 1, 2018 at 10:37

answered Aug 1, 2018 at 9:24

KienLV

2962 silver badges6 bronze badges

3 Comments

Biks Over a year ago

I have followed your guide but I am getting an error when i click the button -- undefined is not a function (evaluting '_this2.scroll.ScrollToIndex({index:1,animated:true})')

Biks Over a year ago

Still error.. undefined is not a function.. check image imgur.com/a/06jcRNV

KienLV Over a year ago

change to use: this.scroll.scrollTo({x: index * screenWidth, y: 0, animated: true})

Collectives™ on Stack Overflow

react native Horizontal Scroll on Button click

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related