Small jerk in the composer top border and the messages list when composer input changes from filled to unfilled and vice-versa in Android only.

Issue Description

I am facing a small jerk in the composer top header and the message listing when the Composer Text Input changes from Filled to UnFilled state and vice-versa in Android only. In iOS, everything works fine.

Steps to Reproduce / Code Snippets

• Tap on the Composer text input
• Start typing
• When first character is typed into the input and back button is pressed and text input is made empty, small jerk occurs. Whenever the composer size is changes, the jerk occurs.
• However, when I dig deep into the code of the composer and comment the onContentSizeChange method in the Composer.js file inside the node-modules, the jerk disappears but the composer height does not changed on hitting Enter or going to new line.
• Code:

<GiftedChat
    messages={this.state.messages}
    onSend={messages => this.onSend(messages)}
    user={{
          _id: 1,
     }}
    alwaysShowSend
 />

Expected Results

The composer input should not jerk when composer size changes on Android.

Additional Information

• Nodejs version: 10.16.0
• React version: 16.9.0
• React Native version: 0.61.5
• react-native-gifted-chat version: 0.13.0
• Platform(s) (iOS, Android, or both?): Android

[Muhammad-Saleet]

It looks like whats causing this issue is a hard coded value for lineHeight of the TextInput. Overriding that value with undefined solved this issue for me:

import { Composer, GiftedChat } from 'react-native-gifted-chat';

const ChatComponent = () => {
    const renderComposer = (props) => (
        <Composer
            {...props}
            textInputStyle={{
                lineHeight: undefined,
            }}
        />
    );

    return (
        <GiftedChat
            renderComposer={renderComposer}
        />
    );
}

[ajaykumar97]

I am still facing this small jerk issue. Please let me know if anyone found the solution for this.