Keyboard aware scroll view takes up screen space

user_8897307 0
Viewed 2424

I am implementing React Native Scroll View to handle the keyboard in my application layout, it works great but it is adding extra "padding" or whitespace below my components.

enter image description here

It is already styled with flex: 1 to take all the screen space. Here's the jsx code for App.js

    <PaperProvider>
      <StatusBar
        barStyle="dark-content"
        hidden={false}
        backgroundColor="#00BCD4"
        translucent={true}
      />
      <KeyboardAwareScrollView
        style={{ flex: 1 }}
      >
        <View style={styles.container}>
          <UnitCard />
          <UnitCard />
          <Converter />
        </View>
      </KeyboardAwareScrollView>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    flex: 1,
    backgroundColor: "#eee",
  },
  cards: {
    flex: 1,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});
react-native css
3 Answers
user_88973070

I don't think flex:1 will work in your KeyboardAwareScrollView or event in default React Native ScrollView

If you want to make it wrap all of your screen height, my suggestion is:

const SCREEN_HEIGHT = Dimensions.get("screen").height;

<KeyboardAwareScrollView
    style={{ height: SCREEN_HEIGHT }}
>
....
user_118886580

For anyone who comes later, the contentContainerStyle should have flex: 1 and then it should work, not the style property.

  <KeyboardAwareScrollView
    contentContainerStyle={{flex: 1}}
  >
user_56353380
Related