expo / ex-navigation Goto Github PK

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.

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

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.

1. I don't know how long to make the setTimeout because each route takes a different amount of time to transition onto the stack, depending on the phone + component performance
2. Often my new params come back faster than the time it takes to transition, so I'd rather not wait
3. Flashing new values to the screen (i.e. new title and new renderRight component), results in sub-optimal UX

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

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?

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)

We should upgrade the library to NavigationTransitioner instead since NavigationAnimatedView is being faded out in RN facebook/react-native@7db7f78

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
}));

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.

as discussed on exponent slack, getCurrentRoutes will extract relevant data from the navigationState and export getCurrentRoutes on the navigator object.

I will PR

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.

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.

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

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}))
]);

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)
 }
});

cc @skevy @brentvatne

just like exNavigator add a replace method to the navigator. I will PR soon as i port more screens to exNavigation

Common pattern to do this, might as well support it

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

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.

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 called
• ConversationScreen willMount is logged inside the componentWillMount function
• Analytics push question is logged via redux hooks into EX_NAVIGATION.PUSH
• timestamps confirm when these happen too

Seems pretty reproducible: push A, pop, push B, pop, push A (which triggers A and B simultaneously)

@skevy @brentvatne

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?

popping multiple screens in a multi screen form seems like a standard ux. thoughts on supporting this?

I can PR if you guys agree.

react 15.3 ships with a PureComponent. remove it from ex-navigation and use the one from react.

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

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.

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

cc @skevy @brentvatne

When using the component without application bar, the ExNavigationBarcontains extra top margin. The navigation bar should be as close to the status bar as possible.

This margin is determined by the STATUSBAR_HEIGHTin ExNavigationBar.js
Setting this value to 0 fixes the issue.

@brentvatne

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.

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?

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.

1576453

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.

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).

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.

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);

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

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

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;
      },
    },
  }

Should be possible to specify navbar height in route config, right now the option is there but we aren't using it.

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 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>
}

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.

Make this built into ex-navigation by default

from our conversation on exponent slack channel, keeping this as a placeholder. I will PR

cc @skevy

Adding Status bar height to Navbar height results in huge Navbar on android. See image below

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?

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?

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:

1. I have set up a StatusBar component in my application that I would like to subscribe to the attributes of the current route (i.e. connected via Redux store), and update when a custom attribute (perhaps named statusBarBackground) on the current route changes.
2. This custom attribute should be able to be set with updateCurrentRouteParams() since it is data-dependent.

When route A has navigationBar and route B doesn't have it (no static route set), I am getting the following exception:

For now, I did what I usually do - one container Navigator and two nested ones, one w/o header for onboarding scenes and 2nd one, called home, with navigation 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