From 1ae8cac12bdd723a511250f63a97fcd2eabbaa61 Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Sat, 25 May 2019 00:58:11 +0200 Subject: [PATCH 01/56] refactor: rewrite based on reanimated --- example/.eslintrc | 1 + example/App.js | 7 +- example/src/HeaderBackgrounds.js | 19 +- example/src/HeaderPreset.js | 9 +- example/src/ImageStack.js | 2 +- example/src/SimpleStack.js | 13 +- example/src/TransparentStack.js | 37 +- package.json | 7 +- .../CardStyleInterpolators.tsx | 140 +++ .../HeaderStyleInterpolators.tsx | 100 ++ src/TransitionConfigs/TransitionPresets.tsx | 69 ++ src/TransitionConfigs/TransitionSpecs.tsx | 43 + src/index.tsx | 44 +- src/index.web.tsx | 33 - .../__tests__/StackNavigator.test.tsx | 4 +- src/navigators/createStackNavigator.tsx | 2 +- src/types.tsx | 243 ++-- src/utils/ReactNativeFeatures.tsx | 11 - src/utils/StackGestureContext.tsx | 4 +- src/utils/clamp.tsx | 9 - ...SceneIndicesForInterpolationInputRange.tsx | 49 - src/utils/memoize.tsx | 33 + src/utils/shallowEqual.tsx | 58 - src/views/Header/BackButtonWeb.tsx | 16 - src/views/Header/Header.tsx | 845 +------------- src/views/Header/HeaderBackButton.tsx | 197 ++-- src/views/Header/HeaderBackground.tsx | 29 + src/views/Header/HeaderContainer.tsx | 86 ++ src/views/Header/HeaderSegment.tsx | 256 +++++ src/views/Header/HeaderStyleInterpolator.tsx | 406 ------- src/views/Header/HeaderTitle.tsx | 61 +- src/views/Header/ModularHeaderBackButton.tsx | 161 --- src/views/ScenesReducer.tsx | 227 ---- src/views/Stack/Card.tsx | 501 ++++++++ src/views/Stack/Stack.tsx | 283 +++++ src/views/Stack/StackView.tsx | 205 ++++ src/views/Stack/Swipeable.tsx | 105 ++ src/views/StackView/StackView.tsx | 142 --- src/views/StackView/StackViewCard.tsx | 141 --- src/views/StackView/StackViewLayout.tsx | 1009 ----------------- .../StackView/StackViewStyleInterpolator.tsx | 220 ---- .../StackView/StackViewTransitionConfigs.tsx | 137 --- .../createPointerEventsContainer.tsx | 119 -- src/views/Transitioner.tsx | 382 ------- src/views/__tests__/ScenesReducer.test.tsx | 348 ------ src/views/__tests__/Transitioner.test.tsx | 60 - types/@react-navigation/core.d.ts | 10 +- yarn.lock | 14 +- 48 files changed, 2257 insertions(+), 4640 deletions(-) create mode 100644 src/TransitionConfigs/CardStyleInterpolators.tsx create mode 100644 src/TransitionConfigs/HeaderStyleInterpolators.tsx create mode 100644 src/TransitionConfigs/TransitionPresets.tsx create mode 100644 src/TransitionConfigs/TransitionSpecs.tsx delete mode 100644 src/index.web.tsx delete mode 100644 src/utils/ReactNativeFeatures.tsx delete mode 100644 src/utils/clamp.tsx delete mode 100644 src/utils/getSceneIndicesForInterpolationInputRange.tsx create mode 100644 src/utils/memoize.tsx delete mode 100644 src/utils/shallowEqual.tsx delete mode 100644 src/views/Header/BackButtonWeb.tsx create mode 100644 src/views/Header/HeaderBackground.tsx create mode 100644 src/views/Header/HeaderContainer.tsx create mode 100644 src/views/Header/HeaderSegment.tsx delete mode 100644 src/views/Header/HeaderStyleInterpolator.tsx delete mode 100644 src/views/Header/ModularHeaderBackButton.tsx delete mode 100644 src/views/ScenesReducer.tsx create mode 100755 src/views/Stack/Card.tsx create mode 100755 src/views/Stack/Stack.tsx create mode 100644 src/views/Stack/StackView.tsx create mode 100644 src/views/Stack/Swipeable.tsx delete mode 100644 src/views/StackView/StackView.tsx delete mode 100644 src/views/StackView/StackViewCard.tsx delete mode 100644 src/views/StackView/StackViewLayout.tsx delete mode 100644 src/views/StackView/StackViewStyleInterpolator.tsx delete mode 100644 src/views/StackView/StackViewTransitionConfigs.tsx delete mode 100644 src/views/StackView/createPointerEventsContainer.tsx delete mode 100644 src/views/Transitioner.tsx delete mode 100644 src/views/__tests__/ScenesReducer.test.tsx delete mode 100644 src/views/__tests__/Transitioner.test.tsx diff --git a/example/.eslintrc b/example/.eslintrc index 44dea7d2f..acf0a1a22 100644 --- a/example/.eslintrc +++ b/example/.eslintrc @@ -7,6 +7,7 @@ [ 'react-navigation-stack', 'react-native-gesture-handler', + 'react-native-reanimated', 'react-native-vector-icons', ], }, diff --git a/example/App.js b/example/App.js index 80d4dee96..b21457321 100644 --- a/example/App.js +++ b/example/App.js @@ -36,8 +36,8 @@ import { useScreens } from 'react-native-screens'; I18nManager.forceRTL(false); const data = [ - { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' }, { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' }, + { component: SimpleStack, title: 'Wipe Preset', routeName: 'SimpleStack' }, { component: ImageStack, title: 'Image', routeName: 'ImageStack' }, { component: ModalStack, title: 'Modal', routeName: 'ModalStack' }, { component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' }, @@ -76,11 +76,6 @@ const data = [ title: 'Header background (fade transition)', routeName: 'HeaderBackgroundFade', }, - { - component: HeaderBackgroundTranslate, - title: 'Header background (translate transition)', - routeName: 'HeaderBackgroundTranslate', - }, ]; // Cache images diff --git a/example/src/HeaderBackgrounds.js b/example/src/HeaderBackgrounds.js index f77e06e67..64bf477ae 100644 --- a/example/src/HeaderBackgrounds.js +++ b/example/src/HeaderBackgrounds.js @@ -1,6 +1,11 @@ import * as React from 'react'; import { StyleSheet, View, Text } from 'react-native'; -import { createStackNavigator } from 'react-navigation-stack'; +import Animated from 'react-native-reanimated'; +import { + createStackNavigator, + TransitionPresets, + HeaderStyleInterpolators, +} from 'react-navigation-stack'; function createHeaderBackgroundExample(options = {}) { return createStackNavigator( @@ -19,7 +24,7 @@ function createHeaderBackgroundExample(options = {}) { navigationOptions: { headerTitle: 'Login Screen', headerTintColor: '#fff', - headerBackground: ( + headerBackground: () => ( ), }, @@ -38,7 +43,7 @@ function createHeaderBackgroundExample(options = {}) { navigationOptions: { headerTitle: 'Games Screen', headerTintColor: '#fff', - headerBackground: ( + headerBackground: () => ( ), }, @@ -90,11 +95,11 @@ function createHeaderBackgroundExample(options = {}) { ); } export const HeaderBackgroundDefault = createHeaderBackgroundExample(); -export const HeaderBackgroundTranslate = createHeaderBackgroundExample({ - headerBackgroundTransitionPreset: 'translate', -}); + export const HeaderBackgroundFade = createHeaderBackgroundExample({ - headerBackgroundTransitionPreset: 'fade', + ...TransitionPresets.SlideFromRightIOS, + headerStyleInterpolator: HeaderStyleInterpolators.forFade, + headerMode: 'float', }); const styles = StyleSheet.create({ diff --git a/example/src/HeaderPreset.js b/example/src/HeaderPreset.js index 4884993ba..cda5bc60b 100644 --- a/example/src/HeaderPreset.js +++ b/example/src/HeaderPreset.js @@ -1,7 +1,10 @@ import * as React from 'react'; import { Button, StatusBar } from 'react-native'; import { SafeAreaView } from '@react-navigation/native'; -import { createStackNavigator } from 'react-navigation-stack'; +import { + createStackNavigator, + TransitionPresets, +} from 'react-navigation-stack'; class HomeScreen extends React.Component { static navigationOptions = { @@ -100,9 +103,7 @@ const StackWithHeaderPreset = createStackNavigator( ScreenWithNoHeader: ScreenWithNoHeader, ScreenWithLongTitle: ScreenWithLongTitle, }, - { - headerTransitionPreset: 'uikit', - } + TransitionPresets.SlideFromRightIOS ); export default StackWithHeaderPreset; diff --git a/example/src/ImageStack.js b/example/src/ImageStack.js index 235f03549..f7e9fc3c3 100644 --- a/example/src/ImageStack.js +++ b/example/src/ImageStack.js @@ -7,7 +7,7 @@ class ListScreen extends React.Component { static navigationOptions = ({ navigation }) => ({ title: 'Image list', headerBackTitle: 'Back', - headerLeft: ( + headerLeft: () => (