Dynamic Tab Items

[cameronbell]

Version

v4.0.1

Expected behaviour

I'm trying to have a different right tab item for each tab.

Actual behaviour

I'm trying to use renderRightButton but the value of Actions.currentScene each time the renderRightButton prop is called is still the value of the previous screen. Is there a proper way to do this?

<Tabs
    key="record"
    renderRightButton={() => {
        
        // Always prints the tab the user was previously on instead 
        // of the tab they just navigated to
        console.log("Current scene: ", Actions.currentScene); 
        
        return Actions.currentScene === "profile" ? <RightButtonSave /> : null;

    }}
>

[aksonov]

Duplicate of #3165

[cameronbell]

Thanks! #3165 was helpful for getting the currentScene within the children scenes of my Tabs scene.

It's still unclear to me how to properly use the current scene stored in mobx to create dynamic tab items, because when renderRightButton is called the value of the observable 'scene' variable in mobx hasn't been updated yet.

Is there a way to refresh the props of the parent Tabs scene from a child scene?

I'm currently calling Actions.refresh() at the top of the render function of my child scene which is working, but I'm not sure if this is the ideal way of achieving this.

[aksonov]

I think it is OK

[cameronbell]

Just noticed that calling Actions.refresh() at the top of the render function like that is giving me the following warning:

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Thanks for your help

[aksonov]

Make sure to wrap it with setTimeout and not in render (but componentDidMount) or static onEnter