CODEWITHSUNDEEP
cssreact-native
Jeremy
Jeremy

Reputation: 1675

Keyboard aware scroll view takes up screen space

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

Upvotes: 3

Views: 6724

Answers (3)

sorold
sorold

Reputation: 533

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

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

Upvotes: 5

Jeremy
Jeremy

Reputation: 1675

Seems to have worked with the following code.

<KeyboardAwareScrollView
        style={{ backgroundColor: "#4c69a5" }}
        resetScrollToCoords={{ x: 0, y: 0 }}
        contentContainerStyle={styles.container}
        scrollEnabled={false}
        style={{ height: Dimensions.get("window").height }}
        automaticallyAdjustContentInsets={false}
      >
... components
<KeyboardAwareScrollView/>

Taken from https://medium.com/free-code-camp/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

Upvotes: 2

Brian H.
Brian H.

Reputation: 1669

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 }}
>
....

Upvotes: 0

Related Questions