diff --git a/packages/stack/example/App.js b/packages/stack/example/App.js index b2145732..e0628556 100644 --- a/packages/stack/example/App.js +++ b/packages/stack/example/App.js @@ -24,7 +24,6 @@ import StackWithDrawer from './src/StackWithDrawer'; import HeaderPreset from './src/HeaderPreset'; import { HeaderBackgroundDefault, - HeaderBackgroundTranslate, HeaderBackgroundFade, } from './src/HeaderBackgrounds'; diff --git a/packages/stack/example/src/HeaderBackgrounds.js b/packages/stack/example/src/HeaderBackgrounds.js index 64bf477a..52213f99 100644 --- a/packages/stack/example/src/HeaderBackgrounds.js +++ b/packages/stack/example/src/HeaderBackgrounds.js @@ -1,6 +1,5 @@ import * as React from 'react'; import { StyleSheet, View, Text } from 'react-native'; -import Animated from 'react-native-reanimated'; import { createStackNavigator, TransitionPresets, diff --git a/packages/stack/example/src/TransparentStack.js b/packages/stack/example/src/TransparentStack.js index 6f333c33..83a92701 100644 --- a/packages/stack/example/src/TransparentStack.js +++ b/packages/stack/example/src/TransparentStack.js @@ -3,8 +3,6 @@ import { Button, View, Text } from 'react-native'; import { createStackNavigator } from 'react-navigation-stack'; import Animated from 'react-native-reanimated'; -const { interpolate, multiply, cond } = Animated; - class ListScreen extends React.Component { render() { return ( @@ -81,15 +79,11 @@ export default createStackNavigator( navigationOptions: { gesturesEnabled: false, }, - cardStyleInterpolator: ({ progress: { current }, closing }) => { - const opacity = cond( - closing, - current, - interpolate(current, { - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }) - ); + cardStyleInterpolator: ({ progress: { current } }) => { + const opacity = Animated.interpolate(current, { + inputRange: [0, 0.5, 0.9, 1], + outputRange: [0, 0.25, 0.7, 1], + }); return { cardStyle: { diff --git a/packages/stack/jest-setup.js b/packages/stack/jest-setup.js index 46e76462..e2b0077b 100644 --- a/packages/stack/jest-setup.js +++ b/packages/stack/jest-setup.js @@ -3,4 +3,117 @@ jest.mock('react-native-gesture-handler', () => ({ PanGestureHandler: 'PanGestureHandler', BaseButton: 'BaseButton', + State: { + UNDETERMINED: 0, + FAILED: 1, + BEGAN: 2, + CANCELLED: 3, + ACTIVE: 4, + END: 5, + }, })); + +jest.mock('react-native-reanimated', () => { + const { View, Text, Image, ScrollView } = require('react-native'); + + const NOOP = () => undefined; + + return { + __esModule: true, + + default: { + SpringUtils: { + makeDefaultConfig: NOOP, + makeConfigFromBouncinessAndSpeed: NOOP, + makeConfigFromOrigamiTensionAndFriction: NOOP, + }, + + View, + Text, + Image, + ScrollView, + Code: () => null, + + Clock: NOOP, + Node: NOOP, + Value: NOOP, + + Extrapolate: { + EXTEND: 'extend', + CLAMP: 'clamp', + IDENTITY: 'identity', + }, + + add: NOOP, + sub: NOOP, + multiply: NOOP, + divide: NOOP, + pow: NOOP, + modulo: NOOP, + sqrt: NOOP, + sin: NOOP, + cos: NOOP, + tan: NOOP, + acos: NOOP, + asin: NOOP, + atan: NOOP, + exp: NOOP, + round: NOOP, + floor: NOOP, + ceil: NOOP, + lessThan: NOOP, + eq: NOOP, + greaterThan: NOOP, + lessOrEq: NOOP, + greaterOrEq: NOOP, + neq: NOOP, + and: NOOP, + or: NOOP, + defined: NOOP, + not: NOOP, + set: NOOP, + concat: NOOP, + cond: NOOP, + block: NOOP, + call: NOOP, + debug: NOOP, + onChange: NOOP, + startClock: NOOP, + stopClock: NOOP, + clockRunning: NOOP, + event: NOOP, + abs: NOOP, + acc: NOOP, + color: NOOP, + diff: NOOP, + diffClamp: NOOP, + interpolate: NOOP, + max: NOOP, + min: NOOP, + + decay: NOOP, + timing: NOOP, + spring: NOOP, + + useCode: NOOP, + }, + + Easing: { + linear: NOOP, + ease: NOOP, + quad: NOOP, + cubic: NOOP, + poly: () => NOOP, + sin: NOOP, + circle: NOOP, + exp: NOOP, + elastic: () => NOOP, + back: () => NOOP, + bounce: () => NOOP, + bezier: () => NOOP, + in: () => NOOP, + out: () => NOOP, + inOut: () => NOOP, + }, + }; +}); diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap index 1e306d24..3d8b85c7 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap @@ -1,347 +1,471 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Nested navigators renders succesfully as direct child 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - + - + maxDeltaY={20} + minOffsetX={5} + > + + + + + + + + + + + - + - - + , + + + + + + + + + , +] `; exports[`Nested navigators throw when trying to pass navigation prop 1`] = `"No \\"routes\\" found in navigation state. Did you try to pass the navigation prop of a React component to a Navigator child? See https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop"`; diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap index 4a0b2651..da8bdc9c 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap @@ -1,370 +1,575 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`StackNavigator applies correct values when headerRight is present 1`] = ` - - - - - - - - + + + + + + + + , + + + - + + + + + - - - - - Welcome anonymous - - - - - - - - + Welcome anonymous + + + + - - + , +] `; exports[`StackNavigator renders successfully 1`] = ` - - - - - - - - + + + + + + + + , + + + - + + + + + - - - - - Welcome anonymous - - - - - + Welcome anonymous + - - + , +] `; diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index c2f3c87d..62f79c66 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -63,13 +63,13 @@ export type HeaderScene = { export type HeaderOptions = { headerTitle?: string; headerTitleStyle?: StyleProp; + headerTitleContainerStyle?: StyleProp; headerTintColor?: string; headerTitleAllowFontScaling?: boolean; headerBackAllowFontScaling?: boolean; headerBackTitle?: string; headerBackTitleStyle?: StyleProp; headerTruncatedBackTitle?: string; - headerTitleContainerStyle?: StyleProp; headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode; headerLeftContainerStyle?: StyleProp; headerRight?: () => React.ReactNode; @@ -117,7 +117,7 @@ export type SceneDescriptor = { export type HeaderBackButtonProps = { disabled?: boolean; - onPress?: () => void; + onPress: () => void; pressColorAndroid?: string; backImage?: (props: { tintColor: string }) => React.ReactNode; tintColor?: string;