Skip to content

Commit

Permalink
chore: added native screens example
Browse files Browse the repository at this point in the history
  • Loading branch information
gorhom committed Jan 6, 2022
1 parent e3881b3 commit 1cf46c0
Show file tree
Hide file tree
Showing 11 changed files with 232 additions and 154 deletions.
8 changes: 4 additions & 4 deletions example/ios/BottomSheetExample.xcodeproj/project.pbxproj
Expand Up @@ -286,7 +286,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = 4P8A237MEX;
DEVELOPMENT_TEAM = "";
ENABLE_BITCODE = NO;
INFOPLIST_FILE = BottomSheetExample/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
Expand All @@ -298,7 +298,7 @@
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = dev.gorhom.bottomsheet;
PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
PRODUCT_NAME = BottomSheetExample;
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
Expand All @@ -314,7 +314,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = 4P8A237MEX;
DEVELOPMENT_TEAM = "";
INFOPLIST_FILE = BottomSheetExample/Info.plist;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
Expand All @@ -325,7 +325,7 @@
"-ObjC",
"-lc++",
);
PRODUCT_BUNDLE_IDENTIFIER = dev.gorhom.bottomsheet;
PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
PRODUCT_NAME = BottomSheetExample;
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
Expand Down
17 changes: 8 additions & 9 deletions example/ios/Podfile.lock
Expand Up @@ -292,7 +292,7 @@ PODS:
- glog
- react-native-blur (0.8.0):
- React
- react-native-maps (0.28.1):
- react-native-maps (0.30.1):
- React-Core
- react-native-pager-view (5.4.9):
- React-Core
Expand Down Expand Up @@ -365,9 +365,9 @@ PODS:
- React-perflogger (= 0.66.3)
- RNCMaskedView (0.1.11):
- React
- RNGestureHandler (1.10.3):
- RNGestureHandler (2.1.0):
- React-Core
- RNReanimated (2.2.4):
- RNReanimated (2.3.1):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
Expand All @@ -393,10 +393,9 @@ PODS:
- React-RCTNetwork
- React-RCTSettings
- React-RCTText
- React-RCTVibration
- ReactCommon/turbomodule/core
- Yoga
- RNScreens (3.9.0):
- RNScreens (3.10.1):
- React-Core
- React-RCTImage
- Yoga (1.14.0)
Expand Down Expand Up @@ -601,7 +600,7 @@ SPEC CHECKSUMS:
React-jsinspector: d9c8eb0b53f0da206fed56612b289fec84991157
React-logger: e522e76fa3e9ec3e7d7115b49485cc065cf4ae06
react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
react-native-maps: 60a75aa547d576fdb91be1f95113665215b59461
react-native-maps: d752b0dd0e1951d815b1336332835aab6b4a836f
react-native-pager-view: 3ee7d4c7697fb3ef788346e834a60cca97ed8540
react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
React-perflogger: 73732888d37d4f5065198727b167846743232882
Expand All @@ -617,9 +616,9 @@ SPEC CHECKSUMS:
React-runtimeexecutor: bbbdb3d8fcf327c6e2249ee71b6ef1764b7dc266
ReactCommon: 9bac022ab71596f2b0fde1268272543184c63971
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
RNReanimated: 65583befd5706cc9c86ae9a081786181ced37b93
RNScreens: 4d79118be80f79fa1f4aa131909a1d6e86280af3
RNGestureHandler: e5c7cab5f214503dcefd6b2b0cefb050e1f51c4a
RNReanimated: da3860204e5660c0dd66739936732197d359d753
RNScreens: 522705f2e5c9d27efb17f24aceb2bf8335bc7b8e
Yoga: 32a18c0e845e185f4a2a66ec76e1fd1f958f22fa
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

Expand Down
24 changes: 13 additions & 11 deletions example/package.json
Expand Up @@ -10,25 +10,27 @@
"postinstall": "npx patch-package"
},
"dependencies": {
"@gorhom/portal": "^1.0.11",
"@gorhom/showcase-template": "^2.0.4",
"@gorhom/portal": "^1.0.12",
"@gorhom/showcase-template": "^2.1.0",
"@react-native-community/blur": "^3.6.0",
"@react-native-community/masked-view": "0.1.11",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.4",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/elements": "^1.2.1",
"@react-navigation/material-top-tabs": "^6.0.6",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"faker": "^4.1.0",
"nanoid": "^3.1.20",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-maps": "^0.28.0",
"react-native-pager-view": "^5.4.0",
"react-native-reanimated": "^2.2.4",
"react-native-gesture-handler": "^2.1.0",
"react-native-maps": "^0.30.1",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "^2.3.1",
"react-native-redash": "^16.0.11",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.9.0",
"react-native-screens": "^3.10.1",
"react-native-tab-view": "^3.1.1"
},
"devDependencies": {
Expand Down
48 changes: 48 additions & 0 deletions example/patches/react-native-gesture-handler+2.1.0.patch
@@ -0,0 +1,48 @@
diff --git a/node_modules/react-native-gesture-handler/android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerOrchestrator.kt b/node_modules/react-native-gesture-handler/android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerOrchestrator.kt
index 51be37c..cb507d4 100644
--- a/node_modules/react-native-gesture-handler/android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerOrchestrator.kt
+++ b/node_modules/react-native-gesture-handler/android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerOrchestrator.kt
@@ -5,6 +5,7 @@ import android.graphics.PointF
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
+import com.swmansion.gesturehandler.react.RNGestureHandlerRootHelper
import java.util.*

class GestureHandlerOrchestrator(
@@ -546,12 +547,19 @@ class GestureHandlerOrchestrator(
// in began state
return false
}
- return if (handler !== other &&
+
+ if (handler !== other &&
(handler.isAwaiting || handler.state == GestureHandler.STATE_ACTIVE)) {
// in every other case as long as the handler is about to be activated or already in active
// state, we delegate the decision to the implementation of GestureHandler#shouldBeCancelledBy
- handler.shouldBeCancelledBy(other)
- } else true
+ return handler.shouldBeCancelledBy(other)
+ }
+
+ if (other is RNGestureHandlerRootHelper.RootViewGestureHandler && handler is PanGestureHandler) {
+ return false;
+ }
+
+ return true
}

private fun isFinished(state: Int) =
diff --git a/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootHelper.kt b/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootHelper.kt
index 8c20453..dcf54dd 100644
--- a/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootHelper.kt
+++ b/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootHelper.kt
@@ -53,7 +53,7 @@ class RNGestureHandlerRootHelper(private val context: ReactContext, wrappedView:
}
}

- private inner class RootViewGestureHandler : GestureHandler<RootViewGestureHandler>() {
+ inner class RootViewGestureHandler : GestureHandler<RootViewGestureHandler>() {
override fun onHandle(event: MotionEvent) {
val currentState = state
if (currentState == STATE_UNDETERMINED) {
2 changes: 1 addition & 1 deletion example/src/screens/integrations/MapExample.tsx
Expand Up @@ -13,14 +13,14 @@ import {
useDerivedValue,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useHeaderHeight } from '@react-navigation/stack';
import {
BottomSheetModal,
BottomSheetScrollView,
BottomSheetBackdrop,
TouchableOpacity,
BottomSheetBackdropProps,
} from '@gorhom/bottom-sheet';
import { useHeaderHeight } from '@react-navigation/elements';
import withModalProvider from '../withModalProvider';
import { createLocationListMockData } from '../../utilities';
import SearchHandle, {
Expand Down
47 changes: 47 additions & 0 deletions example/src/screens/integrations/NativeScreensExample.tsx
@@ -0,0 +1,47 @@
import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Button from '../../components/button';
import withModalProvider from '../withModalProvider';
import BackdropExample from '../modal/BackdropExample';

const RootScreen = () => {
const { navigate } = useNavigation();
return (
<View style={styles.container}>
<Button
label="Navigate to Native Modal"
// @ts-ignore
onPress={() => navigate('NativeModal')}
/>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});

const NativeStack = createNativeStackNavigator();

export default withModalProvider(() => (
<NativeStack.Navigator>
<NativeStack.Screen
name="Root"
component={RootScreen}
options={{ headerShown: false }}
/>
<NativeStack.Screen
name="NativeModal"
component={BackdropExample}
options={{
presentation: 'modal',
headerShown: Platform.OS === 'ios',
}}
/>
</NativeStack.Navigator>
));
7 changes: 4 additions & 3 deletions example/src/screens/modal/BackdropExample.tsx
Expand Up @@ -10,10 +10,11 @@ import ContactList from '../../components/contactList';
import HeaderHandle from '../../components/headerHandle';
import withModalProvider from '../withModalProvider';

const BackdropExample = () => {
export const BackdropExample = () => {
// state
const [backdropPressBehavior, setBackdropPressBehavior] =
useState<'none' | 'close' | 'collapse'>('collapse');
const [backdropPressBehavior, setBackdropPressBehavior] = useState<
'none' | 'close' | 'collapse'
>('collapse');
// refs
const bottomSheetRef = useRef<BottomSheetModal>(null);

Expand Down
2 changes: 1 addition & 1 deletion example/src/screens/modal/SimpleExample.tsx
Expand Up @@ -6,7 +6,7 @@ import ContactList from '../../components/contactList';
import HeaderHandle from '../../components/headerHandle';
import withModalProvider from '../withModalProvider';

const SimpleExample = () => {
export const SimpleExample = () => {
//#region state
const [enablePanDownToClose, setEnablePanDownToClose] = useState(true);
const [enableDismissOnClose, setEnableDismissOnClose] = useState(true);
Expand Down
11 changes: 8 additions & 3 deletions example/src/screens/screens.ts
@@ -1,4 +1,4 @@
import type { ShowcaseScreenType } from '@gorhom/showcase-template';
import type { ShowcaseExampleScreenType } from '@gorhom/showcase-template';

export const screens = [
{
Expand Down Expand Up @@ -119,7 +119,7 @@ export const screens = [
require('./advanced/customGestureHandling/CustomGestureHandling')
.default,
},
] as ShowcaseScreenType[],
] as ShowcaseExampleScreenType[],
},
{
title: 'Third Party Integration',
Expand All @@ -129,6 +129,11 @@ export const screens = [
slug: 'Integrations/NavigatorExample',
getScreen: () => require('./integrations/NavigatorExample').default,
},
{
name: 'React Native Screens',
slug: 'Integrations/NativeScreensExample',
getScreen: () => require('./integrations/NativeScreensExample').default,
},
{
name: 'View Pager',
slug: 'Integrations/ViewPagerExample',
Expand All @@ -143,6 +148,6 @@ export const screens = [
headerTransparent: true,
},
},
] as ShowcaseScreenType[],
] as ShowcaseExampleScreenType[],
},
];
5 changes: 2 additions & 3 deletions example/src/screens/withModalProvider.tsx
@@ -1,12 +1,11 @@
import React, { FC } from 'react';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

const withModalProvider = (Component: FC) => () => {
return (
const withModalProvider = (Component: FC) => () =>
(
<BottomSheetModalProvider>
<Component />
</BottomSheetModalProvider>
);
};

export default withModalProvider;

0 comments on commit 1cf46c0

Please sign in to comment.