Question about Actions.refresh

[compojoom]

I'm not sure if this was working the same on 3.x, but on 4 I noticed the following thing.

I have 3 scenes
A -> B -> C

Scene A is a list view.
Scene B shows a single Item
Scene C is an edit scene.

on Scene B I have this code:

	componentWillReceiveProps(nextProps) {
		if (this.props.company !== nextProps.company) {
			this.handleNavBar(nextProps.company);
		}
	}

	componentWillMount() {
		this.handleNavBar(this.props.company);
	}

	handleNavBar(company) {
        Actions.refresh({
            title: company.name,
            rightTitle: 'Bearbeiten',
            onRight: () => {
                this.props.editCompany(company.company_id);
                Actions.formCompany();
            }
        });
	}

Basically when the component is mounted we set a new title and we specify what should happen when you click the right button. This works fine. ComponentWillReceiveProps make sure that whenever our redux state is updated we update the Navbar header. That works.

However in Scene C I have this:

    componentDidMount() {
        let title = 'Betrieb hinzufügen',
            rightTitle = 'Speichern';

        if (this.props.editMode) {
            title = 'Betrieb Bearbeiten';
            rightTitle = 'Fertig';
        }
        Actions.refresh({
            title: title,
            rightTitle: rightTitle,
            onRight: () => this.onRight(),
            backTitle: 'Abbrechen'
        });
    }

I'm again modifiy the tilte and right button. The problem is that in the edit Scene I do an update to the company. When I do this scene's B componentWillreceiveProps is updated with the new company. the handleNavBar function is called and we call Actions.refresh on scene B. But it doesn't refresh the navbar on Scene B, but on Scene C.

So my title changes to "Company name" and my right button changed to "edit" and not "save"... Obviously the action is also different.

Is this the expected behavior and is there any way around this other than using my own Navbar or just not updating the on componentWillReceiveProps?

[aksonov]

refresh within componentDidMount or componentWillReceiveProps is definitely anti-pattern. All you need is Redux or MobX and change state of your app accordingly and define static onRight, rightTitle, title functions within your component that will display that state. For MobX, RNRF allows wrapping all navbar by 'observer', so it will be fully dynamic - i.e. updated automatically.

[compojoom]

ok, Do you have an example?
I remember trying the static onRight in the past, but the issue was that I didn't have access to my component save function as this was not pointing to the component within the static function

[aksonov]

Yes, it is good question, it would be great to create separate issue for this - 'access to the component props from the navbar' I will think how to achieve that.

[tendolukwago]

@aksonov going to start an issue specifically based off this.

[alfonsosn]

Any progress on this issue? I found this answer helpful: 1516