mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
55c308615a
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
124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule NavigationPropTypes
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
import type {
|
|
NavigationSceneRendererProps,
|
|
} from 'NavigationTypeDefinition';
|
|
|
|
/**
|
|
* React component PropTypes Definitions. Consider using this as a supplementary
|
|
* measure with `NavigationTypeDefinition`. This helps to capture the propType
|
|
* error at run-time, where as `NavigationTypeDefinition` capture the flow
|
|
* type check errors at build time.
|
|
*/
|
|
|
|
const Animated = require('Animated');
|
|
const React = require('React');
|
|
|
|
const {PropTypes} = React;
|
|
|
|
/* NavigationAction */
|
|
const action = PropTypes.shape({
|
|
type: PropTypes.string.isRequired,
|
|
});
|
|
|
|
/* NavigationAnimatedValue */
|
|
const animatedValue = PropTypes.instanceOf(Animated.Value);
|
|
|
|
/* NavigationState */
|
|
const navigationState = PropTypes.shape({
|
|
key: PropTypes.string.isRequired,
|
|
});
|
|
|
|
/* NavigationParentState */
|
|
const navigationParentState = PropTypes.shape({
|
|
index: PropTypes.number.isRequired,
|
|
key: PropTypes.string.isRequired,
|
|
children: PropTypes.arrayOf(navigationState),
|
|
});
|
|
|
|
/* NavigationLayout */
|
|
const layout = PropTypes.shape({
|
|
height: animatedValue,
|
|
initHeight: PropTypes.number.isRequired,
|
|
initWidth: PropTypes.number.isRequired,
|
|
isMeasured: PropTypes.bool.isRequired,
|
|
width: animatedValue,
|
|
});
|
|
|
|
/* NavigationScene */
|
|
const scene = PropTypes.shape({
|
|
index: PropTypes.number.isRequired,
|
|
isStale: PropTypes.bool.isRequired,
|
|
key: PropTypes.string.isRequired,
|
|
navigationState,
|
|
});
|
|
|
|
/* NavigationSceneRendererProps */
|
|
const SceneRenderer = {
|
|
layout: layout.isRequired,
|
|
navigationState: navigationParentState.isRequired,
|
|
onNavigate: PropTypes.func.isRequired,
|
|
position: animatedValue.isRequired,
|
|
scene: scene.isRequired,
|
|
scenes: PropTypes.arrayOf(scene).isRequired,
|
|
transition: animatedValue.isRequired,
|
|
};
|
|
|
|
/* NavigationPanPanHandlers */
|
|
const panHandlers = PropTypes.shape({
|
|
onMoveShouldSetResponder: PropTypes.func.isRequired,
|
|
onMoveShouldSetResponderCapture: PropTypes.func.isRequired,
|
|
onResponderEnd: PropTypes.func.isRequired,
|
|
onResponderGrant: PropTypes.func.isRequired,
|
|
onResponderMove: PropTypes.func.isRequired,
|
|
onResponderReject: PropTypes.func.isRequired,
|
|
onResponderRelease: PropTypes.func.isRequired,
|
|
onResponderStart: PropTypes.func.isRequired,
|
|
onResponderTerminate: PropTypes.func.isRequired,
|
|
onResponderTerminationRequest: PropTypes.func.isRequired,
|
|
onStartShouldSetResponder: PropTypes.func.isRequired,
|
|
onStartShouldSetResponderCapture: PropTypes.func.isRequired,
|
|
});
|
|
|
|
/**
|
|
* Helper function that extracts the props needed for scene renderer.
|
|
*/
|
|
function extractSceneRendererProps(
|
|
props: NavigationSceneRendererProps,
|
|
): NavigationSceneRendererProps {
|
|
return {
|
|
layout: props.layout,
|
|
navigationState: props.navigationState,
|
|
onNavigate: props.onNavigate,
|
|
position: props.position,
|
|
scene: props.scene,
|
|
scenes: props.scenes,
|
|
transition: props.transition,
|
|
};
|
|
}
|
|
|
|
module.exports = {
|
|
// helpers
|
|
extractSceneRendererProps,
|
|
|
|
// Bundled propTypes.
|
|
SceneRenderer,
|
|
|
|
// propTypes
|
|
action,
|
|
navigationParentState,
|
|
navigationState,
|
|
panHandlers,
|
|
};
|