From f3c83c985dfa3761217c52cdb9af61615d565aa9 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Wed, 10 Oct 2018 13:52:38 -0700 Subject: [PATCH] Use react-native-gesture-handler's PanGestureHandler instead of PanResponder --- packages/stack/example/App.js | 19 +- packages/stack/example/rn-cli.config.js | 4 +- .../stack/example/src/GestureInteraction.js | 93 ++ packages/stack/example/src/ImageStack.js | 89 ++ .../stack/example/src/LifecycleInteraction.js | 69 ++ packages/stack/example/src/ModalStack.js | 59 ++ packages/stack/example/src/SimpleStack.js | 18 +- packages/stack/example/yarn.lock | 731 +++++++++++++ packages/stack/package.json | 5 +- packages/stack/src/index.js | 3 + .../stack/src/utils/StackGestureContext.js | 3 + packages/stack/src/views/Header/Header.js | 2 - .../src/views/Header/HeaderBackButton.js | 43 +- .../src/views/StackView/StackViewCard.js | 52 +- .../src/views/StackView/StackViewLayout.js | 571 ++++++---- .../StackView/StackViewStyleInterpolator.js | 37 +- .../StackView/StackViewTransitionConfigs.js | 4 +- .../StackView/createPointerEventsContainer.js | 15 +- packages/stack/src/views/Transitioner.js | 79 +- packages/stack/yarn.lock | 983 ++++++++++++++++++ 20 files changed, 2550 insertions(+), 329 deletions(-) create mode 100644 packages/stack/example/src/GestureInteraction.js create mode 100644 packages/stack/example/src/ImageStack.js create mode 100644 packages/stack/example/src/LifecycleInteraction.js create mode 100644 packages/stack/example/src/ModalStack.js create mode 100644 packages/stack/src/utils/StackGestureContext.js diff --git a/packages/stack/example/App.js b/packages/stack/example/App.js index 8683f8b9..74f8f27a 100644 --- a/packages/stack/example/App.js +++ b/packages/stack/example/App.js @@ -1,12 +1,20 @@ import React from 'react'; import Expo from 'expo'; -import { FlatList } from 'react-native'; +import { FlatList, I18nManager } from 'react-native'; import { createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { ListSection, Divider } from 'react-native-paper'; import SimpleStack from './src/SimpleStack'; +import ImageStack from './src/ImageStack'; import TransparentStack from './src/TransparentStack'; +import ModalStack from './src/ModalStack'; +import LifecycleInteraction from './src/LifecycleInteraction'; +import GestureInteraction from './src/GestureInteraction'; + +// Uncomment the following line to force RTL. Requires closing and re-opening +// your app after you first load it with this option enabled. +// I18nManager.forceRTL(true); // Comment the following two lines to stop using react-native-screens import { useScreens } from 'react-native-screens'; @@ -14,18 +22,26 @@ useScreens(); const data = [ { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' }, + { component: ImageStack, title: 'Image', routeName: 'ImageStack' }, + { component: ModalStack, title: 'Modal', routeName: 'ModalStack' }, + { component: LifecycleInteraction, title: 'Lifecycle', routeName: 'LifecycleStack' }, { component: TransparentStack, title: 'Transparent', routeName: 'TransparentStack', }, + { component: GestureInteraction, title: 'Gesture Interaction', routeName: 'GestureInteraction' }, ]; +Expo.Asset.loadAsync(require('react-navigation/src/views/assets/back-icon.png')); +Expo.Asset.loadAsync(require('react-navigation/src/views/assets/back-icon-mask.png')); + class Home extends React.Component { static navigationOptions = { title: 'Examples', }; + _renderItem = ({ item }) => ( ); } diff --git a/packages/stack/example/rn-cli.config.js b/packages/stack/example/rn-cli.config.js index c049b595..faa16fe9 100644 --- a/packages/stack/example/rn-cli.config.js +++ b/packages/stack/example/rn-cli.config.js @@ -4,8 +4,10 @@ const path = require('path'); const glob = require('glob-to-regexp'); const blacklist = require('metro/src/blacklist'); const pak = require('../package.json'); +const pak2 = require('./package.json'); const dependencies = Object.keys(pak.dependencies); +const localDependencies = Object.keys(pak2.dependencies); const peerDependencies = Object.keys(pak.peerDependencies); module.exports = { @@ -13,7 +15,7 @@ module.exports = { return [__dirname, path.resolve(__dirname, '..')]; }, getProvidesModuleNodeModules() { - return [...dependencies, ...peerDependencies]; + return [...dependencies, ...localDependencies, ...peerDependencies]; }, getBlacklistRE() { return blacklist([glob(`${path.resolve(__dirname, '..')}/node_modules/*`)]); diff --git a/packages/stack/example/src/GestureInteraction.js b/packages/stack/example/src/GestureInteraction.js new file mode 100644 index 00000000..a3be16f1 --- /dev/null +++ b/packages/stack/example/src/GestureInteraction.js @@ -0,0 +1,93 @@ +import React from 'react'; +import { + ActivityIndicator, + Button, + InteractionManager, + WebView, + View, + StyleSheet, +} from 'react-native'; +import { MapView } from 'expo'; +import { createStackNavigator, withNavigationFocus } from 'react-navigation'; +import { StackGestureContext } from 'react-navigation-stack'; +import { + PanGestureHandler, + NativeViewGestureHandler, +} from 'react-native-gesture-handler'; + +const IndexScreen = ({ navigation }) => ( + +