How to solve the problem that the RN TextInput is blocked by the keyboard

In version 0.28 RN, if the position of TextInput is near the bottom position, after TextInput gets focus, the keyboard that pops up on iOS will cover up the textinput, cause the user cannot input, the whole interface will be top on the internet when the keyboard pops up on Android, TextInput will not be obscured.

In 0.28, the way to solve the problem on iOS is to use the ScrollView Contentinset property, listen for keyboard pop-up and hide events (keyboardwillshow/keyboardwillhide), get the keyboard height, and dynamically set The value of the Contentinset.

After upgrading the RN to 0.33, there will be problems with the TextInput on Android and iOS, and the original way on iOS won't solve the problem.

On iOS, TextInput does not get focus before:

After getting focus:

TextInput was blocked by the keyboard. Android has the same problem.

One way to address this situation is to listen for pop-up and hidden events on the keyboard, set a placeholder component at the bottom of the ScrollView, and set the height of the placeholder to the height of the keyboard.

Listening for keyboard events:

This.keyboardshow = Platform.os = = ' iOS '?
Keyboard.addlistener (' Keyboardwillshow ', This.updateKeyboardSpace.bind (This)): Keyboard.addlistener (' Keyboarddidshow ', This.updateKeyboardSpace.bind (this));
This.keyboardhide = Platform.os = = ' iOS '?
Keyboard.addlistener (' Keyboardwillhide ', This.resetKeyboardSpace.bind (This)): Keyboard.addlistener (' Keyboarddidhide ', This.resetKeyboardSpace.bind (this));

In an event handler, get the keyboard height:

Updatekeyboardspace (frames) {
if (!frames.endcoordinates) {return
;
Let
keyboardspace = frames.endcoordinates.height;//get keyboard height

this.setstate ({
Keyboardspace:key Boardspace
})
}

Finally, the height is passed to the placeholder component:

<ScrollView>
//Other elements
<keyboardspacer keyboardspace={this.state.keyboardspace}/>
</ Scrollview>

The Keyboardspacer component is implemented as follows:

Const styles = stylesheet.create ({    container: {   
     left: 0,         right: 0,

        bottom: 0     }); export default class keyboardspacer extends component {     Constructor () {        super ();     }      static proptypes = {        keyboardspace:

 proptypes.number     };     static defaultprops = {        

Keyboardspace: 0     };     render ()  {        let {keyboardspace
} = this.props;         return  (             <VIEW STYLE={[STYLES.CONTAINER, { HEIGHT: ~~KEYBOARDSPACE&NBSP}]}
 />         );    &NBSP}}

The effect is as follows:

This can solve some of the scenes, such as the textinput position near the bottom. If the position of the TextInput box is close to the top of the page, the TextInput box will be topped up, and will be "obscured" by exceeding the viewport range of the ScrollView.

At this time, can not simply the height of the keyboard to keyboardspacer, but should be based on the textinput in the ScrollView position keyboardspacer height of the calculation.

After the page is loaded, you can get the viewport height of the ScrollView viewportheight, the value is unchanged. In addition, can also get textinput distance scrollviewd the top edge of the vertical distance inputy, this value is fixed, will not change as the page scrolls.

The page is indicated as follows:

After the interface has been scrolled for a certain distance, the page is signaled as follows:

The red edge represents the top position of the scrollview at this point, and the dotted box represents the original position of the TextInput box, which represents the TextInput position after the page is scrolled.

When the page scrolls, you can get the offset that the ScrollView has scrolled scrolly, at which point you can calculate the distance inputtobottom the textInput distance scrollview the bottom of the viewport:

Inputtobottom = Viewportheight-(inputy-scrolly + textinput height)

At this point, you should set the Keyboardspace based on the size comparison of the Inputtobottom to the keyboard height:

Keyboardheight = Frames.endCoordinates.height; Keyboard height
keyboardspace = Inputtobottom >= keyboardheight? 0:keyboardheight-inputtobottom;

In the layout of the diagram page, there is also a bottom element, so when calculating keyboardheight, consider whether the actual need to subtract the height of the bottom element or the ScrollView marginbottom value.