How To Add NavigationOptions To A Memoized React Functional Component?
I'm using flow types and have a memo wrapped functional component, however when trying to assign navigationOptions for react-navigation, flow is just going haywire:
On my component
const navigationOptions = ({navigation}) => ({}) // more stuff
const Foo = memo((props: IProps) => {
...
})
/*
Here it breaks down
Cannot assign `navigationOptions` to `Foo['navigation...']` because property `navigationOptions` is missing in `React.AbstractComponentStatics`
*/
Foo.navigationOptions = navigationOptions
export default Foo
Even if I type cast it to any, and then try to use it on my router:
/*
Cannot call `createStackNavigator` with object literal bound to `routeConfigMap` because in property `Foo.screen`: Either property `navigationOptions` is missing in AbstractComponent [1] but exists in `withOptionalNavigationOptions` [2]. Or property `router` is missing in AbstractComponent [1] but exists in `withRouter` [3].Flow(InferError)
*/
const FooStack = createStackNavigator({
Foo: { screen: FooScreen }
}, stackNavOptions)
How am I supposed to properly apply types here?
Answer
This is an expected behaviour. If you actually check React$AbstractComponentStatics
you'll see that there are very few allowed properties, such as displayName
which is valid. They've even removed propTypes which even though it's valid it's not encouraged which is why it has been removed.
To get around this you can use a suppression comments to mark it as a false positive,
// $FlowExpectedError navigationOptions
Foo.navigationOptions = navigationOptions
Flow supports $FlowFixMe
and as of version 0.125.0, $FlowIssue
and $FlowExpectedError
by default to suppress errors.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM