react-native-simple-router-community/react-native-simple-router

A community maintained router component for React Native

react-native-simple-router's Issues

Expensive view

@AnNOtis MikaelCarpenter/gb-native-router#57

Any news on that?

Configurable width for the navbar title and corner button.

In my app I use not only icons, but also text for the corner buttons and something interesting happens. Here's a screenshot:

The title overlays the corner button. From my understanding that's because the title container has flex: 6 (here) the corners have flex: 1 (here). If, for example, I set the corner flex to 2 everything works as I want.
Could it be possible to make these rules configurable?

Thank you very much for the great work!

Unable to install using NPM 3

Hi I am unable to install using npm

First I got this error while installing
[email protected] requires a peer of fbemitter@^2.0.0 but none was installed.

Then I installed fbemitter (I am not sure if that is correct)

After that I got below error while running the app

Unable to resolve module fbemitter from /Users/.....

Please help

sceneConfig with swipe, animation

I set sceneConfig with Navigator.SceneConfigs.VerticalUpSwipeJump.

in this situation, route to back action is not make sense.

If I swipe left to right, but view is up to down.

Issue with Modules in Webpack / Object Is Not Extensible

Hey everyone!

Trying to use this and I'm wondering if I'm doing something wrong. Here is the error I'm getting.

ERROR in ./~/react-native-simple-router/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./styles in /Users/NOT_MY_NAME/Workspace/React/react-native-kit/node_modules/react-native-simple-router
 @ ./~/react-native-simple-router/index.js 23:14-33

I took a look at Index.js and there is style.ios.js and style.android.js but it is only requesting ./styles. Is webpack suppose to figure out if we need ios or android? If so, how do I go about fixing that?

EDIT:
After just hardcoding ios to the styles (will change if answer shows) I begin to get this error, wondered what this meant...

Cannot define property:__navigatorRouteID, object is not extensible.
getRouteID
Navigator.js @ 79:0 // core Navigator class in react native, is this a react native issue?

Update:
Reinstalled, not getting that error with the navigator anymore, but the .ios .android issue is still a thing. Any information on that would be awesome, I cannot seem to figure out why or a solution to it. If anyone needs code of my webpack setup, please let me know.

Wrap Drawer around Router

Hey there. I am trying to wrap the react-native-side-menu component around the Router, so it is on top and not under the navBar. I really can´t figure out where the right place is to put it and especially how to pass the Router props down/up to the SideMenu Routes. This was my try:

class App extends Component {
  render() {
    return (
        <SideMenu
            menu={<Components.Menu/>}
            isOpen={false}
        >
            <Router
                firstRoute={{
                    name: 'LOGIN',
                    component: Login
                }}
                headerStyle={{
                    backgroundColor: 'black',
                    elevation: 5
                }}
                backButtonComponent={ Components.BackButton }
            />
        </SideMenu>
    );
  }
}

Now how can i pass toRoute props to Components.Menu?

Android support

• Material design toolbar
• Back button support

Coding style

We should decide a coding style.

I suggest these guides from Airbnb :

• ES6
• React

Update image in readme to show the interaction potential of this module.

The original package had a GIF in its description, but this got lost in the previous fork.
I propose to bring this back. Perhaps we can showcase this a bit better as well, now that we have new features in here?
Proposals?

Deprecation of onWillFocus in Navigator warnings in v0.20 rc1

NavigationBar transition when swipeback

Is there any way to do the native transition(fadeIn, fadeOut) for navigation bar when swipe back. The current behaviour is to replace to title when entering the view, but when swipe back action stays in the middle, the title isn't changing as native does.

On Android NavBar height looks more

IOS it is fine, because the device battery,wifi etc.. displayed.

But On Android it looks odd. I try to set height for header but that is hiding the title. Not sure what is the better way to do this. Please help.

How to pass parameters to customAction callback methods

customAction: A special callback prop for your action buttons (this can be handy for triggering a side menu for example). The action gets triggered from your custom leftCorner or rightCorner components by calling this.props.customAction("someActionName") from them. It is then picked up like this: <Router customAction={this.doSomething} />.

thats the documentation it is not mentioned any where how to pass parameters; can we pass parameters ?

Question: Tab bar implementation

I'm not quite sure how I should implement a tab bar to allow navigation between a small group of routes.

Should I achieve this by nesting a Router inside of the main router? So I'll have a single tab-router route, which loads my tab-bar + router component. Or is there a better way of doing this?

