satya164 / react-navigation-addons Goto Github PK

Hey,

I'm using enhance on a TabNavigator and I get this error when I start the app.
I get this error in my js console:

Warning: Failed prop type: The prop `navigation.state.index` is marked as required in `CardStack`, but its value is `undefined`.
    in CardStack
    in Unknown (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (created by enhancedScreen(NavigationContainer))
    in enhancedScreen(NavigationContainer) (created by SceneView)

Using react-navigation v1.0.0-beta7
Any idea of what could do this?

Thanks!

i used npm i -s react-navigation-addons to install the package and it got installed too but when i import
import { enhance } from 'react-navigation-addons' it gives me unable to resolve module 'react-navigation-addons can anyone tell me how to sort this out ?

I get this error when trying to use react-navigation with a redux integration as well as with the enhance function provided by react-navigation-addons.

Any ideas?

react-native version: 0.48.3
react-native-cli: 2.0.1

i rendered a StackNavigator as the top-level navigator and i need nest a Tabnavigator.
But it crashed because of a infinite loop: " Cannot read propery 'forEach' of undefined", no matter i nesting tabNavigator in a Component or in a screen.
and it works perfect if i take off the react-navigation-addons, so i m sure it was the addons .

btw: at first when i was new to ReacNavigation， i didn't config the nesting navigator properly ,LOL.

i nest a TabNavigator in a component directly without passing navigation as props and set the router to overridden the wrappingComponentScreen's router.

like this：

<View><MainScreenTabNavigator /></View>

and the child tab ** will be rendered twice .**

anyway, it leads me to find the issue at last. lol

Encountered following error. any idea why?

react-navigation by default provides setParams in this.props.navigation. What is the difference between setParams and setOptions?

With recent release of beta 9 react-navigation, i find a breaking error because of this with redux integration. If i use this library for navigation.addListener, is there any recommendation how should i use this library, or with new navigation props i can use them?

Hi ! First, thank's for all your works about navigation with react-native!

react-navigation is a very cool project, I used NavigationExperimental before and it was easy to switch.
With this addons project, I think you really identified problems a developper can encounter with react-navigation.

I've got a focus / fetch issue with my app:
I have a TabNavigator with 4 tabs and each of them got a separate StackNavigator. By implementing addEventListener with focus event on the Stack, I can now re-fetch data when StackNavigator is back to root screen. That's great!

But I can't figure how to re-fetch data when Tab's focus event appear. In the component that instantiate the StackNavigator, I can receive the TabNavigator focus event, but I don't know how to access the screen created by the StackNavigator to call the fetch method. And I'm not sure if that's the good approach.

you compare whole state here in _handleNavigationStateChange function

      const focused = state.routes[state.index] === this.props.navigation.state;

but if we use custom navigation params, these objects can be different.
so it's better to compare key.

      const focused = state.routes[state.index].key === this.props.navigation.state.key;

let's say we have component that sets custom params and receives screenArg from parent screen via navigation action :

    this.props.navigation.setParams({ customX: this._foo, customY: this.props.bar });

here is my console eval output when first visit of the component.

_this.props.navigation.state === state.routes[state.index] 
false

_this.props.navigation.state.key === state.routes[state.index].key
true

state.routes[state.index].params
Object {screenArg: Object, customX: function, customY: function}
_this.props.navigation.state.params
Object {screenArg: Object}

Keys are equals, but whole states are different and screen will have "blur" event on launch.

Hi @satya164 , Thank you for this repo, I can install this package through yarn but the module can't work properly, could you please check it?

If I have a single stack Navigator, I don't get any runtime issues:

const SingleNavigator = enhance(StackNavigator)({
  ...
});

export default SingleNavigator;

But when I have multiple navigators nested, such as:

const AnotherNavigator = StackNavigator({
  ...
});

const MainNavigator = enhance(StackNavigator)({
  ...
  [key]: { screen: AnotherNavigator },
});

export default MainNavigator;

When I try to load up a route provided by AnotherNavigator I get the following runtime error:

I tried wrapping just the main navigator in enhance, both navigators in enhance, but they produce the same error.

import React, { Component, PropTypes } from 'react';

This is not longer valid with react 16. Please, use import PropTypes from 'prop-types'; instead.

Error line: https://github.com/satya164/react-navigation-addons/blob/master/src/enhanceScreen.js#L4

See also: react-navigation/react-navigation#923

I try to use

        this.props.navigation.addListener('focus', console.log('focus'));
        this.props.navigation.addListener('blur', console.log('blur'));
        this.props.navigation.addListener('change', console.log('change'));

but when I run, will show this error

TypeError: cb is not function
This error is located at:
in
enhancedNavigator(NavigationContainer) (at ScreenView.js:31)

How can I fix that

My app is structured as followed:

const AStack = enhance(StackNavigator)(ARoute, defaultNavigationOptions);

const BStack = enhance(StackNavigator)(BRoute, defaultNavigationOptions);

const CStack = enhance(StackNavigator)(CRoute, defaultNavigationOptions);

const Tab = TabNavigator(
  {
    A: { screen: AStack },
    B: { screen: BStack },
    C: { screen: CStack }
  },
  {
    tabBarPosition: "bottom",
     initialRouteName: "A",
    tabBarOptions: {
         ...
    }
  }
);

class App extends React.Component<{}, {}> {
  public render() {
  return (
      <Provider store={store}>
        <Tab />
      </Provider>
    );
  }
}

The problem: My app is launching with the 3rd tab (C) selected instead of the 1st one (A). The problem does not occur when I don't enhance the StackNavigator. Unfortunately, I'm not able to programmatically change the selected tab so I'm stuck...

Version used:

• React Navigation beta-15
• React Native 48.4

I'm noticing simply by using this package via enabling enhance(StackNavigator), that when I reset to a new screen, the old screen unmounts, then gets momentarily re-constructed, mounted, rendered and then unmounted again, after the new screen starts it's process. This causes problems with using componentWillMount() to handle redux/API data retrieval.... If I remove the 'enhance' from the navigation, everything works fine with no side-effects. I've included a sample project to show this behavior:

https://github.com/tmaly1980/TestNavApp

You'll notice that after Test2Screen is mounted, there's a NEW Test1Screen that is instantiated (after the original is unmounted), only to be unmounted immediately. I generate/echo random numbers in the component state to show this. The side effect will show up in the console.log/debugger (it's not visible but it's enough to screw up any redux calls tied to the mounted components).

Here's a sample console.log (I've marked where I press on the GOTO link with a manual log entry):

Unfortunately, this is a showstopper for my (real) app and I'm going to have to switch to wix react-native-navigation to get my app out.

I am using StackNavigator and tried to use navigation addons to know when component is rendering on goBack() but when I wrap my StackNavigator with the enhance method my component gets stuck in componentWillMount loop. componentWillMount just gets called over and over again and nothing happens. Android 6.0.1 and RN 0.44

"sdkVersion": "16.0.0",

can you pls update it to 21 / 22 ?

I was using enhance to use the .setOptions

I am trying to set the title

    this.props.navigation.setOptions({
      header: ( {state}, defaultHeader ) => {
        return ({
          ...defaultHeader,
          visible: true,
          title: _t("Recipient Details"),
          right: (<NavButton onPress={this.onNext} title={_t("Next")} disabled={false}/>),
        })
      }
    });

But nothing is happening