Overflow scroll not working in React Native

Question

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

I appreciate the response @Karthikeyan but I am trying to use tailwind css / nativewind css to stay consistent with the project — Ry2254
– Ry2254, Commented Jan 14, 2023 at 9:11
Hi Ry2254, @Karthikeyan is right. Check my below answer and let me know please :) — Youssouf Oumar
– Youssouf Oumar, Commented Jan 14, 2023 at 9:50
@Karthikeyan ScrollView is the answer. I got thrown off by seeing the StyleSheet in the documentation but StyleSheet isn't needed in order the scroll. Thanks for your help. — Ry2254
– Ry2254, Commented Jan 14, 2023 at 10:02

Youssouf Oumar · Accepted Answer · 2023-01-14 09:59:50Z

4

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.

edited Jan 14, 2023 at 9:59

answered Jan 14, 2023 at 9:46

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

Comments

Ry2254 · Accepted Answer · 2023-01-14 10:00:48Z

0

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;

answered Jan 14, 2023 at 10:00

Ry2254

1,0213 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

Overflow scroll not working in React Native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related