CODEWITHSUNDEEP
react-nativekeyboardnative-base
erjon
erjon

Reputation: 159

Keyboard hide input in a modal

I am using https://github.com/react-native-community/react-native-modal in an application, with a NativeBase input field.

But when the keyboard is up, the input field disappear by going up.

I have activated the avoidKeyboard props on the modal but it doesn't fix my problem.

I have also tried putting KeyboardAvoidingView around the input field without success.

Does anyone have an idea of what is going wrong ?

Thanks in advance.

Upvotes: 1

Views: 8150

Answers (3)

M Mahmud Hasan
M Mahmud Hasan

Reputation: 1173

<Modal>
  <KeyboardAvoidingView
    behavior="position"
    enabled
  >
    {myContent}
  </KeyboardAvoidingView>
</Modal>

It works for me

Upvotes: 0

erjon
erjon

Reputation: 159

I finally found the solution, my modal is composed of 3 parts, The Header, the Content and the Footer. As stated in my question, I have put the avoidKeyboard props on Modal, but the content still disappeared off screen.

The solution was to put scrollEnabled={false} on Content.

My code look like this now : 

<Modal isVisible avoidKeyboard onBackdropPress={this.handleDismiss} onBackButtonPress={this.handleDismiss}>
      <View style={styles.modal}>
        <Header>
          ...
        </Header>
        <Content scrollEnabled={false} padder>
         ...
        </Content>
        <Footer>
          ...
        </Footer>
      </View>
    </Modal>

Upvotes: 2

Gowthaman
Gowthaman

Reputation: 852

Please try this KeyboardAwareScrollView

npm i react-native-keyboard-aware-scroll-view --save

 <KeyboardAwareScrollView enableOnAndroid={true} style={{height:"100%"}}
            enableAutoAutomaticScroll={(Platform.OS === 'ios')} extraHeight={130} extraScrollHeight={130}>
                <View>
                  <FormInput />
                 </View>
      </KeyboardAwareScrollView>

Upvotes: 1

Related Questions