mirror of
https://github.com/status-im/react-native.git
synced 2025-02-06 22:54:27 +00:00
99b106658f
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
115 lines
2.8 KiB
JavaScript
115 lines
2.8 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 NavigationTypeDefinition
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
const Animated = require('Animated');
|
|
|
|
// Object Instances
|
|
|
|
export type NavigationAnimatedValue = Animated.Value;
|
|
|
|
// Value & Structs.
|
|
|
|
export type NavigationGestureDirection = 'horizontal' | 'vertical';
|
|
|
|
export type NavigationState = {
|
|
key: string,
|
|
};
|
|
|
|
export type NavigationParentState = {
|
|
index: number,
|
|
key: string,
|
|
children: Array<NavigationState>,
|
|
};
|
|
|
|
export type NavigationAction = any;
|
|
|
|
export type NavigationLayout = {
|
|
height: NavigationAnimatedValue,
|
|
initHeight: number,
|
|
initWidth: number,
|
|
isMeasured: boolean,
|
|
width: NavigationAnimatedValue,
|
|
};
|
|
|
|
export type NavigationPosition = NavigationAnimatedValue;
|
|
|
|
export type NavigationScene = {
|
|
index: number,
|
|
isStale: boolean,
|
|
key: string,
|
|
navigationState: NavigationState,
|
|
};
|
|
|
|
export type NavigationSceneRendererProps = {
|
|
// The layout of the containing view of the scenes.
|
|
layout: NavigationLayout,
|
|
|
|
// The navigation state of the containing view.
|
|
navigationState: NavigationParentState,
|
|
|
|
// Callback to navigation with an action.
|
|
onNavigate: NavigationActionCaller,
|
|
|
|
// The progressive index of the containing view's navigation state.
|
|
position: NavigationPosition,
|
|
|
|
// The scene to render.
|
|
scene: NavigationScene,
|
|
|
|
// All the scenes of the containing view's.
|
|
scenes: Array<NavigationScene>,
|
|
};
|
|
|
|
export type NavigationPanPanHandlers = {
|
|
onMoveShouldSetResponder: Function,
|
|
onMoveShouldSetResponderCapture: Function,
|
|
onResponderEnd: Function,
|
|
onResponderGrant: Function,
|
|
onResponderMove: Function,
|
|
onResponderReject: Function,
|
|
onResponderRelease: Function,
|
|
onResponderStart: Function,
|
|
onResponderTerminate: Function,
|
|
onResponderTerminationRequest: Function,
|
|
onStartShouldSetResponder: Function,
|
|
onStartShouldSetResponderCapture: Function,
|
|
};
|
|
|
|
// Functions.
|
|
|
|
export type NavigationActionCaller = Function;
|
|
|
|
export type NavigationAnimationSetter = (
|
|
position: NavigationAnimatedValue,
|
|
newState: NavigationParentState,
|
|
lastState: NavigationParentState,
|
|
) => void;
|
|
|
|
export type NavigationRenderer = (
|
|
navigationState: ?NavigationState,
|
|
onNavigate: NavigationActionCaller,
|
|
) => ReactElement;
|
|
|
|
export type NavigationReducer = (
|
|
state: ?NavigationState,
|
|
action: ?NavigationAction,
|
|
) => NavigationState;
|
|
|
|
export type NavigationSceneRenderer = (
|
|
props: NavigationSceneRendererProps,
|
|
) => ?ReactElement;
|
|
|
|
export type NavigationStyleInterpolator = (
|
|
props: NavigationSceneRendererProps,
|
|
) => Object;
|