android - ScrollView In React Native not Scrolling when Height is set 100% - Stack Overflow

admin管理员组

文章数量:1289525

This scrolling works on Ios But it Doesn't work on Android Devices.

I Set the SafeArea Height and content Container for scrollview and also set height for image and am using nativewind here. the TouchableOpaciity is Disappearing in the bottom but the scrolling is not working here is my code:

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

import icons from "@/constants/icons";
import images from "@/constants/images";

const Auth = () => {
  const handleLogin = async () => {};

  return (
    <SafeAreaView className="bg-white h-full">
      <ScrollView
        contentContainerStyle={{
          height: "100%",
        }}
      >
        <Image
          source={images.onboarding}
          className="w-full h-4/6"
          resizeMode="contain"
        />
        <View className="px-10">
          <Text className="text-base text-center uppercase font-rubik text-black-200">
            Welcome To Real Scout
          </Text>

          <Text className="text-3xl font-rubik-bold text-black-300 text-center mt-2">
            Let's Get You Closer To {"\n"}
            <Text className="text-primary-300">Your Ideal Home</Text>
          </Text>

          <Text className="text-lg font-rubik text-black-200 text-center mt-12">
            Login to Real Scout with Google
          </Text>

          <TouchableOpacity
            onPress={handleLogin}
            className="bg-white shadow-md shadow-zinc-300 rounded-full w-full py-4 mt-5"
          >
            <View className="flex flex-row items-center justify-center">
              <Image
                source={icons.google}
                className="w-5 h-5"
                resizeMode="contain"
              />
              <Text className="text-lg font-rubik-medium text-black-300 ml-2">
                Continue with Google
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Auth;

This scrolling works on Ios But it Doesn't work on Android Devices.

I Set the SafeArea Height and content Container for scrollview and also set height for image and am using nativewind here. the TouchableOpaciity is Disappearing in the bottom but the scrolling is not working here is my code:

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

import icons from "@/constants/icons";
import images from "@/constants/images";

const Auth = () => {
  const handleLogin = async () => {};

  return (
    <SafeAreaView className="bg-white h-full">
      <ScrollView
        contentContainerStyle={{
          height: "100%",
        }}
      >
        <Image
          source={images.onboarding}
          className="w-full h-4/6"
          resizeMode="contain"
        />
        <View className="px-10">
          <Text className="text-base text-center uppercase font-rubik text-black-200">
            Welcome To Real Scout
          </Text>

          <Text className="text-3xl font-rubik-bold text-black-300 text-center mt-2">
            Let's Get You Closer To {"\n"}
            <Text className="text-primary-300">Your Ideal Home</Text>
          </Text>

          <Text className="text-lg font-rubik text-black-200 text-center mt-12">
            Login to Real Scout with Google
          </Text>

          <TouchableOpacity
            onPress={handleLogin}
            className="bg-white shadow-md shadow-zinc-300 rounded-full w-full py-4 mt-5"
          >
            <View className="flex flex-row items-center justify-center">
              <Image
                source={icons.google}
                className="w-5 h-5"
                resizeMode="contain"
              />
              <Text className="text-lg font-rubik-medium text-black-300 ml-2">
                Continue with Google
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Auth;

• android
• reactjs
• react-native
• expo
• nativewind

Share Improve this question Follow edited Feb 20 at 21:01 Zack Snyder asked Feb 20 at 2:30 Zack SnyderZack Snyder 6511 silver badge88 bronze badges 4

• 1 I think you should use flexGrow: 1 to allow the content to grow and scroll as needed instead height: "100%" style in the ScrollView's contentContainerStyle – Tejas Soni Commented Feb 20 at 5:44
• i just tried and it doesn't work on android at all – Zack Snyder Commented Feb 20 at 20:59
• @TejasSoni is right. You should remove the height you applied for contentContainerStyle because it restricts the height – Eternal Dreamer Commented Feb 20 at 21:27
• i did but then the Image component is not setting proper height of 66% because of the parents height which is scrollview. also this happens on android only i tested it on ios it just works fine – Zack Snyder Commented Feb 20 at 22:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try to use flexGrow instead of flex. When setting styles for the ScrollView, avoid using flex: 1 in the contentContainerStyle. Instead, use flexGrow: 1.

This allows the content to expand and fill the available space without breaking the scrolling functionality.

At the top of that there is a fixed height (like height: '100%') on the parent component, consider removing it or setting it to a more dynamic value. Fixed heights can restrict the ability of the ScrollView to function properly.

For example:

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

import icons from "@/constants/icons";
import images from "@/constants/images";

const Auth = () => {
  const handleLogin = async () => {};

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
      >
        <Image
          source={images.onboarding}
          style={styles.onboardingImage}
          resizeMode="contain"
        />
        <View style={styles.contentView}>
          <Text style={styles.welcomeText}>
            Welcome To Real Scout
          </Text>

          <Text style={styles.mainText}>
            Let's Get You Closer To {"\n"}
            <Text style={styles.highlightedText}>Your Ideal Home</Text>
          </Text>

          <Text style={styles.loginText}>
            Login to Real Scout with Google
          </Text>

          <TouchableOpacity
            onPress={handleLogin}
            style={styles.googleButton}
          >
            <View style={styles.googleButtonContent}>
              <Image
                source={icons.google}
                style={styles.googleIcon}
                resizeMode="contain"
              />
              <Text style={styles.googleButtonText}>
                Continue with Google
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  scrollContainer: {
    flexGrow: 1, // Important: Use flexGrow instead of height: '100%'
    paddingBottom: 20, // Add padding to the bottom to ensure all content is accessible
  },
  onboardingImage: {
    width: '100%',
    height: undefined,
    aspectRatio: 1, // Adjust as needed to maintain aspect ratio
  },
  contentView: {
    paddingHorizontal: 10,
  },
  welcomeText: {
    fontSize: 16,
    textAlign: 'center',
    textTransform: 'uppercase',
    fontFamily: 'Rubik',
    color: '#333', // Assuming black-200 is a dark grey
  },
  mainText: {
    fontSize: 24,
    fontFamily: 'Rubik-Bold',
    color: '#222', // Assuming black-300 is a dark grey
    textAlign: 'center',
    marginTop: 8,
  },
  highlightedText: {
    color: '#007BFF', // Assuming primary-300 is a blue color
  },
  loginText: {
    fontSize: 16,
    fontFamily: 'Rubik',
    color: '#333', // Assuming black-200 is a dark grey
    textAlign: 'center',
    marginTop: 24,
  },
  googleButton: {
    backgroundColor: 'white',
    shadowColor: '#aaa',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    borderRadius: 999, // Large value for rounded corners
    width: '100%',
    paddingVertical: 12,
    marginTop: 20,
  },
  googleButtonContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  googleIcon: {
    width: 20,
    height: 20,
  },
  googleButtonText: {
    fontSize: 18,
    fontFamily: 'Rubik-Medium',
    color: '#222', // Assuming black-300 is a dark grey
    marginLeft: 8,
  },
});

export default Auth;

本文标签： androidScrollView In React Native not Scrolling when Height is set 100Stack Overflow