Handling TextInput in react native

3 min readSep 24, 2018

React Native TextInput has contradictory results with the keyboard in both Android and IOS platforms, while I have been working as Mobile UI Developer for the past one and half year, I have endeavored distinct approaches with textinput use cases.

Here we are going to discuss what are the issues with textinput with various screen structures (TextInput inside ScrollView, TextInput inside a Modal box, etc..) and how to improve UX with TextInput.

Let's not beat around the bush,

Setting up the limited height for multiline TextInput:

React Native WhatsApp TextInput is a UI Design to show how to create compatible multiline textinput for both Android and IOS with Validation.

Here I have achieved the limited auto increment height for textinput design as min 35px and max 120px height when the user is entering the text, Trust me, As I have observed this approach is the most used designs in chatroom screens like WhatsApp, Messager, Zomato, etc..

Goal features :

Dynamic height for textinput based on user text
Handling the keyboard space when textinput onFocus
Sticky send button to end the footer like whatsapp/messenger send button

Implementation:

Initialize a height state,

this.state = {
    height: 0,  //initializing the content text height  
}

onContentSizeChange function will give us the dynamic content height of the text based on the user input, then store that dynamic content text height value to height state.

<TextInput                       
   multiline={true}
   value={this.state.messageText}
   onChangeText={editedText =>
       this.setState({ messageText: editedText }) 
   }                            
   onContentSizeChange={(event) => 
       this.setState({ height:event.nativeEvent.contentSize.height})
       // storing the content text height to height state
   }
   style={[styles.textInputStyle, {
     height: Math.min(120, Math.max(35, this.state.height))
     //passing content text height to textinput height by setting height limintation between 35 to 120px
   }]}                        
/>

Then passing this.state.height value to textInput style height, though textInput initial height value is 35px and it will be changed dynamically between 35px to 120px according to the height of the content text height, it's a roll with butter, right!.

**Setting up the limited height TextInput**

Demo repo: https://www.npmjs.com/package/react-native-whatsapp-textinput, have a visit to this repo to know how to handle keyboard space for this design.

Auto height increment TextInput inside ScrollView:

Textinput inside scrollview design is hindered when it comes to the user experience like OnFocus to textinput is not working with scrollview, multiline textinput in scrollview is not working, scrollview is not scrolling, keyboard hides the textInput field.

If you have been working against the clock to solve these issues, lets try a stitch in time saves nine, though.

Problem and solution:

I recommend to use react naive keyboard aware scrollview rather than react native scrollview to avoid the hurdles with keyboard space (keyboard hides the textInput field, keyboard hides the textInput field).
And you have to pass keyboardShouldPersistTaps={'always'} to avoid onFocus is not working and keyboard hides on textinput kinda issues.
And If you are trying to solve scrollview is not scrolling, check out the below code snippet.

<SafeAreaView style={{ flex: 1, backgroundColor: '#6f6f6f' }}>
   <KeyboardAwareScrollView  
       ref='scrollView'
       keyboardShouldPersistTaps={'always'}
       contentContainerStyle={{
           flexGrow: 1 // this will fix scrollview scroll issue by passing parent view width and height to it
       }}
   >
    .....   </KeyboardAwareScrollView>
</SafeAreaView>

Demo repo: https://github.com/MaheshNandam/DynamicHeightTextInput/blob/master/app/components/TextInputInScrollView.js

If you are implementing SafeAreaView from react-native, that’s wrong, check out my blog regarding How to use SafeAreaView into the latest react native versions (>0.50).

TextInput inside Modal box:

Here I have figured out how to align textinput above the keyboard space which is inside a modal box.

To make it happen, I would recommend to use KeyboardAvoidingView and use react-native-modal rather than modal from react-native components.

demo repo: https://github.com/MaheshNandam/DynamicHeightTextInput/blob/master/app/components/TextInputInsideModal.js

Conclusion:

If you liked this article, please like and share and recommend to others, If you have any questions or relevant great advice, please leave them in the comments below, Thanks for your time.

Hope my work will help your crunch time.

Handling TextInput in react native

Written by Mahesh Nandam