React-native-navigation: `static options` does not work

[shercoder]

Issue Description

I'm trying to set static options in my screens and modals but those options are not used by RNN. The only time options work if I pass them via the push or showModal methods otherwise the title/buttons don't show up.

I am upgrading our app from a long overdue upgrade (from 1.1.486 to 7.0.0). I am upgrading it in increments so I don't miss anything. I ran into this issue as soon as I got to v2 but kept upgrading in the hope that the latest will fix the issue automatically because I didn't see anyone else running into this issue and didn't find anything when I searched the issues or googled the problem. I'm hoping I'm missing something simple here but can't figure out what.

Steps to Reproduce / Code Snippets / Screenshots

// FirstScreen.tsx
openModal = (): void => {
    Navigation.showModal({
        stack: {
            children: [
                {
                     component: { name: 'myModal' },
                },
            ],
        },
    });
};

// MyModal.tsx
export class MyModal extends NavigationComponent<Props> {
    static options(): {
        return {
            topBar: {
                leftButtons: [{
                    id: 'cancel',
                    text: 'Cancel',
                }],
            },
        };
    }
}

---

Environment

• React Native Navigation version: 7.0.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 11 Pro (13.2.2) Sim and Pixel 3 API 29 Emulator. Debug.

[danilobuerger]

Check out the playground app. It demonstrates how to use static options.

[support[bot]]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the wix-react-native-navigation tag.

[guyca]

@shercoder Notice that Android doesn't support textual left buttons ATM. If you were testing only on Android, this could be the reason why it seemed like static options were not applied.

[shercoder]

@guyca I'm testing it on iOS as well and same result. But that's good to know about Android. Also it's not just the buttons, I tried setting the title too and still no luck.

@danilobuerger I have been looking at the playground and I don't see any difference between what I did.

If it helps, we're using connect from react-redux to wrap the screen before exporting. Not sure if that could have any negative effect on RNN picking up options?

[jinshin1013]

I'm suspecting it's how you are registering your component and static options not being hoisted. Check out this. If that doesn't work, please provide a minimal reproduction for us to have a look 😄

[shercoder]

Haa yeah just came here to say that I discovered this https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over and I was able to fix it by copying the static options method.

[zorox-1]

@shercoder please share how did u do it ? im facing similar issue and nothing is working for me

[shercoder]

@zorox-1 like it's stated in above link I shared, you'll have to manually pass the static methods to your wrapped component if you're using HOC

import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}

[yusufyildirim]

As @jinshin1013 pointed earlier, If you use a wrapped component, it's sufficient to just pass the component itself as is as third argument to the registerComponent function. The third argument is called concreteComponentProvider in the documentation and here is the example of the usage. Also, there is another example in the playground app.

If you look closely to the codebase, you can see they're using that concreteComponentProvider parameter to hoist statics automatically. Am I right @guyca?

I'm leaving this comment here for future readers 😄