How to get a height of a Keyboard in React-Native?

This is what I did:

If the app has “Authorization / Log-in / Sign-up screen” then:

  1. In componentWillMount add KeyboardListeners as explained here:

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    
  2. Add autoFocus to e-mail / phone number / any other “first” TextInput on the page, so that when the screen loads, the Keyboard pops-up.

  3. In _keyboardDidShow function, that is used as a KeyboardListener, do the follows:

    _keyboardDidShow(e) {
        this.props.navigation.setParams({
            keyboardHeight: e.endCoordinates.height,
            normalHeight: Dimensions.get('window').height, 
            shortHeight: Dimensions.get('window').height - e.endCoordinates.height, 
        }); 
    }
    

    Dimensions is an API of React-Native, do not forget to import it just like you import any React-Native component.

  4. After that, while redirecting to the next page, pass these params and do not forget to keep on passing them to other screens in order not to lose this data:

    this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });
    

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)