Overflow scroll not working in React Native-CodePudding

I am trying to get overflow scroll working with my React Native app using NativeWind CSS, which is the native version of Tailwind css.

I am relatively inexperienced with CSS, so I am really struggling to get the below to work.

I have stripped my app back to basically nothing with the three files below in order to try and get this to work and understand where I am going wrong but still no success.

import { StatusBar } from "expo-status-bar";
import { Text, View, SafeAreaView } from "react-native";
import Box from "./components/box";
import SafeViewAndroid from "./SafeViewAndroid";

export default function App() {
  return (
    <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
      <StatusBar style="auto" />
      <View className="h-screen overflow-scroll">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, i) => (
          <Box key={i} />
        ))}
      </View>
    </SafeAreaView>
  );
}

import React from "react";
import { View, Text } from "react-native";

const Box = () => {
  return (
    <View className="flex-1 h-10 w-screen border-2 border-gray-800 items-center justify-between">
      <Text>Box</Text>
    </View>
  );
};

export default Box;

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "#FFF",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

CodePudding user response：

Scrolling in React Native is slightly different than in the browser. It's not a styling issue, there is this ScrollView that needs to wrap the things where you wanna have a scroll, as an example:

import { StatusBar } from "expo-status-bar";
import { ScrollView, View, SafeAreaView } from "react-native";
import Box from "./components/box";
import SafeViewAndroid from "./SafeViewAndroid";

export default function App() {
  return (
    <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
      <StatusBar style="auto" />
      <ScrollView>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, i) => (
          <Box key={i} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

If you have any trouble with this implementation, visit the doc by clicking on the above link. They talk about the edge cases.

And if you have a really long list to scroll, it's preferable to use FlatList.

CodePudding user response：

So as mentioned about the answer was to use ScrollView. I have an example below of what fixed it.

If you want to scroll horizontal then just use "horizontal" keyword in the ScrollView below.

import React from "react";
import { ScrollView, Text, View } from "react-native";

const Box = () => {
  return (
    <ScrollView horizontal>
      <View className="flex flex-row">
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 ">Box</Text>
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 ">Box</Text>
      </View>
    </ScrollView>
  );
};

export default Box;