Question 34085 in React native Question posted in
The official React Native documentation can be found here.

onPress button scroll to specific section in functional component – React native

I’m trying to make a code where I want to action on onPress button to assign a screen or section where my scroller should go as I wanted, the below code is perfectly coded using class component, but my entire code Im coding is in functional components and i have no idea how to convert this class component into functional component help indeed.

Apps.js

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

let scrollYPos = 0;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screenHeight: Dimensions.get('window').height,
      screenWidth: Dimensions.get('window').width,
    };
  }

  scrollToB = () => {
    scrollYPos = this.state.screenHeight * 1;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
    console.log("test", scrollYPos)
  };
  scrollToC = () => {
    scrollYPos = this.state.screenHeight * 2;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
  };
  scrollToTop = () => {
    this.scroller.scrollTo({ x: 0, y: 0 });
  };

  render() {
    return (
      <ScrollView style={styles.container} ref={(scroller) => { this.scroller = scroller }}>
        <View style={[styles.screen, styles.screenA]}>
          <Button
            onPress={this.scrollToB}
            title="sctoll to B"
          />
          <Button
            title="sctoll to C"
            onPress={this.scrollToC}
          />
          <Button
            title="sctoll to Top"
            onPress={this.scrollToTop}
          />
          <Text style={styles.letter}>A</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to B</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenB]}>
          <Text style={styles.letter}>B</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to C</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenC]}>
          <Text style={styles.letter}>C</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to Top</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    height: Dimensions.get('window').height,
    justifyContent: 'center'
  },
  screenA: {
    backgroundColor: '#F7CAC9',
  },
  screenB: {
    backgroundColor: '#92A8D1',
  },
  screenC: {
    backgroundColor: '#88B04B',
  },
});
Tags:

2

Answers


  1. 0

    Have you tried simply using an <a href ="idofthatView>?

    I’m not familiar with react-native but it should work

    Login or Signup to reply.
  2. 0 
    import React, { Component, useState } from 'react';
import {
  Dimensions,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  Button,
  TouchableOpacity,
  View
} from 'react-native';

let scrollYPos = 0;

export default App = () => {
    const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height)
    const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width)

  const scrollToB = () => {
    scrollYPos = screenHeight * 1;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
    console.log("test", scrollYPos)
  };
  const scrollToC = () => {
    scrollYPos = screenHeight * 2;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
  };
  const scrollToTop = () => {
    this.scroller.scrollTo({ x: 0, y: 0 });
  };

    return (
      <ScrollView style={styles.container} ref={(scroller) => { this.scroller = scroller }}>
        <View style={[styles.screen, styles.screenA]}>
          <Button
            onPress={scrollToB}
            title="sctoll to B"
          />
          <Button
            title="sctoll to C"
            onPress={scrollToC}
          />
          <Button
            title="sctoll to Top"
            onPress={scrollToTop}
          />
          <Text style={styles.letter}>A</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to B</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenB]}>
          <Text style={styles.letter}>B</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to C</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenC]}>
          <Text style={styles.letter}>C</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to Top</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    height: Dimensions.get('window').height,
    justifyContent: 'center'
  },
  screenA: {
    backgroundColor: '#F7CAC9',
  },
  screenB: {
    backgroundColor: '#92A8D1',
  },
  screenC: {
    backgroundColor: '#88B04B',
  },
});

    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search