Question

89

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

rated 0 times [ 94] [ 5] / answers: 1 / hits: 77566 / 7 Years ago, thu, october 5, 2017, 12:00:00

I am using React-Navigation in my app and the app consists of StackNavigator with multiple screens, some screens of which have TextInput with autoFocus={true}

Problem: on these screens when the component renders, the height of the screen is being set in the constructor:

constructor(props) {

    super(props);

    this.state = { 

        height: Dimensions.get('window').height,

    };

}

But, since the autoFocus of TextInput is true, the keyboard on this screen pops-up on the screen almost instantly after the render, causing the component to re-render due to the eventListener that is added to Keyboard in componentWillMount:

 componentWillMount() {

    this.keyboardWillShowListener = Keyboard.addListener(

        keyboardWillShow,

        this.keyboardWillShow.bind(this)

    );

}



keyboardWillShow(e) {

    this.setState({

        height:

            Dimensions.get(window).height * 0.9 - e.endCoordinates.height

    });

    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

}

This affects the performance and I would like to avoid the unnecessary re-renders.

Questions:

1. Is it possible to set the dynamic height (depending on the device) of the Keyboard in React-Navigation's ScreenProps?

2. Is it possible to do the same with React-Navigation's state.params?

3. Is there any other way to solve this problem, apart from applying KeyboardAvoidingView or this module ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nolancampbellc

Add To Favorites

Follow

Total Points: 9

Total Questions: 102

Total Answers: 101

Location: Saint Vincent and the Grenadines

Member since Mon, Jan 16, 2023

1 Year ago

answered 7 Years ago alora · Accepted Answer

This is what I did:

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

In componentWillMount add KeyboardListeners as explained here:

this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);

this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

Add autoFocus to e-mail / phone number / any other first TextInput on the page, so that when the screen loads, the Keyboard pops-up.

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.

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 });
```