React-native-router-flux: Actions.pop(): weird transitions between scenes

[brien-crean]

Version

Tell us which versions you are using (react native 0.26 is required for v3):

• react-native-router-flux v3.26.24
• react-native v0.26.3

Expected behaviour

Smooth transition between two scenes without clunky overlay during transition.

Actual behaviour

A partial section of the Tab 2_1 screen is overlaid clunkily over the UI when transitioning back to the main screen. I have included an animated GIF of the issue

Steps to reproduce

1. Run Example project in this repo
2. On opening screen, click "Go to TabBar page" which opens Tab 2_1
3. Click "Back" and observe that a partial section of the Tab 2_1

A similar issue can also be seen when after pushing a scene, popping and pushing another scene quickly, which can bee seen the GIF below.

First Scene 2 is pushed onto the stack. Then Scene 2 is popped and Scene 1 is then pushed onto the stack, however Scene 2 can be seen briefly before Scene 1 is rendered, as if it was left behind on the stack.

Is this something to do with Navigation Experimental or react-native-router-flux?

[aksonov]

I noted this as well, but i believe it is NavigaitonExperimental related. I think you should build some prototype based on UIExplorer RN demo and check behaviour there.

[brien-crean]

@aksonov Good idea, I'll try that and see if I get the same results and update this issue.

I had seen this issue for a while and stuck to RNRF v2 until now because of it. I thought the issue was related to this Navigation Experimental fix added in RN 0.26 but doesn't seem so.

didFocus event should fired after transition finishes. included in RN 0.27 also sounds promising

[BrainTrain3000]

I've experienced this issue, and it seems to occur when Scene 1 is clicked before Scene 2 unmounts (in your gif example). Throw a console.log on componentWillUnmount on Scene 2 and you'll see what I mean. Not sure if that's self-evident or if it helps, but just thought I'd mention it!

[zccan]

@BrainTrain3000 I get the same issue. particularly, this makes user very confused when he quickly touch scenes that wraps in a listView, because the previous subView doesn't have enough time to unmount.

[oziks]

And if you put a different key attribute on your <View /> component, you should not have this problem?

[brien-crean]

I haven't had a chance to see if this issue is fixed in the latest Navigation Experimental but it seems that it is possible to disable transition animations on every scene by passing duration as 0. This avoids the flaky transition overlay in my GIFs above

[afilp]

Is there a resolution to this? I get wrong screens because I pop to the same component but with different props. However, since the previous props are not yet "unmounted" if i quickly press a button then I get the wrong children view (the previous one).

How can this be solved?

[brien-crean]

@af7 Not sure if this has been resolved. Have you tried as a workaround disabling the animations? I have found that this issue seems to happen most frequently when there is a TabBar on one of the components. So as a workaround I disabled the animations on the TabBar itself and enabled animations on other scenes.

In the below you can see duration is set to 0 on the entire TabBar and enabled on the FAQ scene which can be navigated to via the Home Screen. Which results in an animation when the FAQ is pushed onto the stack, but no animation when it is popped off. Its a compromise

<Scene key="mainScreen" type="reset" tabs={true} component={TabBar} duration={0} >
  <Scene key="home"  hideNavBar={true} title="Home" iconName="home" component={HomeScreen} icon={TabIcon} />
  <Scene key="messages" hideNavBar={true} title="Messages" iconName="list-ul" component={MessagesScreen} icon={TabIcon} />
</Scene>

<Scene key="FAQ" component={FAQ} hideNavBar={true} type="push" duration={300} />

[afilp]

@brien-crean Thanks, disabling the animation (duration={0}) seems to work (cannot be sure 100% but in most tests it worked). Still a solution needs to exist because we all would like to use the animations.

[brien-crean]

@af7 I haven't found a proper solution, but its possible to leave animations enabled on all other scenes that are not part of the TabBar. The transitions look okay to me so far but I haven't had time to investigate a proper solution or if the latest versions of RNRF and RN have resolved the issue. I am on RNRF 3.30.2 and RN 0.29.0, I will be updating soon

[mpochron]

+1 , any solve for that? animation is need for between scenes liistview and view.

