"The component doesn't depend from any Flux implementation and allows to intercept all route actions by adding Actions.onPush/onReplace/onPop handlers from your store(s)"

I think an example on how to accomplish this would be very valuable. From inspecting the code, I have an idea on how I could do it, but I'm not sure if it's the proper way.

do you have a working example of action (simple ones will do like pop) from a page?

I encountered this first in a project that I was working on but wanted to verify it by trying out your example app.

Basically when using the tabs, the first reroute you do away from the root doesn't have a navbar. Here is my process:

Launch Example App:

Go to TabBar page:

Click on next screen for tab1_1 (this is where the issue is! Navbar no longer there):

Click back:

Click on next screen for tab1_1 (Now the Navbar shows up just fine...):

Thanks for all of your contributions to the RN ecosystem. I'm going to dig into this myself a bit and see if I can find what is causing this.

e.g.

For a tab bar view with 5 categories, 5 Routers need to be present for these 5 navigation pages.

Is it able to make 5 different routers in the same app ??

<Schema name="default" sceneConfig={Animations.FlatFloatFromRight} />

This was working more or less with RN 0.12 (the transition was translating but opacity was not happening). Now with RN 0.13 there is simply no effect. I can see a delay waiting for effect to finish and than it just switches screens.

I want to remove the top navigation bar.
I have tried to set showNavigationBar={false} on the route, but its still there.
Am I missing something obvious?

Thanks for your work on the new version. It looks promising.

I need to have my tabs down a ways in the component hierarchy. I'm experimenting with your Example to see if that can work.

First, I replaced all the tab stuff in the Example class with just this:

<Route name="tabbar" component={TabContainer} />

Then I moved all the rest of the tab stuff to TabContainer:

        return (
          <Router footer={TabBar} showNavigationBar={false}>
              <Route name="tab1" type="switch" icon={TabIcon} title="Tab #1" >
                  <Router>
                      <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                      <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                  </Router>
              </Route>
              <Route name="tab2" type="switch" icon={TabIcon} title="Tab #2" hideTabBar={true} component={TabView} />
              <Route name="tab3" type="switch" icon={TabIcon} title="Tab #3" component={TabView}  />
              <Route name="tab4" type="switch" icon={TabIcon} title="Tab #4" component={TabView} />
              <Route name="tab5" type="switch" icon={TabIcon} title="Tab #5" component={TabView} />
          </Router>
        );

The first problem was I couldn't get Schema to work so in the above code, I have worked around that by expanding the tab schema out in each tab. I first tried just schema="tab" and got the error No schema=tab is defined for route=tab.
Then I tried defining the schema in TabContainer as the first child of . Then I get a console.error: No icon class is defined for undefined.

Problem 2: The above code mostly works but if I wrap it all in a nothing renders. EDIT: <View style={{flex: 1}}> works.

Problem 3: The Back button in the TabView screen only works if you're on Tab 1. Once you switch to a different tab, clicking Back triggers the error: Cannot pop navigator with less than 1 screens

Problem 4: When I set initial={true} on Tab 3, the view initially is set to Tab 3, but the TabBar icon still shows Tab 1 is selected.

Is there a way to include a swipe gesture to go back? For instance, if I use the FloatFromRight animation, I would like the user to be able to swipe right to go back.

Great package btw!

hi thank you for this awesome plugin
I have a container with two scenes in it. I want to change the scenes with a button in the first scene. When I press this button and execute Actions.scene2() the scene changes but the selected tab in the tabbar won't change.
Is there a method to do this?

The problem is that if use react-redux/native and wrap Router component with connect method from react-redux/native it will not be updated. So how I can update it ?

I am developing for Android.
When I am using the following router code

<Router>
    <Route name="launch" component={HomePage} initial={true} title="Launch"/>
    <Route name="settings" component={SettingsPage} title="Settings" />
</Router>

When I launch the app and is in the HomePage, everything is well and fine.

But when I navigate to the settings page the navbar disappears even though it is there in the code of the component.

Here is the layout for the settings page

<DrawerLayoutAndroid
          drawerWidth={300}
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => navigationView}
          ref={'DRAWER'}>
            <View style={{flex: 1}}>
                <ToolbarAndroid
                  title="Test"
                  actions={[{title: 'Settings'}]}
                  onActionSelected={this.onActionSelected}
                  style={{backgroundColor: '#FF0000',height: 56}}
                  navIcon={require('../../assets/images/hamburger.png')}
                  titleColor='#FFF'
                  onIconClicked={this.onIconClicked}>
                </ToolbarAndroid>

                <ScrollView
                    style={styles.settingsScroller}>
                    <Text>Settings</Text>
                </ScrollView>
            </View>
        </DrawerLayoutAndroid>

Am I doing it wrong or is it a bug ?

When I bundle/minify my app, this library breaks. For some reason, the component names don't get added to the Actions object after minification.

