Commit Graph

17 Commits

Author SHA1 Message Date
Hedger Wang 229d6d2fd0 Fix NavigationScenesReducer.
Summary:
Fix a bug in NavigationScenesReducer that prevents scenes from re-rendering.
This happens when jumping the index between routes.

The fix is to add an new property `isActive` to `NavigationScene` to indicate the current active scene.

Reviewed By: ericvicenti

Differential Revision: D3479736

fbshipit-source-id: a71419887acd94ad2fead71596ca46419a88efef
2016-06-27 12:13:40 -07:00
Hedger Wang fb0007d853 Remove prop `onNavigate`.
Summary:
Remove prop `onNavigate` from these views.
- NavigationAnimatedView
- NavigationCardStack
- NavigationCard

Also, the `sceneProps` onject that is passed to the `renderScene` function
no longer contains `onNavigate`.

The contract that `onNavigate` expects has been vague. Different data flow
system may expect complete different params for such function

For instance,

  * onNavigate({type: 'back'});
  * onNavigate({type: 'BACK'});
  * onNavigate('back'});

We have no intention to unify such generic API since it's more likely to be
constrained by the data flow frameworks such as redux or flux.

Also, passing the prop `onNavigate` all the way down to the component that
invokes the navigation action can be really tedious. We'd expect developer
to either pass such callback (onNavigate) via context or just set up some
kind of static actions that any component can call directly.

`onNavigate` was previously added as a part of (redux-like) reducers-friendly
feature but that's no longer the case.

This new prop `onNavigateBack` is used to explicitly handle the case when the back button or back gesture
is performed.

Reviewed By: ericvicenti

Differential Revision: D3410873

fbshipit-source-id: a703cf0debd474cff33d6610e858b9c4bb3ecbf5
2016-06-09 17:58:27 -07:00
Hedger Wang f7279b4074 Remove `key` from `NavigationState`.
Summary:
NavigationState is composed of many things such as `index`, `routes`.
The only way to effectively compare navigation states is to assume their immutability
and simply compare their references.

That said, `navigationState.key` does not really serves anything useful. The key does
not make a navigation state more unique or comparable.

This diff makes  `navigationState.key` irrelevant thus we could make NavigationState
simpler.

Reviewed By: ericvicenti

Differential Revision: D3351915

fbshipit-source-id: 75d5fa432d2a693f999a91b11e3bff1fdd42e61d
2016-05-26 18:13:23 -07:00
Hedger Wang 1e626027f5 Rename `navigationState.children` to `navigationState.routes`.
Summary:
[Experimental API breaking changes]

The notion of `parent` or `children` in navigaton is misleading. We have no intention to maintain or
build the nested or hierarchical navigation states. To be clear, rename `navigationState.children` to
`navigationState.route`.

Reviewed By: ericvicenti

Differential Revision: D3332115

fbshipit-source-id: c72ed08acaf030fb9c60abf22fb15cc0f44b3485
2016-05-22 16:28:27 -07:00
Hedger Wang fb5d0ff587 D3321403 [NavigationExperimental][CleanUp]: Rename `scene.navigationState` to `scene.route`.
Summary:
[public / experimental API breaking change]

The data type of  `scene.navigationState` is `NavigationRoute`. Rename  `scene.navigationState` to
`scene.route` to avoid confusion such as treating `scene.navigationState` as the actual global navigation
state (type: NavigationState).

Reviewed By: ericvicenti

Differential Revision: D3331076

fbshipit-source-id: 3ed989cc8492d398cbeb1b12186459deb261d1fb
2016-05-20 18:13:30 -07:00
Hedger Wang 807726bcb4 Rename `NavigationState` to `NavigationRoute`, rename `NavigationParentState` to `NavigationState`.
Summary:
This is the first step to clarify and simplify the type definations about navigation state.
For now,  `NavigationParentState` is actually used as the real navigation state and `NavigationState` is used
as a route in navigation, which has been confusion among the APIs.

To be clear, our APIs has no intention and interest in dealing with nested or hierarchical navigation states,
and we should avoid have the name like `ParentState` or `children`.

To fully migrate the types, theer will be a lot of code changes and this is just the first step to rename.

= What's Next?

1. rename `navigationState.children` to `navigationState.routes` (breaking change!)
2. remove `navigationState.key` from its type defination.

Reviewed By: ericvicenti

Differential Revision: D3321403

fbshipit-source-id: 3e39b60f736c1135bc85d8bf2b89027d665e28d4
2016-05-20 14:28:35 -07:00
Hedger Wang 7db7f78dc7 Fork NavigationAnimatedView to NavigationTransitioner
Summary:
- Fork NavigationAnimatedView to NavigationTransitioner
- NavigationAnimatedView will soon be deprecated and we'd ask people to use NavigationTransitioner instead.

Difference between  NavigationTransitioner and NavigationAnimatedView

- prop `applyAnimation` is removed.
- new prop `configureTransition`, `onTransitionStart`, and `onTransitionEnd` are added.

tl;dr;

In NavigationAnimatedView, we `position` (an Animated.Value object) as a proxy of the
transtion which happens whenever the index of navigation state changes.

Because `position` does not change unless navigation index changes, it won't
be possible to build animations for actions that changes the  navigation state
without changing the index.

Also, we believe that the name `Transitioner` is a better name for this core component
that focuses on transitioning. Note that the actual animation work is done via
`<Animated.View />` returnd from the `renderScene` prop.

Reviewed By: ericvicenti

Differential Revision: D3302688

fbshipit-source-id: 720c3a4d3ccf97eb05b038baa44c9e780aad120b
2016-05-18 13:43:31 -07:00
Joe Noon 0e997c6eab fixes a bug where NavigationPropTypes.SceneRenderer was a plain object
Summary:
... used as both a shape and plain object.

this splits them out so both parts can be used as needed.

NavigationPropTypes.SceneRenderer is a PropTypes shape
NavigationPropTypes.SceneRendererProps is the plain object that makes up the shape.
Closes https://github.com/facebook/react-native/pull/7518

Differential Revision: D3317322

Pulled By: ericvicenti

fbshipit-source-id: e8a31e05130e6647b63f68dbef31bc874550948c
2016-05-18 13:13:29 -07:00
Olivier Notteghem 99b106658f Reverted commit D3278698
Summary:
= Breaking Change (for experimental features) =

Major API changes in  NavigationAnimatedView

= New prop `transition` for scene renderer

In NavigationAnimatedView, we should not use `position` as a proxy of the
transtion which happens whenever navigation state changes.

Because `position` does not change unless navigation index changes, it won't
be possible to build animations for actions that replace navigation state
without changing the index.

This diff introduces an abstract prop `transition` that is exposed to the scene
renderers.

= Replace `applyAnimation` with `configureTransition`.

Expose a new optional prop  `configureTransition` that allows people to configure
transitions easily.

For instance, to configure the transition, do this:

```
function configureTransition() {
  return {
    dutation: 123,
    easing: Easing.easeInOut,
  };
}

```
<NavigationAnimatedView configureTransition={configureTransition) />

```

Reviewed By: ericvicenti

Differential Revision: D3278698

fbshipit-source-id: b790b92e0fabb42488ff1135b1c37a3f0e9420f7
2016-05-12 18:58:45 -07:00
Hedger Wang 55c308615a Expose a new prop `transition` for scene renderer.
Summary:
= Breaking Change (for experimental features) =

Major API changes in  NavigationAnimatedView

= New prop `transition` for scene renderer

In NavigationAnimatedView, we should not use `position` as a proxy of the
transtion which happens whenever navigation state changes.

Because `position` does not change unless navigation index changes, it won't
be possible to build animations for actions that replace navigation state
without changing the index.

This diff introduces an abstract prop `transition` that is exposed to the scene
renderers.

= Replace `applyAnimation` with `configureTransition`.

Expose a new optional prop  `configureTransition` that allows people to configure
transitions easily.

For instance, to configure the transition, do this:

```
function configureTransition() {
  return {
    dutation: 123,
    easing: Easing.easeInOut,
  };
}

```
<NavigationAnimatedView configureTransition={configureTransition) />

```

Reviewed By: ericvicenti

Differential Revision: D3278698

fbshipit-source-id: 25ebad286d8b41f46c35c0f32d6023ebd01f19e7
2016-05-11 18:45:31 -07:00
Eric Vicenti b24d471fb2 Backed out D3033933
Reviewed By: hedgerwang

Differential Revision: D3273603

fb-gh-sync-id: e013fd3efd793960d076d2a01447b2a11f483ede
fbshipit-source-id: e013fd3efd793960d076d2a01447b2a11f483ede
2016-05-09 08:33:18 -07:00
Eric Vicenti 472f815e45 NavigationExperimental: Add key to NavigationSceneRendererProps
Summary:
This should simplify the renderScene usage a bit because the react key is required and this will make sure they are rendered with the right key automatically.

It changes the string to make sure people do not rely on this API for anything else.

Reviewed By: javache

Differential Revision: D3033933

fb-gh-sync-id: 036424af28693be32c3a3290f5c6667a6a6a04ac
fbshipit-source-id: 036424af28693be32c3a3290f5c6667a6a6a04ac
2016-05-05 11:58:26 -07:00
Hedger Wang 81c62c5f41 Fix initial scenes rendering.
Summary:The initial layout used to render scenes does not contain the actual
width and height measured and causes the issue as described at
https://github.com/ericvicenti/navigation-rfc/issues/61

The fix is to update the layout and re-render scenes once layout
is modified. Also scenes renderer should also consider the case that
when the layout is not measured yet.

Reviewed By: ericvicenti

Differential Revision: D3162143

fb-gh-sync-id: 197574329d3849cad2a21e07e1bd5e800f74c3ea
fbshipit-source-id: 197574329d3849cad2a21e07e1bd5e800f74c3ea
2016-04-19 15:57:20 -07:00
Sebastian Markbage a80dd9a92a Fix up this pattern var React = require('react-native');
Summary:First I searched for special cases that destructor PropTypes:

```
(?s)React\s*=\s*require\('react\-native'\).*(Children|PropTypes)[^\{\}]*\}\s*=\s*React;
```

I split them up manually.

Then I replaced the React = require('react-native') + destructuring pattern...

```
(?s)(const|var)\s+React\s*=\s*require\('react\-native'\)(.*[^\{\}]*\}\s*=\s*)React;
```

...with...

```
$1 React = require('react');
$1 ReactNative = require('react-native')$2ReactNative;
```

I used lint to figure out if I left some unnecessary imports.

Finally I grepped for just

```
React\s*=\s*require\('react\-native'\)
```

to catch any remaining patterns.

Also, `} = React.NativeModules` -> `} = ReactNative.NativeModules`.

Reviewed By: spicyj

Differential Revision: D3158991

fb-gh-sync-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
fbshipit-source-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
2016-04-08 20:37:22 -07:00
Hedger Wang 62e80a600e Refactor <NavigationHeader /> API.
Summary:- All the public sub component renderers should implement the interface
  NavigationSceneRenderer, which will help to reuse renderer or
  replace renders for different composition.

- Perf improvement. <NavigationHeader /> is rendering way more
  sub component than necessary, we shall fix that.

- No UI or behavior change.

Reviewed By: ericvicenti

Differential Revision: D3091442

fb-gh-sync-id: fba5f7ce74597fa6036b5b216c02b06052801983
shipit-source-id: fba5f7ce74597fa6036b5b216c02b06052801983
2016-03-24 15:49:28 -07:00
Hedger Wang 28649b8cf0 Simplify <NavigationCard />.
Summary:Per offline discussion with ericvicenti,  we'd like to reudce the complexity by
keeping <NavigationCard /> nothing more than just a simple `<Animated.View />`,
which helps us to avoid over generalize the styles, gestures of what the Navigation card
needs to be.

The proposalis to use the same props (NavigationSceneRendererProps) that is used to render
the scene to generate the style and pan handlers needed for the navigation card.

No behavior changes, just implementation details clean up work.

Reviewed By: ericvicenti

Differential Revision: D3037225

fb-gh-sync-id: f6e718a282d25a319f5d8efd3e2ffebc66b2c8cb
shipit-source-id: f6e718a282d25a319f5d8efd3e2ffebc66b2c8cb
2016-03-15 15:59:26 -07:00
Hedger Wang 71e59761c9 Clean up APIs.
Reviewed By: ericvicenti

Differential Revision: D3010136

fb-gh-sync-id: 310864450bfc86ebc2d696f8ef4876b14fa3a57f
shipit-source-id: 310864450bfc86ebc2d696f8ef4876b14fa3a57f
2016-03-04 14:57:31 -08:00