/** * Copyright (c) 2015, Facebook, Inc. All rights reserved. * * 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 NavigatorSceneConfigs */ 'use strict'; var Dimensions = require('Dimensions'); var PixelRatio = require('PixelRatio'); var buildStyleInterpolator = require('buildStyleInterpolator'); var merge = require('merge'); var SCREEN_WIDTH = Dimensions.get('window').width; var SCREEN_HEIGHT = Dimensions.get('window').height; var ToTheLeft = { // Rotate *requires* you to break out each individual component of // rotation (x, y, z, w) transformTranslate: { from: {x: 0, y: 0, z: 0}, to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0}, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, // Uncomment to try rotation: // Quick guide to reasoning about rotations: // http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions // transformRotateRadians: { // from: {x: 0, y: 0, z: 0, w: 1}, // to: {x: 0, y: 0, z: -0.47, w: 0.87}, // min: 0, // max: 1, // type: 'linear', // extrapolate: true // }, transformScale: { from: {x: 1, y: 1, z: 1}, to: {x: 0.95, y: 0.95, z: 1}, min: 0, max: 1, type: 'linear', extrapolate: true }, opacity: { from: 1, to: 0.3, min: 0, max: 1, type: 'linear', extrapolate: false, round: 100, }, translateX: { from: 0, to: -Math.round(Dimensions.get('window').width * 0.3), min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, scaleX: { from: 1, to: 0.95, min: 0, max: 1, type: 'linear', extrapolate: true }, scaleY: { from: 1, to: 0.95, min: 0, max: 1, type: 'linear', extrapolate: true }, }; var FromTheRight = { opacity: { value: 1.0, type: 'constant', }, transformTranslate: { from: {x: Dimensions.get('window').width, y: 0, z: 0}, to: {x: 0, y: 0, z: 0}, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, translateX: { from: Dimensions.get('window').width, to: 0, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, scaleX: { value: 1, type: 'constant', }, scaleY: { value: 1, type: 'constant', }, }; var ToTheBack = { // Rotate *requires* you to break out each individual component of // rotation (x, y, z, w) transformTranslate: { from: {x: 0, y: 0, z: 0}, to: {x: 0, y: 0, z: 0}, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, transformScale: { from: {x: 1, y: 1, z: 1}, to: {x: 0.95, y: 0.95, z: 1}, min: 0, max: 1, type: 'linear', extrapolate: true }, opacity: { from: 1, to: 0.3, min: 0, max: 1, type: 'linear', extrapolate: false, round: 100, }, scaleX: { from: 1, to: 0.95, min: 0, max: 1, type: 'linear', extrapolate: true }, scaleY: { from: 1, to: 0.95, min: 0, max: 1, type: 'linear', extrapolate: true }, }; var FromTheFront = { opacity: { value: 1.0, type: 'constant', }, transformTranslate: { from: {x: 0, y: Dimensions.get('window').height, z: 0}, to: {x: 0, y: 0, z: 0}, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, translateY: { from: Dimensions.get('window').height, to: 0, min: 0, max: 1, type: 'linear', extrapolate: true, round: PixelRatio.get(), }, scaleX: { value: 1, type: 'constant', }, scaleY: { value: 1, type: 'constant', }, }; var Interpolators = { Vertical: { into: buildStyleInterpolator(FromTheFront), out: buildStyleInterpolator(ToTheBack), }, Horizontal: { into: buildStyleInterpolator(FromTheRight), out: buildStyleInterpolator(ToTheLeft), }, }; // These are meant to mimic iOS default behavior var PastPointOfNoReturn = { horizontal: function(location) { return location > SCREEN_WIDTH * 3 / 5; }, vertical: function(location) { return location > SCREEN_HEIGHT * 3 / 5; }, }; var BaseConfig = { // When false, all gestures are ignored for this scene enableGestures: true, // How far the swipe must drag to start transitioning gestureDetectMovement: 2, // Amplitude of release velocity that is considered still notMoving: 0.3, // Velocity to start at when transitioning without gesture defaultTransitionVelocity: 1.5, // Fraction of directional move required. directionRatio: 0.66, // Velocity to transition with when the gesture release was "not moving" snapVelocity: 2, // Rebound spring parameters when transitioning FROM this scene springFriction: 26, springTension: 200, // Defaults for horizontal transitioning: isVertical: false, screenDimension: SCREEN_WIDTH, // Region that can trigger swipe. iOS default is 30px from the left edge edgeHitWidth: 30, // Point at which a non-velocity release will cause nav pop pastPointOfNoReturn: PastPointOfNoReturn.horizontal, // Animation interpolators for this transition interpolators: Interpolators.Horizontal, }; var NavigatorSceneConfigs = { PushFromRight: merge(BaseConfig, { // We will want to customize this soon }), FloatFromRight: merge(BaseConfig, { // We will want to customize this soon }), FloatFromBottom: merge(BaseConfig, { edgeHitWidth: 150, interpolators: Interpolators.Vertical, isVertical: true, pastPointOfNoReturn: PastPointOfNoReturn.vertical, screenDimension: SCREEN_HEIGHT, }), }; module.exports = NavigatorSceneConfigs;