Can't scroll down screen in react JS

Question

My goal with this code is to show text on pressing First and Second Buttons, which work as expected. However, whenever I press on the second one, the text is longer than the screen, but I cannot scroll down: The screen is fixed. I have made some researchs but can't find any solutions to my problem ...

Any ideas how I can resolve the issue?

Dependencies:

"dependencies": {
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/compat": "^5.2.5",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  LayoutAnimation,
} from "react-native";
export default class ViewPersonalNote extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      expanded2: false,
    };
  }
  changeLayout = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: !this.state.expanded });
  };
  changeLayout2 = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded2: !this.state.expanded2 });
  };
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            position: "absolute",
            top: "50%",
            left: 20,
            right: 20,
            width: "92%",
            flexDirection: "column",
            borderBottomColor: "black",
            borderBottomWidth: 2,
          }}
        >
          <TouchableOpacity
            style={{
              width: "100%",
              height: "2em",
              borderBottomColor: "red",
              borderBottomWidth: 2,
            }}
            onPress={this.changeLayout}
          >
            <Text style={{ fontWeight: "bold", fontSize: 15 }}>First</Text>
          </TouchableOpacity>
          <View
            style={{
              height: this.state.expanded ? null : 0,
              overflow: "hidden",
              marginTop: "5%",
            }}
          >
            <Text style={{ fontSize: 17, color: "black" }}>
              The printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since
              the 1500s
            </Text>
          </View>
          <TouchableOpacity
            style={{
              width: "100%",
              height: "2em",
              borderBottomColor: "red",
              borderBottomWidth: 2,
            }}
            onPress={this.changeLayout2}
          >
            <Text style={{ fontWeight: "bold", fontSize: 15 }}>Second</Text>
          </TouchableOpacity>
          <View
            style={{
              height: this.state.expanded2 ? null : 0,
              overflow: "hidden",
              marginTop: "5%",
            }}
          >
            <Text
              style={{
                fontSize: 17,
                color: "black",
                textAlign: "center",
              }}
            >
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    // margin: 10,
    backgroundColor: "white",
  }
});

Answer 1

You import the Scrollview component but actually never use it.

Try surrounding your view with Scrollview, such as this:

    return (
      <ScrollView ref={scrollRef} >
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(1) title="1"/>
        </View>
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(4) title="4"/>
        </View>
        <View style={{height: '100px'}}>
            <Button onPress={() => handleClick(5) title="5"/>
        </View>
      </ScrollView>
    );