Object.keys(Actions) prior to minification:

["push", "PUSH", "pop", "POP", "dismiss", "DISMISS", "preSplash", "splash", "login", "register", "etc."]

Object.keys(Actions) after minifcation:

[ 'push', 'PUSH', 'pop', 'POP', 'dismiss', 'DISMISS' ]

Is it possible to intercept a route transition and check if it's ok to proceed? I would like to allow the anonymous users to navigate the app except for a few pages where you must first authenticate. I would like to pop up a login modal view then redirect to the original route.

Hi,

Maybe this is a dumb question because I'm not an expert with Flux.

My react-native-router-flux is inside my drawer like this :

<Drawer>
    <Router />
</Drawer>

In my drawer I want to know my current routes with getCurrentRoutes(). Is it possible ?

Thank you !

Is there a way to change routes without having a transition animation? I don't want a slideRight or slideFromBottom. I just want the new router to appear.

Hi,

I'm trying to write test in a component using this plugin.

When requiring react-native-router-flux inside a Jest Test, I got
Error: src/actions/__tests__/router-test.js: src/actions/router.js: node_modules/react-native-router-flux/index.js: node_modules/react-native-router-flux/__mocks__/react-native.js: Cannot find module 'react' from 'node_modules/react-native-router-flux/__mocks__/react-native.js'

Do you have any clue ?

Thanks

Hi guys,

I'm going to release 1.0 version which will not depend from any flux implementation and support inner Router tag to build tab bars with nested own navigators, but i need help - testers to give me feedback.

Hi,

Thanks for the great work.

My intention is that after a few push navigations that result to stack like this: [page1, page2, page3], and upon clicking a button on page3 I want to show page1 and reset the stack to: [page1]

I have tried these methods:

1. on page3 render method: <Button onPress={()=>Actions.reset()}>OK</Button>
2. on page3 render method: <Button onPress={()=>Actions.reset('page1')}>OK</Button>
3. on page1(initial page): Add type='reset' attribute for page1 Route defined in the main source code (index.ios.js)

However all methods result in this error:

Here is the debug console from chrome:

It seems that page.initial = undefined hence unable to find the route, could this be the cause? if yes, how should I rectify it? if not, which part am I doing wrong?
let me know if you need more information.
thank you.

PS: I installed version 0.3.4 if that helps.

Hi,

Is there a way to include icons instead of text on each tab?

Thanks.

Is there a way to set routes inside of the tab container? I have a list inside of a tab, what I want is to show another view when the user taps on an item on the list. I tried this:

This is the index file:

                <Route name="tabbar" >
                    <Container component={Tabs.Container}>
                        <Route name="songs" component={SongRoutes} title="Songs" icon={Tabs.Icon} image={require('./icons/quaver11.png')} />
                        ...
                    </Container>
                </Route>
            </Router>

And inside the SongRoutes component I have this:

    <View style={styles.container}>

            <Router>
                <Schema name="default" sceneConfig={Animations.FlatFloatFromRight} />

                <Route name="songlist" component={SongList} initial={true} />
                <Route name="songview" component={SongView}  />
            </Router>

        </View>  

I'm getting the list of elements displayed correctly, here's the callback for when the user taps on the list.

_onPressButton(){
    console.log(Actions.songview);
    Actions.songview({data:'This is some data!'});
}

But when taping on an item I'm getting this error:

[tid:com.facebook.React.JavaScript] 'No route is defined for name: songview'

Am I doing something wrong? Any help would be appreciate.

causes error like this:
[BABEL] {$PRJ_DIR}/node_modules/alt/lib/index.js: Unknown option: {$PRJ_DIR}/node_modules/alt/.babelrc.stage

When I set initial={true} on Tab 3, the view initially is set to Tab 3, but the TabBar icon still shows Tab 1 is selected.

This is simple to reproduce in the current example. I have it in my repo here

On Android, the following error occurs:

undefined is not a function (evaluating 'buildStyleInterpolator(FlatFadeToTheUp)')

It appears the buildStyleInterpolator module cannot be found: line 4 & line 5 in Animations.js

I can't seem to find an example for defining the style for the NavBar?

I followed the example and I have a NavBar and a Route that uses that NavBar.

Is there any way I can access state from that Route at the NavBar level?

Hey,

I've been using this router and it's been doing all I want. It works fine.

But whenever I call an action. for example: Actions.ACTION_NAME();

it throws a warning in the console:

"An action was called but nothing was dispatched" from WarningBox.js

Am I doing anything wrong? Should I just ignore this warning?

It seems to be white right now, how can you use a different color?

I am trying to implement a drawer menu with this router. The problem is that I do not want to have the drawer for sign in and launch screens and want all other screens to share the same drawers (do not want to apply a new drawer for each route).

Any Idea on how I can implement this?
I have tried using a container but ended up having a vertical split screen with route on top and drawer on bottom.

