Commit Graph

24 Commits

Author SHA1 Message Date
ahanriat c658cc545f Fix navigation card stack pan responder
Summary:
Hi folks !
🔧 Fix the navigation card stack pan responder when the `vertical` direction is enabled.

**Issue:**
When using a `ScrollView` with the `vertical` direction enabled, the pan handler catch the gesture before the `ScrollView`.

I don't know why there was no default value here for `RESPOND_POSITION_MAX_VERTICAL` 5162eb3254
ericvicenti could you tell me what you think about setting a default value for `RESPOND_POSITION_MAX_VERTICAL` ? 😃

Thanks !!

**EDIT June 15, 2016**
I'll update this PR this week end to provide a way to give custom values as there is no magic value for `RESPOND_POSITION_MAX_VERTICAL`

**EDIT June 24, 2016**
I've added a props `gestureResponseDistance` to control both the `RESPOND_POSITION_MAX_VERTICAL` and `RESPOND_POSITION_MAX_HORIZONTAL`
Closes https://github.com/facebook/react-native/pull/8076

Differential Revision: D3605973

Pulled By: ericvicenti

fbshipit-source-id: 158d88cf8ebbab742bf0b38c217ae502e9dd1963
2016-07-25 11:58:44 -07:00
Sunny Gurnani 730619dabf BugFix: Title should be from scene.route.title
Summary:
Its a minor Bug fix for rendering Title in NavigationHeader
Closes https://github.com/facebook/react-native/pull/8437

Differential Revision: D3507319

Pulled By: ericvicenti

fbshipit-source-id: ff4aa36be3c4991be11aabecbaad952c015a60e2
2016-06-30 17:58:25 -07:00
Hedger Wang d72f844530 Pass TransitionProps to `configureTransition` for <NavigationTransitioner />
Summary:
This follows up the PR https://github.com/facebook/react-native/pull/8306

= Changes

1. Provides the TransitionProps (current and previous) to the function
`configureTransition`.

2. Adds a new member `timing` to `NavigationTransitionSpec`.

= Why

1. Helps people to customize the animation between transitions
2. Helps people to migrate from the deprecated `applyAnimation` prop.

Reviewed By: ericvicenti

Differential Revision: D3470802

fbshipit-source-id: be49becccd53aed7bc57093da1c7dae20153febd
2016-06-29 18:43:47 -07:00
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 c57bac4767 Pass the current and previous transition props to `render`, `onTransitionStart` and `onTransitionEnd`.
Summary: This shall make it convenient to handle transition changes.

Reviewed By: ericvicenti

Differential Revision: D3442291

fbshipit-source-id: aee0ffe18ada40ef133484b4a4999f282c66c181
2016-06-21 14:13:27 -07:00
Hedger Wang 3a6231432a Define the generic `render` prop for NavigationTransitioner to render scenes.
Summary:
This defines the generic function prop `render(props: NavigationTransitionProps)`
to NavigationTransitioner, which enables developer to render scenes, header, overlay,
underlay...etc.

Differential Revision: D3431478

fbshipit-source-id: 93dbc7da23ad8c95565b01f7865d1e8dfd4401f7
2016-06-14 16:43:28 -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
Basil Hosmer ac5636dd59 explicit type args in react-native-github
Reviewed By: vjeux

Differential Revision: D3342856

fbshipit-source-id: ba5a4d5529fc9d1d1efe98cc175d718c5f044a5b
2016-05-24 18:28:26 -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
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
glevi@fb.com 91d4a093ea Fix or suppress errors in react-native
Reviewed By: jeffmo

Differential Revision: D3209973

fb-gh-sync-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
fbshipit-source-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
2016-04-21 19:47:24 -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
Hedger Wang a28e59bd97 move `propTypes`, `defaultProps`, and `childContextTypes` into class.
Summary: This will make the code more readable.

Reviewed By: ericvicenti

Differential Revision: D3096663

fb-gh-sync-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985
fbshipit-source-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985
2016-03-28 16:48:27 -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 206f846507 Move scenes reducer logic into a separate module.
Reviewed By: ericvicenti

Differential Revision: D3068237

fb-gh-sync-id: 0146f38be6024c080ed4e00ac6b7c1e2f3d8e56f
shipit-source-id: 0146f38be6024c080ed4e00ac6b7c1e2f3d8e56f
2016-03-21 11:14:22 -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