Opening a new screen takes more time with FluidNavigator than with StackNavigator

[jskidd3]

I am experiencing a white screen which shows for roughly 2 seconds when navigating to a FluidNavigator from another screen embedded inside a StackNavigator.

If this is the incorrect way to use the library, please could you explain how I can change the code in the Snack below so that it functions without the white screen?

https://snack.expo.io/B1ZDrVbZ7

[chrfalch]

Could it be that you are doing some work in componentWillMount that causes the delay?

[jskidd3]

@chrfalch If you check the Snack you'll see it's mostly the same code from Examples/src/FlatList.js, I've just changed it so that it's embedded in a StackNavigator and the FluidNavigator is that one that is navigated to.

[chrfalch]

And thats exactly the same we're doing in the example as well. Would it be possible to use the style parameter for the fluid navigator? You can see how this is done in the ShoeShop example:

const Navigator = FluidNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
}, {
  style: { backgroundColor: '#C14534' },
  navigationOptions: {
    gesturesEnabled: true,
  },
});

[jskidd3]

Not sure I'm following you exactly but I've just tried setting the background on the Snack and it doesn't seem to change anything. I've found a related closed issue which describes the same issue: #7

[chrfalch]

I'm not sure if the issue I'm seeing is a real issue ;-) Even the example app has a slight delay after clicking on the example buttons?

[jskidd3]

The library works fantastically well in terms of the the actual transitions etc, but a two second delay before the FluidNavigator loads won't be acceptable in our app at the moment. It looks like something has gone wrong with the app. If it was just a flicker/0.5 seconds it might be acceptable but it's a noticeable pause.

[chrfalch]

Ok, in the Snack provided I get around 0,5 secs, is this on Android or iOS?

[jskidd3]

I've only be able to test on iOS so far. This is a gif taken from the simulator:

[chrfalch]

It looks like it takes approx 0.5 secs? Same as I experienced running the Snack.

[chrfalch]

If I change FluidNavigator to StackNavigator I see that the speed is much better. I'll take a look and see, always happy to try to optimize the library!

[jskidd3]

Ok, well unfortunately that's still too long for our app. Thanks for your help anyway. If performance ever improves do let me know and we'll revisit the library.

[chrfalch]

(See last comment)

[jskidd3]

Thanks - it's truly a great library, am keen to use it if you manage to optimise this.

[Jonovono]

@chrfalch any solution to this? Am also navigating to a fluidNavigator from a stack and getting a white flash.

[balthazar]

Although it seems the code execution seems to call _interactionDonePromiseDone properly, the TransitionOverlayView keeps staying for 500ms before showing the screen.

[roytan883]

Same issue here, no matter how i optimize my code. Any click wait about 0.5s animation start. The animation looks good, but why must wait 0.5s ???

[chrfalch]

In the example it looks like this is solved for the latest releases, could you check and see? @roytan883, @jskidd3, @Jonovono

[superqianqian]

in the version 0.2.74 ，I don't think this problem has been solved

[superqianqian]

in ImageListScreen.js ，I set image max size is 100 , click will wait about 1.5s animation start,but set image max size is 3 ,click is normal

[iwikal]

Could be related to the fact that when you use react-navigation, screens don't unmount when you navigate away from them, but stay mounted somehow in the background until you return to them. It doesn't seem like fluid-transitions does that optimization.

[neyosoft]

Is there any update about the performance of the waiting time before the transition starts? This library is very helpful with very interesting transitions that we can implement in our production app.

[saurabh874]

@jskidd3 did you find any solution for this?
i am also facing same issue when navigating to a FluidNavigator from another screen embedded inside a StackNavigator