mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
28649b8cf0
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
122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
/**
|
|
* Copyright (c) 2013-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.
|
|
*
|
|
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
|
|
* all intellectual property and other proprietary rights, in and to the React
|
|
* Native CustomComponents software (the "Software"). Subject to your
|
|
* compliance with these terms, you are hereby granted a non-exclusive,
|
|
* worldwide, royalty-free copyright license to (1) use and copy the Software;
|
|
* and (2) reproduce and distribute the Software as part of your own software
|
|
* ("Your Software"). Facebook reserves all rights not expressly granted to
|
|
* you in this license agreement.
|
|
*
|
|
* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
|
|
* OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
|
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
|
|
* IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
|
|
* EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
|
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
|
|
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
|
|
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
|
|
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
|
|
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*
|
|
* @providesModule NavigationCardStackStyleInterpolator
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* Predefined interpolator that renders the animated style for NavigationCard.
|
|
*
|
|
*/
|
|
|
|
import type {
|
|
NavigationSceneRendererProps,
|
|
} from 'NavigationTypeDefinition';
|
|
|
|
function forHorizontal(props: NavigationSceneRendererProps): Object {
|
|
const {
|
|
layout,
|
|
position,
|
|
scene,
|
|
} = props;
|
|
|
|
const index = scene.index;
|
|
const inputRange = [index - 1, index, index + 1];
|
|
const width = layout.initWidth;
|
|
|
|
const opacity = position.interpolate({
|
|
inputRange,
|
|
outputRange: [1, 1, 0.3],
|
|
});
|
|
|
|
const scale = position.interpolate({
|
|
inputRange,
|
|
outputRange: [1, 1, 0.95],
|
|
});
|
|
|
|
const translateY = 0;
|
|
const translateX = position.interpolate({
|
|
inputRange,
|
|
outputRange: [width, 0, -10],
|
|
});
|
|
|
|
return {
|
|
opacity,
|
|
transform: [
|
|
{ scale },
|
|
{ translateX },
|
|
{ translateY },
|
|
],
|
|
};
|
|
}
|
|
|
|
function forVertical(props: NavigationSceneRendererProps): Object {
|
|
const {
|
|
layout,
|
|
position,
|
|
scene,
|
|
} = props;
|
|
|
|
const index = scene.index;
|
|
const inputRange = [index - 1, index, index + 1];
|
|
const height = layout.initHeight;
|
|
|
|
const opacity = position.interpolate({
|
|
inputRange,
|
|
outputRange: [1, 1, 0.3],
|
|
});
|
|
|
|
const scale = position.interpolate({
|
|
inputRange,
|
|
outputRange: [1, 1, 0.95],
|
|
});
|
|
|
|
const translateX = 0;
|
|
const translateY = position.interpolate({
|
|
inputRange,
|
|
outputRange: [height, 0, -10],
|
|
});
|
|
|
|
return {
|
|
opacity,
|
|
transform: [
|
|
{ scale },
|
|
{ translateX },
|
|
{ translateY },
|
|
],
|
|
};
|
|
}
|
|
|
|
module.exports = {
|
|
forHorizontal,
|
|
forVertical,
|
|
};
|