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

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)

[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.

[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.