Summary:
Not a API change, but this may break the layout of exisitng apps that
uses NavigationHeader.
For now, NavigationHeader uses absolute position, which makes it hard for
NavigationCardStack to determine the height of the scenes.
Theoretically, the height of the scenes would be the height of the cards
stack minus the height of the header.
That said, if we want to support the headers with different height (e.g.
MyIOSHeader or MyAndroidHeader), we're forced to expose the height of the
headers and manually compute the height of the scenes.
Alternatively, if the header does not use absolute position, the height
of the scenes can adjust automatically with flex box, and that's what this
commit is about to do.
Reviewed By: ericvicenti
Differential Revision: D3671119
fbshipit-source-id: 26e48f801da3661c5d7dce4752ba927621172f4a
Summary:
Currently, the NavigationExperimental `Header` only renders correctly on iOS when the system status bar is visible. There are legitimate reasons to hide the status bar, especially when displaying in landscape.
This PR adds a `statusBarHeight` prop to the header, which defaults to 20 on iOS and 0 (no status bar) on Android. Changing this value causes the extra space at the top of the header reserved for the status bar to change.
I've tested this change in my own app on iOS with `statusBarHeight` set to 0, 20, and `undefined`, and ensured that it works correctly.
Closes https://github.com/facebook/react-native/pull/8983
Differential Revision: D3668637
fbshipit-source-id: 777a0c53e8fd1caa35ce4980ca3118adcf83b62d
Summary:
NavigationCardStack is a custom component, and its API should be explicit, not
too generic..
In NavigationCardStack, the prop `renderOverlay` is actually used to render
the NavigationHeader, and we uses absolute position to build the layout for
the header and the body.
One of the problem with using absolute postion and fixed height to build the
layout that contains the header is that the header can't have variant height
easily.
Ideally, if the layout for the header used flex-box, we'd ve able to be more
adaptive to deal with the header that has variant height.
That said, let's rename `renderOverlay` to `renderHeader`, then build the
proper layout that explicitly works better with the header.
If we to need to support overlay in navigation, we may consider add
`renderOverlay` later, if it's really necessary.
Reviewed By: ericvicenti
Differential Revision: D3670224
fbshipit-source-id: ff04acfe9dc995cb57117b3fd9b07d5f97b9c6ee
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
Summary: Provide RTL support in NavigationPager
Reviewed By: fkgozali
Differential Revision: D3536850
fbshipit-source-id: 29890a125dc5e001b4c10208cd53bfeca0d9b5c3
Summary:
Decreased the distance threshold so that the user doesn't need to swipe a large distance to
set the pan responder.
Also, set a threshold for the velocity so that a simple flick can be detected.
Reviewed By: hedgerwang
Differential Revision: D3540354
fbshipit-source-id: 251a4f14dc014bc32b3a83fa8de419f86ca40b84
Summary:
With facebook/react-native@c57bac4, `NavigationTransitioner` passes the currently active `scene` in transition `props`. This simplifies the handling of transition changes when rendering overlay.
🍺
Closes https://github.com/facebook/react-native/pull/8298
Differential Revision: D3533447
Pulled By: ericvicenti
fbshipit-source-id: df568dc5cf5d57d8948b9f0400a8d693cf5564e1
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.
Reviewed By: astreet
Differential Revision: D3509863
fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
Summary:
This allows the `NavigationCard` style to be extended, the default `backgroundColor` style of the `NavigationCard` is not applicable to all apps.
Fixes issue #8116. PR #8115 was already made for this but didn't pass CI checks.
**Test plan**
When rendering a NavigationCardStack, add
```
const { CardStack } = NavigationExperimental;
...
<CardStack cardStyle={{ backgroundColor: 'purple' }} />
```
to see that the `NavigationCard` background has changed to purple.
Closes https://github.com/facebook/react-native/pull/8471
Differential Revision: D3508849
Pulled By: javache
fbshipit-source-id: 65703cccf3d01def9f2060256f0ff564bbdc47d3
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
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
Summary:
NavigationCard is wrapped in a container, which breaks statics so apply the statics to the wrapped class instead.
Closes https://github.com/facebook/react-native/pull/7483
Differential Revision: D3336226
Pulled By: ericvicenti
fbshipit-source-id: ae28e7be7a6227700c2c11081c5605f3667d1494
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
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
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
Summary:
The containers in NavigationExperimental are not appropraite because the state should be held by the app's architecture, be it redux, flux, or simple component state.
This diff moves the examples over to simple component state, but there are several other examples of how to use NavigationAnimatedView and the navigation reducers with redux:
- https://github.com/jlyman/RN-NavigationExperimental-Redux-Example
- Switching the f8 app with redux to navigation experimental: https://github.com/fbsamples/f8app/pull/14
Reviewed By: hedgerwang
Differential Revision: D3219911
fb-gh-sync-id: eb0b323e2c165c32027fbd00dc6197ad441d6552
fbshipit-source-id: eb0b323e2c165c32027fbd00dc6197ad441d6552
Summary:
the prop type check for NavigationCard -> SceneView -> sceneRendererProps is wrong.
Fix it.
Reviewed By: ericvicenti
Differential Revision: D3265049
fb-gh-sync-id: 16e89c932f0f962db4b6a647d62d255ba98f6156
fbshipit-source-id: 16e89c932f0f962db4b6a647d62d255ba98f6156
Summary:
NavigationLegacyNavigator was originally created to help people to migrate to the new
navigation library without API changes. Therefore we'd have to port all the old APIs that
don't necessarily seem align well with the new navigation library.
Consider the production usage of NavigationLegacyNavigator does not exist, it's better
to kill it and we'd just rename the `Navigator` to `NavigatorDeprecated` later instead.
Reviewed By: ericvicenti
Differential Revision: D3263704
fb-gh-sync-id: a851fda1516d694cb7d119f5a1344f8fc676f7fd
fbshipit-source-id: a851fda1516d694cb7d119f5a1344f8fc676f7fd
Summary: This adds a new SceneView with a shouldComponentUpdate policy of only re-rendering when the scene's state changes. This allows avoidance of extra re-renders. Results in a much smoother back-swipe gesture because we no longer re-render scenes as we transition from gesture to animation.
Reviewed By: hedgerwang
Differential Revision: D3219545
fb-gh-sync-id: 7c04e0e4ebb40d1e57ef7af11e2e54adf4f52aa0
fbshipit-source-id: 7c04e0e4ebb40d1e57ef7af11e2e54adf4f52aa0
Summary:
THis addresses the issue as reported at
https://github.com/facebook/react-native/issues/6732
Use a higher order component `NavigationPointerEventsContainer` to manager the
prop `pointerEvents` for `NavigationCard`.
The idea is that the scene's content should not be interactive while the scene is
transitioning.
Reviewed By: ericvicenti
Differential Revision: D3205106
fb-gh-sync-id: db7172941155f34447495199d2c029f5c7e75f30
fbshipit-source-id: db7172941155f34447495199d2c029f5c7e75f30
Summary:
THis addresses the issue as reported at
https://github.com/facebook/react-native/issues/6732
Use a higher order component `NavigationPointerEventsContainer` to manager the
prop `pointerEvents` for `NavigationCard`.
The idea is that the scene's content should not be interactive while the scene is
transitioning.
Reviewed By: ericvicenti
Differential Revision: D3205106
fb-gh-sync-id: c0fd22e8c8b83a5952351c5a3a302b2fca5ba5de
fbshipit-source-id: c0fd22e8c8b83a5952351c5a3a302b2fca5ba5de
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: D3203245
fb-gh-sync-id: 4de89b9b43bc993d7c970c831458bd31c094073e
fbshipit-source-id: 4de89b9b43bc993d7c970c831458bd31c094073e
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
Summary:I basically want to build a transparent NavigationHeader, so I need to be able to set the pointerEvents of the NavigationHeader.
Closes https://github.com/facebook/react-native/pull/6881
Differential Revision: D3168620
Pulled By: ericvicenti
fb-gh-sync-id: 679f3f5858142f468be329771ea281c31e1f0d40
fbshipit-source-id: 679f3f5858142f468be329771ea281c31e1f0d40
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
Summary:When navigating from one view to another you can still interact with
the current view. This means that a user can tap a button multiple times and trigger multiple transitions.
The view that is being transitioned off the screen should not be allowed to
receive any user interaction while it is being transitioned.
Reviewed By: javache
Differential Revision: D3143202
fb-gh-sync-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
fbshipit-source-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
Summary:There was an issue where the title component could overlap the left component and it would block the left component from receiving touches.
I only stumbled across this because we have a default title component which stretches most of the width and it was covering the edge of the left component. I think left/right components are more likely to be actionable than the title component so they should take priority in the touch order (ie. be rendered last).
Closes https://github.com/facebook/react-native/pull/6618
Differential Revision: D3144191
fb-gh-sync-id: 9ccd31714b2401d02eaaf4b5b24ed6afb60041c7
fbshipit-source-id: 9ccd31714b2401d02eaaf4b5b24ed6afb60041c7
Summary: The iOS native card stack only responds if the gesture starts on the left 30 px on the screen.
Reviewed By: hedgerwang
Differential Revision: D3137201
fb-gh-sync-id: 40e28d5696870b98731e92d6e42d00638b9bb15f
fbshipit-source-id: 40e28d5696870b98731e92d6e42d00638b9bb15f
Summary: This will make the code more readable.
Reviewed By: ericvicenti
Differential Revision: D3096663
fb-gh-sync-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985
fbshipit-source-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985
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
Summary:Currently there?s an inconsistency between the animations used in `NavigationAnimatedView` (`spring`) and those in `NavigationCardStack` (`timing`), which is noticeable when switching between the two implementations.
By removing the `_applyAnimation` method, the `NavigationAnimatedView` will simply use its [default `applyAnimation`](6c22a2174e/Libraries/NavigationExperimental/NavigationAnimatedView.js (L56-L67)), making the animation styles the same.
**Before** (with `Animated.timing`)
Video: http://quick.as/Yexku8DdJ
**After** (with the default `NavigationAnimatedView` animations)
Video: http://quick.as/qrqbsnj8n
Closes https://github.com/facebook/react-native/pull/6636
Differential Revision: D3094638
Pulled By: ericvicenti
fb-gh-sync-id: 6e1c7c54b4ef102c4003719381d334d2c6f7a531
shipit-source-id: 6e1c7c54b4ef102c4003719381d334d2c6f7a531
Summary: We need to support animation and gesture for Pager.
Reviewed By: ericvicenti
Differential Revision: D3066596
fb-gh-sync-id: 1c1a3d34b4298b4b0dd158f817057ae22dea72f4
shipit-source-id: 1c1a3d34b4298b4b0dd158f817057ae22dea72f4
David Aurelio
Hedger Wang
Kyle Corbitt
Florent Le Gall
ahanriat
Dhananjoy Biswas
Mengjue Wang
Nivetha Singara Vadivelu
Jake Murzy
Jeff Morrison
Ian Childs
JasperStam
Sunny Gurnani
Basil Hosmer
Marco Bonaldo
Gabe Levi
James Ide
Joe Noon
Eric Vicenti
Jason Prado
Christoph Pojer
Konstantin Raev
Christian Meunier
glevi@fb.com
Martin Rädlinger
Sebastian Markbage
Morgan Pretty
Nicolas Charpentier
Dom Christie