expo / ex-navigator Goto Github PK
View Code? Open in Web Editor NEWRoute-centric navigation built on top of React Native's Navigator
License: MIT License
Route-centric navigation built on top of React Native's Navigator
License: MIT License
I need sample for navigation bar styling. For example how can I change navigation bar background color and title color ?
Right now it does not appear possible to import BackIcon
.
I know the showNavigationBar prop with the ExNavigator component but I need to hide navbar after first route. Is there any way ?
Thanks
Thank you so much for creating the ExNavigator.
I am switching from Navigator to ExNavigator in our app in hopes to significantly improve transitions :).
I have a need to hide a Navigation bar on some screens. Could you please add it? Or if it already is in the package please advice on how do I proceed about it?
I tried navigator.replace on the initialRoute got the error below,
I managed to go to line 220 on ExRouteRenderer and changed this._previousRoute.scene.componentDidBlur
to this._previousRoute.componentDidBlur
seems it fixed but it may broke somewhere else.
Here is my ExNavigator component ;
<ExNavigator initialRoute={DaRouter.getHomeRoute()} style={{ flex: 1 }} showNavigationBar={false} />
and navigating block ;
this.props.navigator.replace(DaRouter.getLogin());
Am I missing something here or is it just a bug?
npm ERR! Darwin 14.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "@exponent/react-native-navigator" "--save"
npm ERR! node v4.2.1
npm ERR! npm v2.14.7
npm ERR! code E404
npm ERR! 404 Not Found: @exponent/react-native-navigator
npm ERR! 404
npm ERR! 404 '@exponent/react-native-navigator' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'MyProject'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/sungongren/Desktop/Henry/study/React-Native/MyProject_0.14.0_mac_react-native.cn/npm-debug.log
when I used it , debugger console "Cannot read property 'configureScene' of undefined"ใmy RN is 0.17.0ใhow can i fix it?
I am seeing this warning:
Warning: Failed propType: Invariant Violation: BackIcon: prop type `sources` is invalid; it must be a function, usually from React.PropTypes. Check the render method of `NavigatorNavigationBar`.
Is this allowed?:
static propTypes = {
...ResponsiveImage.propTypes,
sources: null,
};
Tried to use ExNavigator like described on the readme and got the exeption in the invaraint-function of browser.js file in line @ 25:0.
It tries to get the environment variable (if (process.env.NODE_ENV !== 'production')) but they are undefined?
I use it with react-native 0.15. Any idea?
Well, I follow the readme, but get this error:
undefined is not an object (evaluating \'this._navigator.navigationContext\')'
I'm using RN 0.11.4, with ES6/ES7 features (like the readme say).
Thanks!
I have a navigator + navbar which displays a button with renderRightButton() (left screen in screenshot). After pushing a new view on the navigator the right button is still tappable (even though it's not visible). When inspecting the navbar I can see the button. It's like the old navbar is positioned beneath the new view and is still tappable. Any idea how to solve this?
NavigatorIOS
has a backButtonTitle
property on the route that sets the text used for the back button (it overrides the previous routes's title). In order to get this effect in ExNavigator requires copy and pasting a fair bit of code.
My setup is pretty standard - a tab bar with each tab's root being an <ExNavigator>
. I update my status bar color accordingly in the onWillFocus()
function for each route in my router object. This works great pushing/popping between scenes within each ExNavigator, however when I switch between tabs (to each different ExNavigator component), onWillFocus()
is not fired. I realize this isn't really an issue with your library, but I'm wondering if this is possible. I can get the ref of the ExNavigator
on tab change no problem, but is there any way I can get the CURRENT route from that, so I can explicitly call onWillFocus()
upon tab change?
Some more documentation around what props are supported and what they do would be pretty useful along with a short example. The blog post explains why ExNavigator is the way it is but doesn't comprehesively detail all the props. If anyone has suggestions for how to nicely format the docs (w/a preference to legibility more than prettiness) something more than a README would be nice.
Using react-native-router-flux and getting this error on build
uncaught error Error: SyntaxError: /.../node_modules/@exponent/react-native-navigator/ExNavigator.js: Unexpected token (24:16)
22 |
23 | export default class ExNavigator extends React.Component {
> 24 | static Styles = ExNavigatorStyles;
| ^
25 | static SceneConfigs = ExSceneConfigs;
26 | static Icons = ExNavigatorIcons;
27 |
This is more a question than an issue.
I was wondering how I can best connect my router with my Redux store. react-redux's connect
method only works with components. Do you usually make your router an component? How do you hook it up to the store and to dispatching actions?
When i push to the screen with own exnavigator, new navbar is fully hidden over old (parent) navbar. When i set sceneStyle.paddingTop, then I will see both navbars correctly, but it is not desired behaviour - i just want to see new navbar, like it is done in iOS Navigator. How to achieve this? Thanks.
Add some mechanism to prevent onRightButtonPress
from being clicked Repeatedly. Right now if the action of clicking onRightButtonPress
is asynchronous, it may be hit a second time. Resulting in duplicate navigations.
I tried adding state the button allowing only one press but I don't know how to clear this when the back button is pressed returning to the current route.
Ideally after a call to something like navigator.push(route)
, the button would be disabled.
Hey, thanks for the module!
Since it's somehow similar to my in-house navigator, I wanted to suggest adding a quite a few custom methods I often find useful so I can switch to this library and keep it maintaining with you :)
First one is transitionToTop
(I use transitionTo
instead of push
hence that name)
function transitionToTop(route) {
this.navigator.replaceAtIndex(route, 0);
this.navigator.popToTop();
}
It's quite useful when you want to transition to a new route (push it), but you want to make sure you clear your route stack. This is extremely useful when you have auth flow with multiple routes and on successful login you want to navigate to protected home screen making sure none of auth routes are left in stack (memory management for the win)
Another one is popBack(index)
to pop back n times. Say you open help section, then you allow your users to select a subject of a message and then you push a new route with a contact form after subject is selected. On successful form submission, you want to make sure your user goes back to help
screen, not to select title of a message
one.
function popBack(index) {
const routes = this.navigator.getCurrentRoutes();
this.navigator.popToRoute(routes[routes.length - index - 1]);
}
I am using ExNavigator in my RN app and i want to push a new route with floatFromBottom, but the Navigation Bar is on top of my View and the left button,right button and title cross-fades.
Is there a way to push a new route with floatFromBottom with a new navigation bar that overlays the previous scene?
I have a nested router that goes away on pressing a button. This causes the main router to come back into focus. There doesn't seem to be a hook for this. DidFocus doesn't get called because I guess technically it's still in focus, just behind the current navigator? If I'm wrong let me know. Would love to have a good way to know when a router comes back into focus from something like this.
Since there are componentWillFocus
and componentDidFocus
, we should have componentWillBlur
and componentDidBlur
Just thought it would be way easier for people to wrap their heads around.
Allows for cool interactions like in: https://github.com/facebook/react-native/blob/62e8ddc20561a39c3c839ab9f83c95493df117c0/Examples/UIExplorer/Navigator/JumpingNavSample.js.
I am using:
<ExNavigator
ref="navDevice"
style={{flex: 1, paddingTop: 65}}
initialRoute={{
getTitle() {return 'Devices'; },
getSceneClass() {return DeviceList; },
renderRightButton(navigator) {
return (
<TouchableOpacity
touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
onPress={() => {that.goToAddDevice();}}
style={ExNavigator.Styles.barRightButton}>
<Text style={ExNavigator.Styles.barRightButtonText}>+</Text>
</TouchableOpacity>
);
}
}}
/>
Relevant for when using the ex-navigator for showing Modals.
related: facebook/react-native#3759
I have an app with a tabbar, three tabs, one global navigator and one navigator in each tab. All views pushed onto the global navigator should float from the bottom (they hide the tabbar). All views pushed onto one of the other navigators should float from the right (they don't hide the tabbar, it's still possible to navigate to other tabs without popping the views).
Some views can be pushed to any navigator (like a log-in-view). Now I either need to make two different route factories for the login view or pass in props into the route factory to create a route with the specific scene configuration.
Either way the views that push the log-in-view need to know where they are in the view hierarchy to either choose the correct route factory or to pass the correct scene configuration into the route factory. That seems wrong, as it goes against composition. ๐
Shouldn't only the place of the navigator in the view hierarchy decide about how the next view is shown?
Was playing around with this and was facing an issue where my back button was getting pushed off screen. I fixed this by changing the barBackButton style to only be 5px of paddingRight:
Not really sure what the expected behavior should be. Maybe that it changes from "Clipboard" to "Back" when the title of the current screen gets too long. Or gets rid of the text alltogether? Note this is on an iPhone 5 simulator.
I have a state property isLoggedIn
which stores the state of the logged in user. and componentDidMount checks whether the user is logged in. The problem I'm facing is, If componentDidMount method returns isLoggedIn to true, the Exnavigation doesn't navigate to the home screen. It always returns the login screen regardless
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
}
}
componentDidMount() {
AuthService.getAuthInfo((err, authInfo)=> {
this.setState({
isLoggedIn: authInfo != null,
})
});
}
render() {
let initialRoute = Router.getLoginRoute();
if (this.state.isLoggedIn) {
initialRoute = Router.getCategoryListRoute();
}
return this.renderScreen(initialRoute);
}
renderScreen(route) {
return (
<ExNavigator
initialRoute={route}
style={{ flex: 1 }}
sceneStyle={{ paddingTop: 64 }}
/>
);
}
}
The padding on the top seems to change on subsequent routes:
initial:
second:
<ExNavigator
ref="navDevice"
style={{flex: 1, paddingTop: 65}}
initialRoute={{
getTitle() {return 'Devices'; },
getSceneClass() {return DeviceList; },
renderRightButton(navigator) {
return (
<TouchableOpacity
touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
onPress={() => {that.goToAddDevice();}}
style={ExNavigator.Styles.barRightButton}>
<Text style={ExNavigator.Styles.barRightButtonText}>+</Text>
</TouchableOpacity>
);
}
}}
/>
and then I wire up goToAddDevice
to push the same route:
goToAddDevice(){
const that = this;
const nextRoute={
getTitle() {return 'Devices'; },
getSceneClass() {return DeviceList; },
renderRightButton(navigator) {
return (
<TouchableOpacity
touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
onPress={() => {that.goToAddDevice();}}
style={ExNavigator.Styles.barRightButton}>
<Text style={ExNavigator.Styles.barRightButtonText}>+</Text>
</TouchableOpacity>
);
}
};
this.refs.navDevice.push(nextRoute);
}
Hello Exponent Team,
this.props.navigator.push method available to Views that are pushed to ExNavigator or to the views that set via initialRoute.
Can we able to access this.props.navigator.push property, if the view is not either of the above two options. for ex: I have this SideMenu with a Text and onPress of this Text I would like to push the View to ExNavigator. But, this.props.navigator.push method is not available in this context because this scene is not rendered using ExNavigator.
https://github.com/rnagella/ExNavigatorWithSideMenu/blob/master/src/Menu.js#L20
Is there a way to access this.props.navigator.push from non ExNavigator Views?
Thank you for your time.
Here is the sample app that I created to show case my thoughts.
https://github.com/rnagella/ExNavigatorWithSideMenu
I'm using react native quick actions and I'm wondering if there is a better workflow than this. I'm trying to open a route when the user selects a route from a quick action menu. This has been the best I could come up with for replacing and going to a route, if the component has it in the stack, or just pushing it if it doesn't currently exist.
setTimeout(() => this.doQuickAction(QuickActions.popInitialAction()),100)
this.subscription = React.DeviceEventEmitter.addListener('quickActionShortcut', this.doQuickAction);
....
let routes = this.props.navigator.getCurrentRoutes()
if(data.userInfo.vaults){
if(routes.length > 1){
this.props.navigator.replaceAtIndex(MainRouter.getVaultsRoute({...data.userInfo}), 1)
this.props.navigator.jumpTo(this.props.navigator.getCurrentRoutes()[1])
}
else this.props.navigator.push(MainRouter.getVaultsRoute({...data.userInfo}))
}
else if(data.userInfo.receipts){
if(routes.length > 2){
this.props.navigator.replaceAtIndex(MainRouter.getReceiptsRoute({...data.userInfo}), 2)
this.props.navigator.jumpTo(this.props.navigator.getCurrentRoutes()[2])
}
else this.props.navigator.push(MainRouter.getReceiptsRoute({...data.userInfo}))
}
Also, this is inside the initially loaded route, can't seem to find a better place to put this. I spent 30 minutes finding out I have to use a setTimeout or else the currentRoutes aren't set. Feels hacky, but actually works good. Any ideas? I'm sure this is going to be a valid use case for a lot of people in the near future. I thought of doing a pull request for adding replaceAndGoTo
but wanted to post here first.
The version 0.2.2 has two props that I don't understand: augmentScene and renderNavigationBar. Someone can show me or explain a bit what each prop do? Thanks!
how can i change navigator bar color
On IOS, the native navigator has access to the various icons and text in UIBarButtonSystemItem
. These icons are occasionally updated in new versions of IOS and the text is localized.
It would be great to have access tot these with ExNavigator on IOS.
Provide a way to imperatively change the title shown in the ExNavigator for the current route.
When using React I tend to pass functions as props into the children from their parent where they're called.
When I do this through ExNavigator, the function is undefined. E.g.
render: function() {
var route = Router.getStartRoute(this.props.handleLogin())
return (
<ExNavigator
showNavigationBar={false}
initialRoute={route}
style={{ flex: 1 }}
sceneStyle={{ paddingTop: 0 }}
/>
)
}
How do I call a function from a parent view with ExNavigator? I thought this was an important part of React, with state being kept in the parent as much as possible.
What is the touchRetentionOffset
property being set on TouchableOpacity
? I don't see that property in the React Native docs.
a big bug
Here the latest version is 0.2.7 (https://github.com/exponentjs/ex-navigator/blob/master/package.json#L3) but on NPM is 0.2.6.
When running npm install @exponent/react-native-navigator --save
you get '@exponent/react-native-navigator' is not in the npm registry.
Are you maybe using a private registry where this is available? Would be great to have it as an npm package
RN 0.16.0 comes with Babel 6. So for one thing the syntax of all babel.rc files needs changing (right?) and as mentioned in the 0.16.0-rc release message https://github.com/facebook/react-native/releases/tag/v0.16.0-rc:
Decorators won't work until T2645 lands in Babel.
I tried upgrading my project to the RC and even after changing the syntax of my .babelrc to include
"plugings: ["transform-decorators"]
I still get this error:
Any plans around this for when 0.16.0 stable lands?
The blog post does a better job of demonstrating styling aspects of ex-navigator than the examples in the REDAME. I suggest either updating the README or creating a working example using the code in the blog post.
For example:
renderLeftButton(navigator) {
return (
<TouchableOpacity
touchRetentionOffset={ExNavigator.Styles.barButtonTouchRetentionOffset}
onPress={() => navigator.parentNavigator.pop()}
style={ExNavigator.Styles.barLeftButton}>
<Text style={ExNavigator.Styles.barLeftButtonText}>Done<Text/>
</TouchableOpacity>
);
uses a number of styling and offset constants that are not documented in the README.
This might be off the topic but I think many people would consider how to deal with the idea of smart/dumb compoent on react-native, because there are a lot of use cases that the first/initial route, route[0], has information and the rest routes are dumb component. For example, the component of ListView(parent) has the data and the each list item(child component) is just using the part of the parent's data. With React, when there is a change on parent's data, the particular change related to the child component is propagated by using the props.
I'm using "replace" to realize this without propagating props, like below. I would like to know what is the best way to handle this. And is it possible to have the API to deal with this in the future?
# this is on parent component and the change is pushed to props(I'm using Redux)
componentWillReceiveProps(nextProps){
this.props.hubs.map((currentHub) => {
nextProps.hubs.map((hub) => {
if(currentHub.updatedAt !== hub.updatedAt){
this.props.navigator.getCurrentRoutes().map((r, index) => {
if(r.getHubId && ( r.getHubId() === hub.objectId ) ){
let route = Router.getHubRoute(hub);
this.props.navigator.replaceAtIndex(route, index);
}
});
}
})
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.