React-native-router-flux: REACT_NATIVE_ROUTER_FLUX_FOCUS is invoked at the beginning of scene transition

[alsh76]

Version

Tell us which versions you are using:

• react-native-router-flux v3.32.0
• react-native v0.30.0

Expected behaviour

REACT_NATIVE_ROUTER_FLUX_FOCUS should be invoked at the end of transition between scenes or we need to have other way to detect end of transition

Actual behaviour

It's not possible to detect end of transition between scenes (excluding setTimeout).
REACT_NATIVE_ROUTER_FLUX_FOCUS is invoked at the beginning of transitions, immediately after dispatching REACT_NATIVE_ROUTER_FLUX_PUSH and REACT_NATIVE_ROUTER_FLUX_BACK_ACTION

Steps to reproduce

Video Possible navigation issues in React Native/Redux app

    reducerCreate(params){
        const defaultReducer = Reducer(params);
        return (state, action)=>{
            switch (action.type) {
                case ActionConst.PUSH:
                    console.log(ActionConst.PUSH, action.key);
                    break;
                case ActionConst.FOCUS:
                    console.log(ActionConst.FOCUS, action.scene.sceneKey);
                    break;
                default:
                    console.log(action.type);
            }
            return defaultReducer(state, action);
        }
    }

    render() {
        const ReduxRouter = connect()(Router);
        const store = createStoreWithMiddleware(reducer);
        return (
        <Provider store={store}>
            <ReduxRouter createReducer={this.reducerCreate} >
                <Scene key="root" >
                <Scene key="Start" 
                                duration={2000}
                                initial={true}
                                 component={Start}
                                 title="Start"
                                 />

                <Scene key="Test" 
                                 duration={2000}
                                 component={Test}
                                 title="Test"
                                 />
                </Scene>
            </ReduxRouter>
        </Provider>
        )
    }

[Dean177]

Cant you use componentDidMount of the component you are navigating to?
What are you actually trying to do?

[alsh76]

@Dean177 just want to prevent component rendering during animation. I am using redux and do not manage rendering process manually. If large component is getting rendered in animation time it causes freezes.
So would be nice to have a callback for end of animation (transition between scenes). componentDidMountis called when animation starts. It does not help

[Dean177]

There is a section in the react native docs which should help you:
https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

[alsh76]

@Dean177 thank you for so useful link. I missed this part of RN docs.
i have found different solution recently - just rewrite animation for scenes like this
applyAnimation={(pos, navState)=>{Animated.timing(....}.start(callback)}
but using of InteractionManager.runAfterInteractions looks better and can be applied to resolving other animation issues

[Dean177]

No problem, happy to help

[rturk]

Hi @alsh76 looks like @Dean177 comments answered your question. If you don't have any other comments can you please close this?