Unit Testing

How should we handling unit testing this project? Should we include this as apart of the definition of done?

Cannot call "this.props.toRoute" in titleComponent

Hi,

I'm writing an application that need to navigate to other page from titleComponent in the router (actually it is a searchBar). But I cannot call "this.props.toRoute" in this component. This function is called successfully in leftCorner but is undefined in titleComponent.

So what can I do to call toRoute function in titleComponent?

The code of searchBar

 var SearchBar = React.createClass({
     searchLetters: function (text) {
         console.log(text);
         this.props.toRoute({
             name: "Result for: " + text,
             component: SearchPage,
             passProps: { strSearch: text }
         });
     },
     render() {
         return (
             <TextInput
                 style={styles.input} placeholder="Search letters.."
                 placeholderTextColor="rgba(255, 255, 255, 0.5)"
                 returnKeyType="search"
                 enablesReturnKeyAutomatically={true}
                 onEndEditing={ event => this.searchLetters(event.nativeEvent.text) }
             />
         )
     }
 });

The index code

 var firstRoute = {
   name: 'Letters',
   component: SearchPage,
   titleComponent: SearchBar,
   passProps: { strSearch: '' }
 };

 var Letters = React.createClass({
   render() {
     return (
         <Router firstRoute={firstRoute} headerStyle={ styles.routerHeader } />
     );
   }
 });

Thank you!

Navigation bar missing

There's no navigation bar at the top of the screen. Code below:

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import Router from 'react-native-simple-router';

class HelloPage extends Component {
  render() {
    return <View>
      <Text>Hello</Text>
    </View>
  }
}

let firstRoute = {
  name: 'Welcome!',
  component: HelloPage
};

class RouterTest extends Component {
  render() {
    return <Router firstRoute={firstRoute} />
  }
}

AppRegistry.registerComponent('RouterTest', () => RouterTest);

Handle view state from navigator?

Hello, I tried to make some form based application,

How I get component's state from navigator?

Going back by swiping. Make the area to start swiping bigger.

Hi there!

I'm gonna try to explain it with an image.

Now, when I want to go back in my app with react-native-simple-router by swiping, the area where I have to start swiping is really small (light blue in the image). What I'd like to do is to make this area bigger (light blue + dark blue in the image) to be able to start swiping easily.

I don't know if it is possible.

Thanks!

NavBar components missing on the initial render

When I open my app or the twitter-example provided by you the navigation bar is empty until the route is changed and after that everything works just like expected.

Do you have any idea what could cause this?

How can i pop back the route?

Hey there!

I was wondering how to just pop back a route like the title says. Is it possible to use React.Navigator.pop() or something? In my app this module is just fabulous, but i coudn´t figure out how to jump...

Eslint complains about missing props validation in HelloPage example class

http://screencast.com/t/S6HOq3Ks

.eslintrc configured to: "react/prop-types": 1,

Fixed by adding to HelloPage class:
static propTypes = {
toRoute: React.PropTypes.func
}

pass data page to navigator.

I take a look around twitter-example.
I try to edit something more,
TweetBig component has data. but I want to pass data edititem component (right upper side pencil).
How do I this?
additionally, If I new tweet form. fill the form and touch right upperside submit icon. how can I deliver form data to submit icon component?

Replace route from right component

Hi,

is it possible to replace a route from the right component?
I want to use a "Logout" button component which redirects to the Login screen after
unset the credentials. But I get a Exception if I try to use this.props.resetToRoute.
this.props.toRoute works .. But I dont't want to see a "back" button.

Unhandled JS Exception: this.props.resetToRoute is not a function. (In 'this.props.resetToRoute({
name:'Login',
component:_Login2.default})'

Thank you!

Release 0.7.0 and push it out to NPM

Release should be done soon. Possibly today?
@charpeni, @ericraio, @johannhof what do you say?

Example code doesn't work

Red screen of death:

Unused/undocumented props

index.js contains these unused or undocumented props :

• bgStyle - index.js:164
• statusBarColor - index.js:190

Go forward by swipe left

Hi there!

I'm trying to load a different view (sending properties as id) by swipe from right to left

Before achieve this by swipe, I'm trying to load this view with a simple button, but neither I'm be able to do it :/

I got this index.js

...

var Story = require('./story');

...

