TextInput - different height in Android vs iOS

Question

I'm quite new to React Native and so far most of my testing has been in the iOS simulator. Now I'm cleaning up the small issues in the appearance in the Android Emulator. I'm struggling with one specific issue in the chat-part of the app that I can't solve.

I have a TextInput component wrapped in a KeyboardAvoidingView component so it always floats above the keyboard. The TextInput is supposed to grow to a maximum of 5 lines, similar to other chats in other apps. It all works great in the iOS simulator but in the Android Emulator, the TextInput has an initial height or padding, that I can't control or manipulate.

Here is my code - I have "spelled out" most relevant styles, so you see what's going on.

<View style={mainStyles.background}>
                <SafeAreaView style={{ flex: 1,  }} forceInset={{ top: 'never' }}>
                    <View style={{flexDirection: 'column', flex: 1,}}>
                        <View style={{height: 80}}>
                            <View style={mainStyles.safeHeader}>
                                <TouchableOpacity activeOpacity={1.0} style={{ width: 36, height: 36, backgroundColor: '#fff', marginTop: 8, borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} onPress={() => this.props.navigation.pop()}>
                                    <Icon name='ios-arrow-back' size={26} color='#2D2C31'  />
                                </TouchableOpacity>

                                <Text style={mainStyles.screenTitle}>{this.state.title}</Text>

                                <TouchableOpacity activeOpacity={1.0} style={{ width: 36, height: 36, backgroundColor: '#fff',  marginTop: 8, borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} onPress={() => console.log("asd")}>
                                    <Icon name='ios-more' size={26} color='#2D2C31'  />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={{flexDirection: 'column', flex: 1, flexDirection: 'column'}}>
                            <FlatList inverted data={messages_data} renderItem={this.renderItem} keyExtractor={(item) => item.permalink} onRefresh={() => this.onRefresh()} refreshing={this.state.loading} />
                        </View>
                    </View>

                    <KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"} style={{width: '100%', backgroundColor: 'white'}} >
                        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                            <View style={{width: '100%', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
                                <TextInput ref= {(el) => { this.new_message = el; }} onChangeText={(new_message) => this.setState({new_message})} value={this.state.new_message} placeholder="Your message..." editable={true} multiline={true} numberOfLines={5} style={{fontFamily: "Nunito_SemiBold", fontSize: 16, maxHeight: 120, paddingVertical: 0, flex: 1, justifyContent:"center", backgroundColor: 'white'}} />
                                <View style={{width: 50, flexDirection: 'column', justifyContent: 'flex-end',}}>
                                    <TouchableOpacity onPress={() => this.createNewMessage()} activeOpacity={1.0} style={{ width: 36, height: 36, backgroundColor: '#fff', marginRight: 20,  borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} >
                                        <Icon name='md-send' size={26} color='#2D2C31'  />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </TouchableWithoutFeedback>
                    </KeyboardAvoidingView>
                </SafeAreaView>
                <SafeAreaView style={{ flex: 0, backgroundColor: 'white' }} />
            </View>

This code gives me the following result:

As you see in the code, I've already tried to force the paddingVertical to 0 as suggested in this thread

Answer 1

Make the vertical padding zero(0) and specify an height for the input. This will make the text input uniform on both platforms.

Answer 2

Try playing around with behavior={Platform.OS == "ios" ? "padding" : "height"}

From what I can see the behaviour is different on ios & android. My suggestion is to set the same behaviour for both platforms.

I tried your code but the styles and other stuff are missing and is pretty hard for me to test it and have your exact output.

Also look into React-Native InputAccessoryView