I try to use this module in iOS project, and it running very well.
but when I try to use it in Android project, it has some strange problem.
So I want to know are there any plans to add Android support?

Thanks for providing such a cool module.

Is there a way to customize the left button with either renderBackButton or renderLeftButton? I tried by adding to the Route,Router and Schema but couldn't get it to work. Thanks!

I've learned to ask this question before I start implementing it on my own with this router :)

Is there any way to add Notifications to the Tabbar? Something like this,

Ps great work with the continued progress with this project. Every time I look at it more and more stuff is added. I wouldn't built a RN app without it now.

Just leaving this incase anyone else runs into it - when using the example to launch a modal using the NavBarModal component from this example and running against the latest stable react-native-navbar (1.0.4 at the time of this writing) I'm getting the following exception:

Argument 0 (BOOL) of RCTStatusBarManager.setHidden must not be null

A fix for this is detailed in the below issue on that project.
Kureev/react-native-navbar#100

Is it possible to add onPress like show in the example below?

export default class Example extends React.Component {
    render() {
        return (
            <Router hideNavBar={true}>
                <Schema  name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
                   ......
                    <Router>
                        <Route onPress={this.doSomethingCool} name="loginModal2" component={Login2} title="Login2"/>
                     .......


                </Route>
            </Router>
        );
    }
}

...this was built with Redux. Just saying. Love the implementation, but with everyone jumping on the Redux band wagon, including myself, I'm not sure about mixing Flux implementations.

How do I trigger nav.replace ? Is it available in the current source code?

This is not an issue per se, but in the Examples folder the components are created in ES6 class style while the example given in the Readme uses the React.createClass. Great work btw.

onPop doesn't seem to be called when the back button is pressed

I want from a button to navigate back twice.
I tried Actions.pop() twice but with no success.

Hi, I just started implementing react-native-router-flux(Lovin it) for my app. It works like a charm for my IOS version. Trying the basic setup on Android, and I cant get to the TabBar view. Getting the following error. I looked up for the documentation for Navigator of React Native Android, and it find anything different when compared to iOS. Did anyone run into this issue?

Say I have a Route that is a part of a TabBar. Is it possible to remove/hide the tabbar (i.e fullscreen) when I go to that particular route?

The tabbar can be seen in the bottom. I want to remove it when I go to the route that is triggered when I press the button in the middle.

I fetch some data from url and while downloading I show loading view using Actions.popupLoadingView() in componentWillMount/componentDidMount. But after updating to version 0.3.4, Loading popup View does not show up anymore. But it does show when refresh button is pressed to re-download data from url again.

componentWillMount: function () {
    this.fetchDataFromUrl();
},

refreshList: function() { //onPress function of some button and popUpLoadingView shows up.
  this.setState({
      networkError : false,
  });
this.fetchDataFromUrl();
},

fetchDataFromUrl() {
   Actions.popUpLoadingView({msg: 'Downloading....'}); //This does not show up 

   fetch(some_Url)
     .then((response) => response.json())
  .then((responseData) => {
   console.log(responseData);
    Actions.dismiss();
  })
   .catch((error) => {
    console.warn('error ::: ' + error);
    Actions.dismiss();
    this.setState({
      networkError: true,
    });
  })
  .done(()=> {
  });

Would it be better to remove the .idea directory from git? It makes the diff results somehow distracting...

Hello, Great work on the router man!
I've just updated to v1.0 and I noticed that you removed the implementation of popups.
Would like to know if it can be re-implemented ? Or was there a specific technical issue with the new release ?

Thanks,

Can this be used with Redux instead of Facebook Flux?

Hello

I'm using type="replace" for one of my routes. I noticed that, after I follow this route several times, I get the following warning:

(node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit. (Full stack trace)

I tested some more and it appears that this is happening because, while I remove the change listener in componentWillUnmount, this method is not called on a component that's being replaced.

How can I handle this, and know when my component is going away due to replace?

Thanks!

I saw in Container.js line 113:

var sceneConfig = route.sceneConfig || schema.sceneConfig || Animations.None; has been commented.

I used to uncomment this code and it works fine with animation such as <Schema name="tab" navBar={NavBar} sceneConfig={Navigator.SceneConfigs.HorizontalSwipeJump} /> in index.ios.js.

So what's the reason that you commented this code?

When tabs are in a subcomponent of the main router, schema doesn't work. Trying to inherit a schema defined in the main router gives the error: No schema=tab is defined for route=tab.
Example code is here.

If instead I try to insert the schema in the tab component's own router I get the error: console.error: No icon class is defined for undefined. Example code is here.

Hi, I just started implementing react-native-router-flux(Lovin it - beer for you @aksonov ) for my app. It works like a charm for my IOS version. Trying the basic setup on Android, and I cant get to the TabBar view. Getting the following error. I looked up for the documentation for Navigator of React Native Android, and it find anything different when compared to iOS. Did anyone run into this issue?

Thanks in advance.