goToIndividualStory: function(id){
    this.props.toRoute({
      name: "Story",
      component: Story,
      passProps: { id: id, toRoute: this.props.toRoute },
    });
  },

...

And then, in story.js is where I'd like to go to another view:

...

var Part = require('./part');

...

goToPart: function(id){
    this.props.toRoute({
      name: "Part",
      component: Part,
      passProps: { id: id },
    });
  },

...

Edit: I also have this to fire the goToPart function:

...

<TouchableHighlight onPress={ this.goToPart.bind(this, story.next_part) } underlayColor="transparent">
    <Text style={ styles.storyFooterPart }>#24</Text>
</TouchableHighlight>

...

I feel like I'm missing something, but I've tried with a lot of different code and I don't achieve it.

I hope you guys can help me out with this.

Thank you :)

Can't 'resetToRoute' from leftCorner component passing the same leftCorner button

I have a project pretty much similar to the Twitter example. It is a ListView that has a button assigned to its leftCorner which takes you to a filter view. When you select the filters you want and apply them, you should be taken back to the ListView, with the filters applied.

I have tried to resetToRoute (passing the filter info with passProps, but when I specify the same leftCorner, I get:

Invariant Violation: Element type is invalid: expected a string 
(for built-in components) or a class/function (for composite 
components) but got: object. Check the render method of ``Navigator`

If I don't specify the leftCorner, I get taken to the ListView but the filter button disappears. I have also tried toBack method, but no porps can be passed with it (I think it would be cool).

Here is my code, and in the last file I specify the line in which the error is thrown.

index.android.js

var HomeView = require('./app/views/HomeView');
var FilterButton = require('./app/ui/buttons/Filters');

var startView = {
  name: 'Home',
  component: HomeView,
  leftCorner: FilterButton,
}

var MyApp = React.createClass({
  render: function() {
    return (
        <Router 
          firstRoute={startView}
          headerStyle={styles.header}
          backButtonComponent={BackButton}
          handleBackAndroid={true}
        />
    );
  }
});

AppRegistry.registerComponent('MyApp', () => MyApp);

Filters.js

var React = require('react-native');
var FilterView = require('../../views/FiltersView');

var Filters = React.createClass({
  goToFilterPage: function() {
    this.props.toRoute({
      name: "Filtros",
      component: FilterView
    });
  },
  render() {
    return (
      <TouchableHighlight underlayColor="transparent" onPress={this.goToFilterPage}>
        <Image source={Globals.Images.filtro} style={styles.icon} />
      </TouchableHighlight>
    )
  }
});
module.exports = Filters;

FiltersView.js

var React = require('react-native');
var FilterButton = require('./../ui/buttons/Filters');  <--- This is the line that throws the error
var HomeView = require('./app/views/HomeView');

var FiltersView = React.createClass({
  _applyFilters: function() {
    var filters = this.state.filters;
    this.props.resetToRoute({
      name: "Home",
      component: HomeView,
      leftCorner: FilterButton,
      passProps: {filters:filters}
    });
  },
  render() {
    (...)
  }
});

module.exports = FiltersView;

React.createElement: type should not be null, undefined, boolean, or number.

After updating from 0.6.0 to the latest 0.7.2; i am getting the following error's and the error is occurring when i return Router from my render method. i.e.

render(){
            return (<Router firstRoute={firstRoute} backButtonComponent={BackButton}/>);
            }

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of projectName.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of projectName.

Unhandled JS Exception: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of projectName.reactConsoleError @ ExceptionsManager.js:76console.error @ YellowBox.js:49logIfNoNativeHook @ RCTLog.js:38__callFunction @ MessageQueue.js:183(anonymous function) @ MessageQueue.js:87guard @ MessageQueue.js:41callFunctionReturnFlushedQueue @ MessageQueue.js:86onmessage @ debuggerWorker.js:39

Broken style in the twitter example

Changing this.styles to just styles fixed it.

Can I push the change? I've never contributed a project before -_-

Convert to ES6 style

• Convert README.md to ES6
• Convert index.js and ./components to ES6
• Convert ./twitter-example to ES6
• Add PropTypes to index.js and ./components

Refer to coding style as defined in #1.

Submit on npm and js.coach

• Update package.json
• Update README.md
• Initial release
• Submit on npm
• Submit on js.coach

Pop to previous view

Is there anyway to pop back to the previous view programatically?

Back button style via prop

I would like to be able to apply a style to the back button component by giving a style object. Exactly like you can do with titleStyle. Something like adding a backStyle prop perhaps.

Thoughts on this?

Proposal: broadcast events based on the methods called on navigator

Currently, I have a redux/react application. I would love to be able to respond to events whenever the router has pushed or popped an item on the route stack.

if this sounds acceptable, it's very easy to implement and i can submit a pull request.

Update documentation for new events

• examples of push
• examples of pop
• examples of resetTo
• examples of replace
• examples of popToTop

`onWillFocus` supplied to `Navigator` has been deprecated.

Hi,

I'm using react-native: 0.20.0 and I see the warning like this. Does it affect the application? Can I ignore this?

More informative error messages

Hey guys, thanks so much for maintaining this library! Filing this as a note (who knows I'll probably implement it later).

Just did a code refactor so that it's in different ES6 modules. Used the wrong import syntax, so one of my components was undefined. Got an unhelpful error message like so:

Would help to know that the component property was undefined.

onWillFocus & onDidFocus has been deprecated

onWillFocus supplied to Navigator has been deprecated. Use navigationContext.addListener('willfocus', callback) instead.

onDidFocus supplied to Navigator has been deprecated. Use navigationContext.addListener('didfocus', callback) instead.

Can be related to #15.

Error calling replaceRoute

https://i.imgur.com/sp87ydX.png

I call this.props.toRoute and it works fine but not replaceRoute

hideNavigationBar leaves a white empty space at the top

when i set hideNavigationBar={true) for our router its not actually hiding the NavBar; and it gives this White Colored rectangle at the top

How can I handle BackAndroid with react-native-simple-router?

Hi Developer Team,

I'm writing an application that need call the toBack() in sub screen, and exit app in first screen when press back button in Android phone.

Would you mind helping me some guildline to implement this.

Thank you so much!

is titleProps working for anyone ?

is titleProps working for anyone ?
i am assuming titleProps is working like passProps;
this is my sample code:

this.props.toRoute({titleComponent:titlecomp,titleProps:{title:"test"},headerStyle:{backgroundColor:'#299CCA'},hideNavigationBar:false,trans:false,noStatusBar:false,component:require('./ContactDetail'),passProps:{data:rowData,callBack:this.deleteContact.bind(this),token:this.props.data.Token }});

and is this how we are suppose to access it from within our TitleComponent right ?

this.props.title or this.props.titleProps.title ; i am using the first one.

Naming collision with fbemitter dependency

When I run react-native run-android I get the following error in console:

Error building DependencyGraph:
 Error: Naming collision detected: /Users/amunds/android-dev/lifter/node_modules/react-native/node_modules/fbjs/package.json collides with /Users/amunds/android-dev/lifter/node_modules/fbemitter/node_modules/fbjs/package.json

Using:

[email protected]
[email protected]
[email protected]

Broken release

Line 49/50 throwing function not found:

this.onDidFocus = this.onDidFocus.bind(this);
this.onWillFocus = this.onWillFocus.bind(this);

Can this be fixed quickly?

Use Route ID Instead of Name

It would be nice to use an ID instead of name to identify routes. In some cases, you'd want to use the same title for multiple routes. When observing the routeEmitter, you only get the name (aka user-friendly title), so you don't know which route was triggered.

For now, I'm using the titleComponent and titleProps to separate the name from visible title. It works, but it's extra cruft.

Release it! :)

@charpeni can you plz release it to npm? I don't have my laptop with me today.

Improve documentation for 0.10.0 !

Dear community of users,

We would like to ask for your help and contribute to better documentation for this module.

More examples, better description of features, and making sure that everything is described with an example is what we are aiming for.

If you feel like contributing, please create a PR.
Thank you!

Cant Hide NAV bar on first page and make it visible on second page

The First page we are gone Route to needs to use <Router /> and the documenation indicates that if we use hideNavigationBar: it Hides the navigation bar, always ; What this means is if we hide it on <Router /> we can never get it back .

Lets assume a use case where this way of doing things can make life very hard:

Splash page with a button that says Register and Signin; we don't want to show a Navbar on the splash page rather we want a picture to fill our view => (user Clikcs Register) => we route the user to Registeration page but we also want the NavBar to be Visible with a backButton so that if the user wants to go to the splash page and click on Signin incase he remembers he had an account.

I have tried a lot of ways but with no luck; i believe this is a very common use case and we should be able to do it with this router.