Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30349

Extra blank space on bottom while using KeyboardAwareScrollView - React-native

$
0
0

I am trying to make a form with multiple input fields using react-native. I want the form submit button to remain at the bottom of the screen. I've used the following structure

<KeyboardAwareScrollView
      contentContainerStyle={{
        backgroundColor: "black",
        flexGrow: 1
      }}
      enableOnAndroid={true}
    >
      <View style={styles.container}>
        <View style={styles.formContainer}>
          {/*Form input components here*/}
        </View>
        <View style={styles.buttonContainer}>
          <Button
            icon={<Icon name="back" size={24} color="white" />}
            onPress={props.setModalVisible}
            buttonStyle={styles.backButton}
          />
          <Button
            buttonStyle={styles.button}
            containerStyle={{ flex: 1 }}
            title="Update Info"
            onPress={props.setModalVisible}
          />
        </View>
      </View>
    </KeyboardAwareScrollView>

The container has style

  container: {
    padding: 10,
    backgroundColor: "green",
    flex: 1
  },

The form container has style

  formContainer: {
    padding: 15,
    flex: 1,
    backgroundColor: "blue"
  },

Button container has style

  buttonContainer: {
    padding: 15,
    flexDirection: "row",
    backgroundColor: "yellow",
    marginTop: 'auto'
  },

Using the above code the button sticks to the bottom when there is no keyboard as I expected. I've added background color for easy visualization. Image - Form View

But when I click on a text field and scroll up I see that the container "shrinks" and the bottom of the screen is black and button is now close to input fields. Background color of KeyboardAwareScrollView contentContainerStyle fills the bottom when I [fully scroll to bottom][3]

How do I make sure that the button still sticks to the bottom in scrollview and the content container height remains the same as screen height?

I am using "react-native-keyboard-aware-scroll-view": "0.8.0",

I've tried removing marginTop: 'auto' from the buttonContainer, fixing the height of the container and all sorts of combinations with flexGrow and flex on KeyboardAwareScrollView.


Viewing all articles
Browse latest Browse all 30349

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>