React-native-gifted-chat: Transitions on iOS are extremely glitchy when moving to gifted-chat

[ghost]

Issue Description

When navigating the a page containing the <GiftedChat component the transition is extremely buggy, the page behind moves over slightly to the left and then after 2-3 seconds the chat component instantly flashes onto the screen. This is happening with every animation type under SceneConfigs in which there is a movement transition. I have not tested with FadeAndroid.

The Footer for the <GiftedChat also does not occur until this delay is finished.

NOTE: I added a custom component on the top of the screen with a fixed height and absolute positioning of 64 (A navigation bar) and it transitions over smoothly, it's only the <GiftedChat component with a problem.

NOTE2: A blank array of messages on start-up time does not fix the issue, it takes roughly 600ms after the transition completes to snap into place.

Steps to Reproduce / Code Snippets

Just use the example code with React-natives Navigator component. Move to it using push({...}) and the problem occurs.

Expected Results

A smooth transition

Additional Information

• React Native version: 0.32.0
• react-native-gifted-chat version: 0.0.10
• Platform(s) (iOS, Android, or both?): iOS (Simulator and Device)

[FaridSafi]

Hello,
I suggest to try https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions in your container
Also, you can consider testing on a device with Release build to increase performance

[jonathanglasmeyer]

I experience the same issue. I have implemented the linked performance tweets and the problem appears in a release build.
It also appears when showing the chat page initially (without transitioning to it): it takes about 600ms to render the chat bubbles, resulting in a very jerky experience.
Any pointers how to tackle this? I'd be happy to PR but a direction which component might introduce this delay would be helpful.

Edit: looked at the code, found the source of my problem. Chat is only show when runAfterInteraction fires. This means that during a transition the screen will only show nothing (or a loading indicator?) and only then render the chat bubbles. It'd be nice to make this behaviour configurable, for me it seems that this should be a user responsibility.

[stantoncbradley]

@jonathanewerner can you elaborate on how you solved this? Where did you move the state the was set inside runAfterInteraction?

EDIT: nevermind, literally all I had to do was remove runAfterInteraction

[kfiroo]

Maybe related https://github.com/FaridSafi/react-native-gifted-chat/issues/377

[cooperka]

This is hopefully fixed now on master. As @iclems mentioned here, the change is a good workaround that should make things better for most people, but it could lead to less performant animations in some cases. PRs to improve performance are always welcome!

Please try it out and let us know if the new code didn't actually resolve this particular issue.

[abeltje1]

I'm experiencing extremely slow transitions with GC starting from v0.1.5 (where runAfterInteractions was deleted). I tried every v0.2.x, but the problem stays. It literally takes 3-4 seconds to go from one screen to the other and it looks horribly glitchy/buggy. 0.1.4 works fine, but on Android also has slow transitions from time to time. Did anyone by any chance find a proper solution for this?

Cheers

[cooperka]

Hi @abeltje1, what navigation library are you using? Can you try running a Release build with chrome debugging turned off? Sometimes the debugger causes things like that.