expo / ex-navigation Goto Github PK
View Code? Open in Web Editor NEWRoute-centric navigation for React Native
Route-centric navigation for React Native
We should upgrade the library to NavigationTransitioner instead since NavigationAnimatedView is being faded out in RN facebook/react-native@7db7f78
Reproduce:
cmd+D > Show Inspector > Touchables
. It red boxes with "Cannot read property 'parentNavigatorUID of undefined" in ExNavigationReducer.js 78
Not sure what's going on here.
Passing a ListView dataSource through route params produces:
Warning: You passed a non-serializable value as route parameters. This may prevent navigation state from being saved and restored properly.
from our conversation on exponent slack channel, keeping this as a placeholder. I will PR
cc @skevy
Calling updateCurrentRouteParams
during a route transition (i.e. before a freshly pushed route finishes sliding across the screen from right to left), results in a broken navigation stack. It seems that route params cannot be modified during transition. This will break:
static route = {
navigationBar: {
title(params) {
return params.title;
},
},
}
componentDidMount() {
this.props.navigator.updateCurrentRouteParams({
title: 'New Title',
});
}
The only workaround seems to be to wrap the call in a setTimeout function, as done in the README example to prevent it from calling before the route transitions, but this feels janky for a number of reasons.
This may be a bug in NavigationExperimental core, I've logged the same type of issue on the react-native repo as well: facebook/react-native#9326
The style for the title of a tab cannot be changed at the moment. It would be nice if we were able to highlight it the same way as we can do with the icon.
When running mocha tests on components that contain StackNavigation
components somewhere in the child tree, the test will error out. Here's an example of a valid Enzyme test failing due to inability to process this package:
$ mocha --require imports/ui/helpers/test/setup.js --compilers js:babel-register --recursive imports/**/*.tests.js --reporter spec
/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/@exponent/ex-navigation/src/ExNavigationStyles.js:33
sceneAnimations:CardStackStyleInterpolator.forHorizontal,
^
TypeError: Cannot read property 'forHorizontal' of undefined
at Object.<anonymous> (ExNavigationStyles.js:33:20)
at Module._compile (module.js:541:32)
at Module.replacementCompile (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/append-transform/index.js:63:13)
at loader (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/babel-register/lib/node.js:148:5)
at require.extensions.(anonymous function) (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/babel-register/lib/node.js:158:7)
at Object.<anonymous> (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/append-transform/index.js:67:4)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
Just like showAlert
we can support showLightBox
. showLightBox
api can be similar to push
except the animation works out of the box for lightbox?
Took the idea from react-native-navigation:
this.props.navigator.showLightBox({
screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
style: {
backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
}
});
as discussed on exponent slack with @brentvatne, we shouldn't do scale on floatVertical. That's any the default animation anyway atleast on ios.
Refer the thread here: https://exponentjs.slack.com/files/naveenkonduru/F2190U1J8/pasted_image_at_2016_08_14_05_52_pm.png
react 15.3 ships with a PureComponent. remove it from ex-navigation and use the one from react.
Make this built into ex-navigation by default
It's great that ExNavigator allows you to set the background color for the NavigationHeader component at the scene-level. Similar to how this is done, it would be great to be able to set custom attributes on the route, such as a backgroundColor for the StatusBar.
The use case for this is Android Material Design. Google recommends using a 500-level color for the NavigationHeader, and a 700-level accent color for the status bar. See https://material.google.com/style/color.html
The YouTube app does this. When you go to someone's channel, not only does the NavigationHeader color change based on user preference, so does the StatusBar background accent.
So basically fetching profile data after the component has been invoked and using it to update both the status bar color and navigation bar colors using updateCurrentRouteParams()
.
I've logged a similar issue here detailing the need for setting the navigationBar backgroundColor with updateCurrentRouteParams()
, but I think it's necessary to expand this even further to custom attributes per the above reasoning.
TLDR:
statusBarBackground
) on the current route changes.updateCurrentRouteParams()
since it is data-dependent.I'm migrating from using exponentjs/ex-navigator and noticed that ex-navigation has built in functionality for using Drawer navigation.
Are there any examples/pointers of how to use this? (I looked at the checked in ExNavigationExample but it unfortunately does not include a sample DrawerNavigation/DrawerNavigationItem).
Common pattern to do this, might as well support it
popping multiple screens in a multi screen form seems like a standard ux. thoughts on supporting this?
I can PR if you guys agree.
Here's what the log looks like:
1:11:35 PM nav question
1:11:35 PM Analytics push question
1:11:35 PM QuestionScreen willMount
1:11:37 PM pop question
1:11:39 PM nav conversation
1:11:39 PM Analytics push conversation
1:11:39 PM ConversationScreen willMount
1:11:41 PM pop conversation
1:11:45 PM nav question
1:11:45 PM Analytics push question
1:11:45 PM ConversationScreen willMount
1:11:45 PM QuestionScreen willMount
nav conversation
is logged right before navigator.push
is calledConversationScreen willMount
is logged inside the componentWillMount
functionAnalytics push question
is logged via redux hooks into EX_NAVIGATION.PUSH
Seems pretty reproducible: push A, pop, push B, pop, push A (which triggers A and B simultaneously)
If the initialItem is not a valid route name you get a not too helpful error. Maybe if initialItem took a route instead you would get the flow checking plus a better error message.
Sometimes I'd like to capture the android back button with custom handling and not letting ExNavigation use it's default pop() action. For instance, when we open up a modal in a current scene and when pressing the android back button I'd like to close the modal, not popping any routes. I note enable()
and disable()
methods in ExNavigationBackButtonManager but I'm not sure how to use them? Is this possible?
Right now showLocalAlert takes a message and styles to apply. but it still controls the timeout. There is not way to have a dismiss button.
how about an API like:
this.props.navigator.showLocalAlert({
renderAlert: () => <AlertComponent />,
timeout: 500, // if not time them alert won't auto close.
});
idk if its worth supporting any default with local alerts because most apps would have their own styles and timeouts
When I navigate away from a DrawerNavigationItem to a new route (Router.getRoute('routeA')
) I get the back button but when I attempt to swipe to go back, it opens the drawer instead of navigating back. Clicking the back button works as expected.
Hi,
Thank you for this great module!
I currently face a challenge. I want to replace the previous stack-entry programmatically.
---routeB---\
/ > routeC
---routeA-----------/
The user can take multiple "paths" to routeC.
Let's say the user navigates as follows: routeA -> routeB -> routeC.
In routeC he behaves in such a way, that when he presses back, he should return to routeA. So he's stack looks like this: routeA -> routeC.
I've tried using immediatelyResetStack
, but so far no luck.
this.props.navigator.immediatelyResetStack([
Router.getRoute('routeA'), Router.getRoute('routeC', {routeCSpecificProp: this.props.routeCSpecificProp}))
]);
React native's NavigationHeader
component has a few props for managing the display of the left and right icon(s): renderLeftComponent
and renderRightComponent
. Is it possible to use this package to set these props at the scene-level, similar to how react native's renderTitleComponent
has been supported?
Going one step further, is it possible to define oncPress handlers for these icons? I.e.:
{
title: 'Title Component',
backgroundColor: '#000',
left: <Text onPress={onPress1}>Left Component</Text>
right: <Text onPress={onPress2}>Right Component</Text>
}
just like exNavigator add a replace method to the navigator. I will PR soon as i port more screens to exNavigation
Hi,
I have more or less common setup of redux store with couple of reducers, middlewares and redux-persist. Ideally I want to make a branch in this store and give it to be used by ex-navigation, to have 1 store in the app with logging and persistence. But I'm lacking some understanding of ex-navigation and redux.
Small question, is it at all smth that was expected and has support in the library?
Bigger question, can you show an example pls?
Is this because RN Experimental is continously improving?
Can't we just freeze the version that was expected to work instead?
Whats the reason for doing this?
I'm using a fresh clone of ex-navigation. I ran cd example/ExNavigationExample && npm install
. When I open the project in XDE (2.4.0), I see the error:
Error: Problem in exp.json. child "ios" fails because ["permissions" is not allowed]. See https://docs.getexponent.com/.
Couldn't start project. Please fix the above issues and restart the project.
If I delete the entire permissions
section under ios
in exp.json, the project will open ok, but then shows the following error when I open it in the iOS simulator:
[node-haste] Encountered an error while persisting cache:
SyntaxError: /path/to/ex-navigation/example/ExNavigationExample/node_modules/exponent/src/Exponent.js: Unexpected token (22:9)
20 | import './Logs';
21 |
22 | export * as Constants from './Constants';
| ^
23 | export * as Contacts from './Contacts';
24 | export * as Asset from './Asset';
25 | export * as Font from './Font';
> at Parser.pp.raise (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/location.js:22:13)
> at Parser.pp.unexpected (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/util.js:89:8)
> at Parser.pp.parseExportFrom (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/statement.js:938:12)
> at Parser.pp.parseExport (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/statement.js:861:12)
> at Parser.parseExport (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/plugins/flow.js:107:20)
> at Parser.pp.parseStatement (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/statement.js:141:81)
> at Parser.parseStatement (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/plugins/flow.js:30:22)
> at Parser.pp.parseBlockBody (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/statement.js:529:21)
> at Parser.pp.parseTopLevel (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/statement.js:36:8)
> at Parser.parse (/path/to/ex-navigation/example/ExNavigationExample/node_modules/babylon/lib/parser/index.js:129:19)
Not sure if it's relevant, but I did run a previous version of this example last week without any issues.
Let me know if there's any other information I can provide. Happy to help out however I can, but I'm pretty new to Exponent and ex-navigation so my knowledge is limited at this point.
Its referenced in multiple places like:
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationProvider.js#L7-L10
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationBadge.js
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationBar.js
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationStackItem.js
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationTab.js
ect ect
RN moved to renderHeader convention for the navigationCardStack. It's not a breaking change for ex-navigation as we don't use navigationCardStack. but wondering if we want to follow the same naming convention.
@skevy @brentvatne upstream navExp also removed absolute positioning for rendering the header. My concern is that would not allow for translucent navbar(?) do we want to do this?
Is it possible to use ex-navigation without using exponent? I really like the look of the API and want to use it within an existing react native app.
from my conversation with @brentvatne on slack. I will try to post repro code soon. Keeping this as a placeholder here on github so that it's not lost in the slack conversations.
I have tried running the example as per the instructions in the readme.
However, I get this error:
ERROR Unexpected token ...
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Module._extensions..js (module.js:417:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at new Bundler (index.js:120:27)
at new Server (index.js:207:21)
Any idea on what is going on?
Just to track the issue mentioned on Slack, this line bombs if you're not including the exponent package in your project:
https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationBar.js#L13
Native animation offloading is enabled in the Animation of Navigation.
Do we need to add a NativeModule in the MainActivity in order to make this work?
HT: Until its fixed you can disable offloading by setting useNativeDriver: false in ExNavigationStyles.js and it will run just fine on javascript thread instead.
Is it possible to define a route as a child of another, similar to react router? I.e. something like:
export const router = createRouter(() => ({
componentA: () => ComponentA, // normal definition
componentB: () => <Parent><ComponentB/></Parent>, // render ComponentB as a child of Parent
componentC: () => <Parent><ComponentC/></Parent>, // render ComponentC as a child of Parent
}));
Thank you guys for open sourcing ex-navigation
Is there a way to initialize it with a predefined stack of routes ?
Example: At app launch, being able to go back to a previous screen for development purpose
We need paddingBottom here because otherwise the elevation shadow gets clipped, due to Android always having overflow: hidden enabled. So, we need to probably reorder views in such a way that we have the background bar set to pointerEvents: none without interfering with the buttons and other touchable things on the bar.
Issue:
When running the example, I got an error due to missing babel configuration
@ide give me the solution, creating a .babelrc
with this conf:
{
"presets": ["react-native-stage-0/decorator-support"]
}
And then run npm install -D babel-preset-react-native-stage-0
to get the preset
renderBackButton
would let us customize the back button UI and then i can just pass that to defaultRouteConfig
.
Usually an app would have mulitple StackNavigations
so i would still need to add renderBackButton
to all the stacknavigators defaultRouteConfigs
.
One can also override the BackButton
component globally like this:
import { withNavigation, NavigationBar } from '@exponent/ex-navigation';
const myBackButton = () => <View />;
NavigationBar.BackButton = BackButton;
It's a trade off and idk what's the best api here. cc @brentvatne @skevy @ide
as discussed on exponent slack, getCurrentRoutes
will extract relevant data from the navigationState and export getCurrentRoutes on the navigator object.
I will PR
I want a signout-button visible to the right in the navigationBar of my main screen. I didn't manage to get hold of this.props.. from within the static route object in my view.
Ended up writing a connected component which I render from navigationBar.renderRight. Is the below an overly complicated solution, or is it the way to go?
class _SignOutButton extends React.Component {
render() {
if(!this.props.isLoggedIn) return null;
return (
<TouchableOpacity onPress={this._onPress}>
<Text>Sign out</Text>
</TouchableOpacity>
);
}
_onPress = () => this.props.dispatch(AuthenticationState.LogoutAction());
}
const SignOutButton = connect(
state => ({
isLoggedIn: AuthenticationSelectors.isLoggedIn(state)
})
)(_SignOutButton);
Hey,
Going through the source code I've discovered this to be an alternative way of declaring route config:
const Router = createRouter(() => ({
home: () => ({
render: Router._makeRoute(HomeScene),
config: {
navigationBar: {
title: 'Home',
},
},
}),
}));
In this case, I am calling _makeRoute
since when object is passed, it's not called as in other cases. Anyways, I think it would be cool to document it (or add to an examples) since many people might prefer to have config in one place, instead of looking into every scene separately for details.
Happy to PR, just wondering what's your idea on that
When using @withNavigation decorator on a component outside of the StackNavigation tree, this.props.navigator
is null
. The use case here is for an app with multiple StackNavigators, and to manage them, there are general layout components that sit outside of the StackNavigation trees. i.e. a single StatusBar component.
This StatusBar component needs to be aware of the parameters of the current route of the currently active navigator (color; network activity; etc.), since these values will change on a per-route basis and must change as the user switches between tabs (not exclusive to popping and pushing). How does one achieve this? It doesn't seem possible to subscribe to the current route params across multiple navigators as is done with NavigatorExperimental's reducer.
Related: #34
Awsome work!
After struggling with NavigationExperimental for a while ex-navigation feels really simple to use. Thank you!
I like it that I get the navigator "connected" automatically to props. But what is the best practice for importing the Router? Everywhere I'm calling navigator.push I need to feed it with Router.getRoute(). I.e. I need to import Router in every view with navigation capabilities.
I have probably missed something. NavigationProvider gets my Router from start, so it might very well be accessible somewhere in the props. But none of the examples shows this.
The background color for my scenes are determined based on data (i.e. themed based on user preferences). I would like to use updateCurrentRouteParams
to update the backgroundColor once the color code has been fetched, however the below throws a warning:
static route = {
navigationBar: {
backgroundColor(params) {
return params.color;
},
},
}
When using the component without application bar, the ExNavigationBar
contains extra top margin. The navigation bar should be as close to the status bar as possible.
This margin is determined by the STATUSBAR_HEIGHT
in ExNavigationBar.js
Setting this value to 0 fixes the issue.
Should be possible to specify navbar height in route config, right now the option is there but we aren't using it.
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.