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

React native – My scrollView compnent is not working despite all the online solutions

I recently started learning react native and i have been going through some styling problems nad tailwind conversion of code but leaving that i am facing a more irritating issue… My scrollView tag is not scrolling…

import { ScrollView, View, Text } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";

const Home = () => {
  return (
    <SafeAreaView className=" flex-1">
      <ScrollView
        contentContainerStyle={{
          display: "flex",
          height: "100%",
          alignItems: "center",
          padding: 8,
          margin: 2,
          flex: 1,
          flexGrow: 1,
          marginHorizontal: 20,
        }}
      >
        <View className=" w-screen h-[500px] items-center mt-1">
          <View className="bg-pink-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              graph of payment made recently
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
          <View className="bg-slate-300 h-2/5 w-11/12 m-1 rounded-lg items-center">
            <Text className="text-center text-2xl font-black text-black">
              recent payments made
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Home;

this is my home page in the route (tabs). I have gone through so many stack overflow question, so many other websites but none of the solution are working. I also note that most of them are talking about changing the flex settings and other stuff.

enter image description here

I expected the scroll window to scroll when i added the scrollView tag to the app but i didnt get that when i run on android studio i can see that a scrollbar is formed but its not getting used.

Pls Help i am losing hair over this (mostly its gonna be some stupid thing i didnt add)
Thanks in advanced

Tags:

2

Answers


  1. 0

    Can you add a screenshot of the screen because it doesn’t seem like there is much content for the scrollview to make the content scrollable. It doesn’t scroll if the scrollable content is easily fitting inside the scrollview.

    Login or Signup to reply.
  2. 0

    In content container style never give hight or flex. It’ll stop scrolling

    modify your content container style as below:

      <ScrollView
    contentContainerStyle={{
      display: "flex",
      alignItems: "center",
      padding: 8,
      margin: 2,
      flexGrow: 1,
      marginHorizontal: 20,
    }}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search