[lin493369]

+1. Waiting for a solution.

[Parrryy]

+1. Waiting for a solution.

[vexsnare]

+1. Waiting for a solution.

[aksonov]

It happens because of RN Navigation Experimental. This library doesn’t do any rendering/transition.

On 17 Feb 2017, at 00:09, Vinay Saini [e-mail] wrote:

+1. Waiting for a solution.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/800#issuecomment-280493633, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcSC8T_zqimOQ9QO7oJIsoeSP6cl9ks5rdNcMgaJpZM4Ixihv.

[vexsnare]

@aksonov For time being any workaround for that or disabling transition is the only solution?

[unicornRainbows]

Also have seen the issue plenty of times... setting duration={0} solves the issue but then removes the much needed animations. The UX guys are stressing! :)

[exityan]

In my case, passing any value other than 0 to duration, e.g. duration={300}, also worked without sacrificing animation effects.
I'm on RN 0.37.0 and RNRF 3.37.0.

[guimello]

I have the same issue using RN 0.37. even if I set duration to 100ms. The animation is the issue here. If you are fast enough, you can see this happening.

The problem happens to me when I have a listview, them the user taps an entry and goes to it. Tapping back and tapping an entry on list very fast causes the same scene (and components of course) that is being poped to be reused, therefore no componentWillMount is fired, etc.

Still looking for a solution other than duration={0} on my transitions

[vexsnare]

I am now migrating to React Navigation It looks really cool.

[autovalue]

+1, this is a pretty big issue that we've been having for a while now.

[jonathanroze]

+1. Waiting for a solution. It's a big issue!

[damathryx]

solutions for these?

[vance-liu]

big pro, Waiting for a solution?

[vexsnare]

https://github.com/react-community/react-navigation

[Borisboky]

Setting duration to 0 doesn't remove transition animation in my case. Why?

<Scene key="scene_condition"
                   tabs={true}
                   type="reset"
                   tabBarStyle={styles.tabBarStyle}
                   tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
                   navigationBarStyle={styles.navBarStyle}
                   titleStyle={styles.navBarTitleStyle}
                   hideTabBar={false}
                   hideNavBar={true}
                   tabBarPosition="bottom"
                   labelStyle={{fontSize: 7}}
                   title=""
                   duration={0}>
                <Scene key="scene_condition_car"
                       tabBarLabel={gettext("Model")}
                       title={gettext("Model")}
                       component={Car}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="directions-car"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}
                       duration={0}/>
                <Scene key="scene_condition_checks_features"
                       tabBarLabel={gettext("Equipment")}
                       title={gettext("Equipment")}
                       component={Equipment}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="playlist-add-check"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}
                       duration={0}/>
                <Scene key="scene_condition_specs"
                       tabBarLabel={gettext("Specifications")}
                       title={gettext("Specifications")}
                       labelStyle={{fontSize: 18}}
                       component={CarSpecs}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="control-point-duplicate"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}
                       duration={0}/>
                <Scene key="scene_condition_picture"
                       tabBarLabel={gettext("Pictures")}
                       title={gettext("Pictures")}
                       component={CarPicture}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="photo-camera"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}
                       duration={0}/>
                <Scene key="scene_condition_damages"
                       tabBarLabel={gettext("Damages")}
                       title={gettext("Damages")}
                       component={Damages}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="broken-image"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/left.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}/>
                <Scene key="scene_condition_close"
                       tabBarLabel={gettext("Close")}
                       title={gettext("Close")}
                       component={Close}
                       icon={TabIcon}
                       iconTittleHidden
                       iconName="done"
                       leftButtonIconStyle={styles.moduleButton}
                       leftButtonImage={require('./img/icons/list.png')}
                       onLeft={(props) => requestOverview(props.request.id)}
                       navigationBarStyle={styles.navBarStyle}
                       titleStyle={styles.navBarTitleStyle}/>
            </Scene>

[alam-technobd]

How to update the previous Screen on
Actions.pop( { refresh: { data: 'Data after pop', title: 'title after pop' }, key: null } )}
What should I do in my previous screen where pop back.