Analysis of textInput component in hippy react

Posted by nonlinear on Wed, 17 Nov 2021 03:49:15 +0100


Component analysis

In the previous blog s, we have analyzed some components, including scrollview, viewPager, waterfallView, image and list view components. This time, let's interpret the textInput component.

textInput component

textInput is the basic component of input text. It provides the configuration of a variety of features, such as auto completion, auto case, placeholder text, and a variety of different keyboard types.

parameter analysis

valueSpecifies the value of the textInput component
defaultValueThe initial value in the text box changes when the user enters
editableSets whether the text box can be edited
keyboardTypeSoft keyboard pop-up settings
returnKeyTypeStyle of soft keyboard enter key
maxLengthThe maximum number of characters in a text box
multilineDetermines whether the text box can enter multiline text
numberOfLinesMaximum number of lines for TextInput
autoFocusGet focus automatically when rendering components
underlineColorAndroidBottom line color
placeholderThere is no text input to display the string
placeholderTextColorThe color of the placeholder string
placeholderTextColorsColor array of placeholder strings
onBlurThis function is called when the text box loses focus
onEndEditingCall the function at the end of text entry
onChangeTextFunction when text box changes
onContentSizeChangeCallback called when the size of the text input changes
onKeyboardWillShowCall when keyboard pops up
onSelectionChangeCalled when the range of the selection text in the input box is changed

Implementation of specific methods

getValue: get the content in the text box

public getValue(): Promise<string> {
    return new Promise((resolve) => {
      callUIFunction(this.instance as Element, 'getValue', (res: TextInputEvent) => resolve(res.text));

setValue: sets the content in the text box

public setValue(value: string): string {
    callUIFunction(this.instance as Element, 'setValue', [value]);
    return value;

Focus: specify InputText to get focus

public focus() {
    callUIFunction(this.instance as Element, 'focusTextInput', []);

blur: causes the specified input component to lose focus

public blur() {
    callUIFunction(this.instance as Element, 'blurTextInput', []);

Clear: clear the contents of the input box

public clear() {
    callUIFunction(this.instance as Element, 'clear', []);

showInputMethod: call up the soft keyboard

public showInputMethod() {
    callUIFunction(this.instance as Element, 'showInputMethod', []);

Precautions for using textInput

Since hippy is a multi platform framework, this component will be different when applied to Android and ios. The textInput on Android may be covered by the pop-up keyboard. At this time, we need to modify the AndroidMainfest.xml file and add android:windowSoftInputMode = "adjustPan" on the activity. The specific solutions are as follows:

<manifest xmlns:android=""
        <!-- be careful android:windowSoftInputMode="adjustPan" Write in activity In the parameters of-->
        <activity android:name=".MyActivity"


textInput is a word processing component in hippy react. Using this component, we can operate text boxes, keyboards and other problems, and its methods can basically meet our development needs.

Topics: iOS Android React