React Native Scrolling Screen with ScrollView from a Within a Component

Question

In my React Native Project, I have a screen with a ScrollView, with lots of defined areas. In the same screen, I also have a component which creates a floating view on top of the ScrollView.

In this floating box I have a button. If the user clicks this button, the main screen should scroll down to a specific component within the ScrollView. Is it possible, and how can I do it?

App.js

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native';
import Constants from 'expo-constants';

import Guide from './components/Guide';

import { Card } from 'react-native-paper';

export default function App() {
  return (
    <>
    <ScrollView style={styles.container}>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 1</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 2</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 3</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 4</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 5</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 6</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 7</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 8</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 9</Text>
      </Card>
      <Card style={{margin:20,padding:20}}>
        <Text style={{textAlign:'center'}}>AREA 10</Text>
      </Card>
    </ScrollView>
    <Guide />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#FFC300',
    padding: 8,
  },

  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Below is the Guide component.

Guide.js

import * as React from 'react';
import { Text, View, StyleSheet, Image, Dimensions, Pressable } from 'react-native';

    export default function Guide() {
      return (
        <View style={styles.context}>
        <Pressable onPress={() => {
              alert('This should scroll down to Area 8');
            }}>
          <View style={styles.blockWrapper}>
            <Text style={styles.textStyle}>Scroll to Area 8</Text>
          </View>
          </Pressable>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
        context: {
        position: 'absolute',
        width: Dimensions.width,
        height: Dimensions.height,
        top: 0,
        left: 0,
        right: 0,
        bottom: 10,
        zIndex: 1000,
        justifyContent: 'flex-end',
      },
      blockWrapper: {
        width: '100%',
        padding: 0,
        backgroundColor: '#5C93D8',
        paddingHorizontal: 20,
        paddingVertical: 15,
        // marginBottom: 20,
        borderRadius: 20,
        justifyContent: 'center',
        minHeight:100
      },
    });

The button produced by Guide floats over the ScrollView. When I click that, the main screen should scroll down to Area 8. I don't know how to make this happen. I've seen some threads on using ref on scroll but couldn't find a good explanation. Can you please help?

You can see the snack for the same here: https://snack.expo.io/lRl8ffSWo . Note that in my real project, I'm not using Expo.

Answer 1

You can use ref to do that. <ScrollView ref={yourRef}... /> and onClick you can scroll to some position. ref.current.scrollTo({ y: <offset> }) but there are better way, instead of ScrollView you can use FlatList where you can pass only index instead of offset. <FlatList ref={yourRef}... /> and you can scroll to some index using ref.current.scrollToIndex({ index: <your_index> }) .