React-native-gifted-chat: [Performace] After chatting for a while input box start taking delay to show typed message in input box.

[Suraj-Tiwari]

Issue Description

After chatting for some time. When user types it takes a while to appear in message input box (Delay Varies by devices);

Steps to Reproduce / Code Snippets

Keep chatting for a long time with same user.

Expected Results

Smooth work

[FILL THIS OUT]

Additional Information

After chatting for some time. When user types it takes a while to appear in message input box (Delay Varies by devices);

• Nodejs version: [9.3.0]
• React version: [16.3.1]
• React Native version: [0.55.2]
• react-native-gifted-chat version: [0.4.3]
• Platform(s) (iOS, Android, or both?): [ANDROID]

[Suraj-Tiwari]

Ok I found a solution
Commenting this line resolved performance issue.

Issue: When user enter large text (50+ characters) and remove it then repeat process again 2 or more times. Then composer freeze Removing/commenting that line resolved that issue

Composer.js#L43

[Suraj-Tiwari]

@FaridSafi Please add this solution in readme. This might help other users.

[rzdev]

@Suraj-Tiwari Thanks so much for this, i have this problem too.

My issue on Lag
https://github.com/FaridSafi/react-native-gifted-chat/issues/850

[Waltari10]

Same here! I don't understand though why this is fixing the problem. 🤔 Isn't this the exact way that react-native recommends doing TextInput? How can it slow down Android?https://facebook.github.io/react-native/docs/textinput.html

[Waltari10]

I think what is happening that each time input changes, it is set to the state of the parent gifted chat. This causes every single component under giftedChat to be rerendered, because the text is passed as prop everywhere. On iOS this doesn't seem to be an issue, but on Android the rerendering is quite slow. If this is true, it is a rather fundamental problem with the package.

[Waltari10]

Possibly related issue: https://github.com/facebook/react-native/issues/18916

[ahartzog]

Commenting out the line breaks text clearing on iOS for me, this appears to resolve it well:

value={Platform.OS === 'ios' ? this.props.text : null}

[OSPFNeighbour]

+1

Without this my JS and UI FPS drop to about 3fps while typing. with this fix applied they stay at about 50fps

[akiladevinda]

simply comment " value={this.props.text} " in Composer.js file inside react-native-gifted-chat node module folder

[iamrommel]

No pull request for this?

[richeterre]

@ahartzog, if make the change you suggested

value={Platform.OS === 'ios' ? this.props.text : null}

the input field no longer gets cleared when I submit a message. Does this not happen for you? I'm on version 0.4.3.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aamir0]

With the suggested fix of value={Platform.OS === 'ios' ? this.props.text : null}, the box clears on Android, but it takes a second or so. If you start typing in that time (which isn't hard to do), the box won't clear at all.