Why does ScrollView make the screen go up?

user_17385141 0
Viewed 80

When I use ScrollView the screen goes up and even scrolls but doesn't work. when I use KeyboardAvoidingView it has same issue. What is the problem?

export default function AuthLayout({ children }) {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <ScrollView style={{ flexGrow: 1 }}>
      <TouchableWithoutFeedback
        style={{ flex: 1 }}
        onPress={dismissKeyboard}
        disabled={Platform.OS === "web"}
      >
        <SAuthLayout>{children}</SAuthLayout>
      </TouchableWithoutFeedback>
    </ScrollView>
  );
}

Screen shot of my app and the gray part below is the space that has the ScrollView:

enter image description here

react-native scrollview
1 Answers

Per memory you should encapsulate your ScrollView with a View and your flex:

export default function AuthLayout({ children }) {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <View style={{ flex: 1 }}>
    <ScrollView>
      <TouchableWithoutFeedback
        style={{ flex: 1 }}
        onPress={dismissKeyboard}
        disabled={Platform.OS === "web"}
      >
        <SAuthLayout>{children}</SAuthLayout>
      </TouchableWithoutFeedback>
    </ScrollView>
    </View>
  );
}
user_19522870
Related