search

expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

Flow errors #87

Open kpyorala opened 8 years ago

kpyorala commented 8 years ago

I have Flow version 0.32.0 and ex-navigation version 1.5.26. When I run flow in my project root I got this:

node_modules/@exponent/ex-navigation/src/ExNavigationAlertBar.js:153
153:     this._textContainerRef.measure((l, t, w, height) => {
         ^ call of method `measure`. Function cannot be called on
153:     this._textContainerRef.measure((l, t, w, height) => {
         ^ property `measure` of unknown type

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:435
435:         <AlertBarComponent
             ^ React element `AlertBarComponent`
435:         <AlertBarComponent
             ^ React element `AlertBarComponent`. Expected React component instead of
431:     const AlertBarComponent = this.props.alertBarComponent || this.context.alertBarComponent || ExNavigationAlertBar;
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ mixed

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:435
435:         <AlertBarComponent
             ^ React element `AlertBarComponent`
435:         <AlertBarComponent
             ^ React element `AlertBarComponent`. Expected React component instead of
431:     const AlertBarComponent = this.props.alertBarComponent || this.context.alertBarComponent || ExNavigationAlertBar;
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `alertBarComponent` of unknown type

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:472
472:       <HeaderComponent
           ^ React element `HeaderComponent`
472:       <HeaderComponent
           ^ React element `HeaderComponent`. Expected React component instead of
464:     const HeaderComponent = this.props.headerComponent || this.context.headerComponent || NavigationBar;
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ mixed

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:472
472:       <HeaderComponent
           ^ React element `HeaderComponent`
472:       <HeaderComponent
           ^ React element `HeaderComponent`. Expected React component instead of
464:     const HeaderComponent = this.props.headerComponent || this.context.headerComponent || NavigationBar;
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `headerComponent` of unknown type

node_modules/@exponent/ex-navigation/src/drawer/ExNavigationDrawer.js:165
165:         {items.map(item => this.renderItemContent(item))}
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`
165:         {items.map(item => this.renderItemContent(item))}
                                                       ^^^^ undefined. This type is incompatible with
170:   renderItemContent(drawerItem: Object) {
                                     ^^^^^^ object type

node_modules/@exponent/ex-navigation/src/drawer/ExNavigationDrawerLayout.js:78
 78:     return this.props.items.map((item, index) => {
                ^ call of method `map`. Method cannot be called on
 78:     return this.props.items.map((item, index) => {
                ^^^^^^^^^^^^^^^^ property `items` of unknown type

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:198
198:     return tabItem && tabItem.renderLabel ? tabItem.renderLabel(options) : null;
                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `renderLabel`. Function cannot be called on
198:     return tabItem && tabItem.renderLabel ? tabItem.renderLabel(options) : null;
                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `renderLabel` of unknown type

node_modules/@exponent/ex-navigation/src/tab/ExNavigationTab.js:171
171:         {tabs.map(tab => this.renderTab(tab))}
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`
171:         {tabs.map(tab => this.renderTab(tab))}
                                             ^^^ undefined. This type is incompatible with
176:   renderTab(tabItem: Object) {
                          ^^^^^^ object type

Found 9 errors

Am I missing some configurations or what is the problem?

kpyorala commented 8 years ago

Issue #86 is about the same thing I think

brentvatne commented 8 years ago

thanks @kpyorala - I haven't run this on 0.32 yet, that's a tricky thing about Flow -- hard to keep up with versions! could you possibly submit a PR to fix these and update us to 0.32?

grabbou commented 7 years ago

We have experienced this issue internally and I am working on a fix today. Will send over a pull request updating to latest Flow.

pstockley commented 7 years ago

If you are fixing this can you also make sure anywhere the code specifies a react component for a prop it uses the type React.Element<*>. That way the prop types will propagate correctly. Many places it is ReactElement<{}> which breaks prop type checking.

jacortinas commented 7 years ago

Hi, I'm also running flow (version 0.33.0) on a project using ex-navigation and I'm getting a lot of flow errors from inside of ex-navigation (version 2.1.3). I understand if the errors are hard to fix, but is there anything I can add to my .flowconfig to ignore these errors?

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:372
372:         ((parentNavigator: any): ExNavigationDrawerContext).setNavigatorUIDForCurrentItem(this.state.navigatorUID);
                                      ^^^^^^^^^^^^^^^^^^^^^^^^^ identifier `ExNavigationDrawerContext`. Could not resolve name

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:495
495:         <AlertBarComponent
             ^ React element `AlertBarComponent`
495:         <AlertBarComponent
             ^ React element `AlertBarComponent`. Expected React component instead of
486:     const AlertBarComponent = this.props.alertBarComponent || this.context.alertBarComponent || ExNavigationAlertBar;
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ mixed

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:495
495:         <AlertBarComponent
             ^ React element `AlertBarComponent`
495:         <AlertBarComponent
             ^ React element `AlertBarComponent`. Expected React component instead of
486:     const AlertBarComponent = this.props.alertBarComponent || this.context.alertBarComponent || ExNavigationAlertBar;
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `alertBarComponent` of unknown type

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:537
537:       <HeaderComponent
           ^ React element `HeaderComponent`
537:       <HeaderComponent
           ^ React element `HeaderComponent`. Expected React component instead of
524:     const HeaderComponent = this.props.headerComponent || this.context.headerComponent || NavigationBar;
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ mixed

node_modules/@exponent/ex-navigation/src/ExNavigationStack.js:537
537:       <HeaderComponent
           ^ React element `HeaderComponent`
537:       <HeaderComponent
           ^ React element `HeaderComponent`. Expected React component instead of
524:     const HeaderComponent = this.props.headerComponent || this.context.headerComponent || NavigationBar;
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `headerComponent` of unknown type

node_modules/@exponent/ex-navigation/src/drawer/ExNavigationDrawer.js:168
168:         {items.map(item => this.renderItemContent(item))}
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`
168:         {items.map(item => this.renderItemContent(item))}
                                                       ^^^^ undefined. This type is incompatible with
173:   renderItemContent(drawerItem: Object) {
                                     ^^^^^^ object type

node_modules/@exponent/ex-navigation/src/drawer/ExNavigationDrawerLayout.js:61
 61:       <View style={[styles.navigationViewContainer, this.props.style]}>
                                                                    ^^^^^ property `style`. Property not found in
 61:       <View style={[styles.navigationViewContainer, this.props.style]}>
                                                         ^^^^^^^^^^ object type

node_modules/@exponent/ex-navigation/src/drawer/ExNavigationDrawerLayout.js:78
 78:     return this.props.items.map((item, index) => {
                ^ call of method `map`. Method cannot be called on
 78:     return this.props.items.map((item, index) => {
                ^^^^^^^^^^^^^^^^ property `items` of unknown type

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 51:   renderLabel?: (routeParams: any) => ?React.Element<any>,
                                            ^^^^^^^^^^^^^^^^^^ null. This type is incompatible with
 35:   renderLabel?: (scene: Scene) => React.Element<*>;
                                       ^^^^^^^^^^^^^^^^ React$Element. See: node_modules/react-native-tab-view/src/TabBarTop.js:35

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 51:   renderLabel?: (routeParams: any) => ?React.Element<any>,
                                            ^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with
 35:   renderLabel?: (scene: Scene) => React.Element<*>;
                                       ^^^^^^^^^^^^^^^^ React$Element. See: node_modules/react-native-tab-view/src/TabBarTop.js:35

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `getLastPosition`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `jumpToIndex`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `layout`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `navigationState`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `position`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 80: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `subscribe`. Property not found in. See: node_modules/react-native-tab-view/src/TabBar.js:80
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `getLastPosition`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `jumpToIndex`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `layout`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `navigationState`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `position`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/sliding-tab/ExNavigationSlidingTab.js:223
223:         <TabBarComponent
             ^ React element `TabBarComponent`
 34: type Props = SceneRendererProps & {
                  ^^^^^^^^^^^^^^^^^^ property `subscribe`. Property not found in. See: node_modules/react-native-tab-view/src/TabBarTop.js:34
225:           {...tabBarProps}
                   ^^^^^^^^^^^ spread of object literal

node_modules/@exponent/ex-navigation/src/tab/ExNavigationTab.js:173
173:         {tabs.map(tab => this.renderTab(tab))}
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `map`
173:         {tabs.map(tab => this.renderTab(tab))}
                                             ^^^ undefined. This type is incompatible with
178:   renderTab(tabItem: Object) {
                          ^^^^^^ object type
zoontek commented 7 years ago

Any ETA on this? 😃

excitement-engineer commented 7 years ago

I am also running into this issue with flow version 0.35.0.

I also got the following errors: 

node_modules/react-native/Libraries/EventEmitter/EmitterSubscription.js:0
EmitterSubscription. Duplicate module provider
current provider. See: node_modules/fbemitter/lib/EmitterSubscription.js:0

node_modules/react-native/Libraries/EventEmitter/EventSubscription.js:0
EventSubscription. Duplicate module provider
current provider. See: node_modules/fbemitter/lib/EventSubscription.js:0

node_modules/react-native/Libraries/EventEmitter/EventSubscriptionVendor.js:0
EventSubscriptionVendor. Duplicate module provider
current provider. See: node_modules/fbemitter/lib/EventSubscriptionVendor.js:0

node_modules/react-static-container/lib/StaticContainer.react.js:0
StaticContainer.react. Duplicate module provider
current provider. See: node_modules/react-native/Libraries/Components/StaticContainer.js:0

I was able to ignore the errors by adding the following to my .flowconfig.

[ignore]
; ex-navigation isn't compatible with the newest flow version, ignore it
.*/node_modules/@exponent/*

; These errors occur from importing ex-navigation
.*/node_modules/react-static-container/.*
.*/node_modules/fbemitter/lib/EmitterSubscription.js
.*/node_modules/fbemitter/lib/EventSubscription.js
.*/node_modules/fbemitter/lib/EventSubscriptionVendor.js

Note with this solution you need to force flow to ignore any imports from ex-navigation because it won't be able to find the module. Ignore as follows:

// $FlowFixMe
import {} from '@exponent/ex-navigation';

Are you still working on this @grabbou ?