React-native-navigation: [v2] static get options() not working

[williamnvk]

After push from another screen, my action screen have this:

...
 static get options() {
    return {
      topBar: {
        title: {
          title: 'Testing static options',
        },
      },
    };
  }
...

This not work, but... if this props has passed on Navigation.push(...) works fine.
Another issue is, this.props.componentId is undefined.

---

Environment

• React Native Navigation version: 2.0.2628
• React Native version: 0.56
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Device

[jinshin1013]

Not sure if it's an issue but it's supposed to be static options() not static get options()... Not sure it would make any difference though.

[guyca]

change title to text

title: {
  text: 'Testing static options',
}

[williamnvk]

I did a mistake putting in title inside title, when i opened this post.

static options() {
    return {
      topBar: {
        title: {
          text: 'Testing static options',
        },
      },
    };
  }

Not Working.

static get options() {
    return {
      topBar: {
        title: {
          text: 'Testing static options',
        },
      },
    };
  }

Not working too.

[guyca]

change static get options() to static options(props)

[williamnvk]

@guyca not working too.

[guyca]

Well, you can take a look at the playground app - it's clearly working :)
Perhaps you'll notice something you're missing.
Perhaps you're component is wrapped with a HOC - static options don't propagate in the HOC chain

[hooligan]

@guyca I have the same problem of the static options not working. You mentioned that having a HOC prevents the static chain. Is there another way to achieve an options override per screen basis?

[jinshin1013]

You could use this library. I am also using HOC to wrap my screens and using this allow me to use static options in the screens.

[hooligan]

@jinshin1013 Awesome, I'll give that a shot!

[lukebrandonfarrell]

For anyone still having problems with this, your static methods can be copied into your higher component like so:

const withHoc = (Component, ...props) => {
  class MyHOCComponent extends React.Component {
     ...
     render(){
         ...
     }
  }

   MyHOCComponent.options = Component.options;
   return MyHOCComponent;
}

Another option would be to use hoist-non-react-statics, but if you don't want to add an extra dependancy then just do it manually like above :)

[bartronx7]

to anyone else who comes across this issue and is still struggling, here is the workaround that I came up with that gets me to be able to preserve my static options along with registerComponent and redux

const wrapWithProvider = (Component) => () => {
  // when react-native-navigation is doing its introspection to determine the options it will be inspecting this SFC
  const wrapped = (props) => <Provider store={store}><Component {...props} /></Provider>
  wrapped.options = Component.options
  return wrapped
}

Navigation.registerComponent('MyScreenComp', wrapWithProvider(MyScreenComp), () => MyScreenComp)

[daikaz]

change static get options() to static options(passProps)works for me