New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the keyboard will cover the modal #87

Open
jinghun1999 opened this Issue Sep 12, 2016 · 5 comments

Comments

Projects
None yet
5 participants
@jinghun1999

jinghun1999 commented Sep 12, 2016

when i put a TextInput in the modal, when textinput focus,the keyboard show, and it will cover the modal, i can't see the modal any more, how can i fix it?

@af-inf

This comment has been minimized.

af-inf commented Sep 16, 2016

I do not even see the keyboard, nothing happens. Also, the TextInput shows no value, whatever I may use as 'value' there.

@DonovanCharpin

This comment has been minimized.

DonovanCharpin commented Sep 23, 2016

Same for me, I tried to use 'KeyboardAvoidingView' but all the view goes up, it would be nice that only the modal moves up but I'm not able to do it with 'KeyboardAvoidingView'. The best way would be to animate it manually modifying the bottom position.

@DonovanCharpin

This comment has been minimized.

DonovanCharpin commented Sep 23, 2016

I found a way to do it! The keyboard goes up on my side with this code.

<KeyboardAvoidingView style={FiltersStyles.container} contentContainerStyle={FiltersStyles.container} behavior={'position'}>
  <Modal isOpen={this.props.open} style={styles.modalContainer} backdrop={false} position={"bottom"}
         entry={"bottom"}>
    <Text>Test modal with keyboard</Text>
  </Modal>
</KeyboardAvoidingView>

and the style

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  modalContainer: {
    height: Dimensions.get('window').height * .3,
    width: Dimensions.get('window').width,
    backgroundColor: 'red'
  }
});
@c446984928

This comment has been minimized.

c446984928 commented Aug 11, 2017

fond one way as a workaround:

constructor(props) {
        super(props);
        this.state = {
            keyboardSpace:0
            nicknameModalVisible:true,
        };
        
        //for get keyboard height
        Keyboard.addListener('keyboardDidShow',(frames)=>{
            if (!frames.endCoordinates) return;
            this.setState({keyboardSpace: frames.endCoordinates.height});
        });
        Keyboard.addListener('keyboardDidHide',(frames)=>{
            this.setState({keyboardSpace:0});
        });
}
<Modal
  isOpen={this.state.modalVisible}
  style={{
         position: 'absolute',
         bottom: 0,
         //change modal position by keyboardspace
         top:this.state.keyboardSpace?-10-this.state.keyboardSpace: -250,
         padding:20,
         width:250,
         height:150,
         borderRadius:15
        }}
        position={"bottom"}
        ref={"modal"}
        onClosed={()=> {
            this.setState({modalVisible:false});
  		}}
          >
            //your content
</Modal>

tim 20170811143341
tim 20170811143401

@renalpraba

This comment has been minimized.

renalpraba commented Sep 7, 2018

Got it working @c446984928 thanks for the keyboard listener work around

image 2018-09-07 16 03 52
image 2018-09-07 16 03 54

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment