Setup example app to use Expo (#2905)

## Description
This PR refactors the example application. We want to use expo in our
example application.

- Move the example app from `react-native-cli` to `expo`.
- Add custom App icon and Splash screen.

- Update the `react-native` version in the root directory.
- Update `HitSlop` type in
`react-native-gesture-handler/src/handlers/gestureHandlerCommon.ts`.
- Updates `package.json` dependencies.
- Updates `README.md`.
- Update `.gitignore`.
- Update `babel.config.js`.
- Update `metro.config.js`.
- Update `tsconfig.json`.
- Update imports from `react-native-gesture-handler`.

- Remove the Android and IOS folders.
- Remove `babel.config.web.js` and `webpack.config.js`.

## Test plan
Tested on IOS, Android, and Web platforms.

---------

Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>

.github/workflows/android-build.yml

@@ -5,7 +5,7 @@ on:
       - '.github/workflows/android-build.yml'
       - 'android/**'
       - 'Common/**'
-      - 'Example/android/**'
+      - 'example/android/**'
       - 'FabricExample/android/**'
   push:
     branches:

.github/workflows/ios-build.yml

@@ -5,7 +5,7 @@ on:
       - '.github/workflows/ios-build.yml'
       - 'RNGestureHandler.podspec'
       - 'apple/**'
-      - 'Example/ios/**'
+      - 'example/ios/**'
       - 'FabricExample/ios/**'
   push:
     branches:
@@ -41,4 +41,4 @@ jobs:
         run: bundle install && NO_FLIPPER=1 bundle exec pod install
       - name: Build app
         working-directory: ${{ matrix.working-directory }}
-        run: yarn ios --simulator=\"iPhone 14\" --mode Debug --verbose --terminal /bin/zsh
+        run: npx react-native run-ios

README.md

@@ -27,13 +27,11 @@ If you want to play with the API but don't feel like trying it on a real app, yo
 yarn install
 ```
 
-If you are running on ios, run `pod install` in the ios folder
-
 Run `yarn start` to start the metro bundler
 
 Run `yarn android` or `yarn ios` (depending on which platform you want to run the example app on).
 
-You will need to have an Android or iOS device or emulator connected as well as `react-native-cli` package installed globally.
+You will need to have an Android or iOS device or emulator connected.
 
 ## React Native Support
 

example/.gitignore

@@ -73,3 +73,7 @@ buck-out/
 
 # testing
 /coverage
+
+# Expo
+android/
+ios/

example/src/App.tsx → example/App.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Text, View, StyleSheet, SectionList, Platform } from 'react-native';
+import {
+  Text,
+  View,
+  StyleSheet,
+  SectionList,
+  Platform,
+  Dimensions,
+  StatusBar,
+} from 'react-native';
 import {
   createStackNavigator,
   StackScreenProps,
@@ -9,50 +17,53 @@ import {
   GestureHandlerRootView,
   RectButton,
 } from 'react-native-gesture-handler';
-import OverflowParent from './release_tests/overflowParent';
-import DoublePinchRotate from './release_tests/doubleScalePinchAndRotate';
-import DoubleDraggable from './release_tests/doubleDraggable';
-import { ComboWithGHScroll } from './release_tests/combo';
-import { TouchablesIndex, TouchableExample } from './release_tests/touchables';
-import Rows from './release_tests/rows';
-import NestedFling from './release_tests/nestedFling';
-import MouseButtons from './release_tests/mouseButtons';
-import ContextMenu from './release_tests/contextMenu';
-import NestedTouchables from './release_tests/nestedTouchables';
-import NestedButtons from './release_tests/nestedButtons';
-import PointerType from './release_tests/pointerType';
-import NestedGestureHandlerRootViewWithModal from './release_tests/nestedGHRootViewWithModal';
-import { PinchableBox } from './recipes/scaleAndRotate';
-import PanAndScroll from './recipes/panAndScroll';
-import { BottomSheet } from './showcase/bottomSheet';
-import Swipeables from './showcase/swipeable';
-import ChatHeads from './showcase/chatHeads';
-import Draggable from './basic/draggable';
-import MultiTap from './basic/multitap';
-import BouncingBox from './basic/bouncing';
-import PanResponder from './basic/panResponder';
-import HorizontalDrawer from './basic/horizontalDrawer';
-import PagerAndDrawer from './basic/pagerAndDrawer';
-import ForceTouch from './basic/forcetouch';
-import Fling from './basic/fling';
+import OverflowParent from './src/release_tests/overflowParent';
+import DoublePinchRotate from './src/release_tests/doubleScalePinchAndRotate';
+import DoubleDraggable from './src/release_tests/doubleDraggable';
+import { ComboWithGHScroll } from './src/release_tests/combo';
+import {
+  TouchablesIndex,
+  TouchableExample,
+} from './src/release_tests/touchables';
+import Rows from './src/release_tests/rows';
+import NestedFling from './src/release_tests/nestedFling';
+import MouseButtons from './src/release_tests/mouseButtons';
+import ContextMenu from './src/release_tests/contextMenu';
+import NestedTouchables from './src/release_tests/nestedTouchables';
+import NestedButtons from './src/release_tests/nestedButtons';
+import PointerType from './src/release_tests/pointerType';
+import NestedGestureHandlerRootViewWithModal from './src/release_tests/nestedGHRootViewWithModal';
+import { PinchableBox } from './src/recipes/scaleAndRotate';
+import PanAndScroll from './src/recipes/panAndScroll';
+import { BottomSheet } from './src/showcase/bottomSheet';
+import Swipeables from './src/showcase/swipeable';
+import ChatHeads from './src/showcase/chatHeads';
+import Draggable from './src/basic/draggable';
+import MultiTap from './src/basic/multitap';
+import BouncingBox from './src/basic/bouncing';
+import PanResponder from './src/basic/panResponder';
+import HorizontalDrawer from './src/basic/horizontalDrawer';
+import PagerAndDrawer from './src/basic/pagerAndDrawer';
+import ForceTouch from './src/basic/forcetouch';
+import Fling from './src/basic/fling';
 
-import ReanimatedSimple from './new_api/reanimated';
-import Camera from './new_api/camera';
-import Transformations from './new_api/transformations';
-import OverlapParents from './new_api/overlap_parent';
-import OverlapSiblings from './new_api/overlap_siblings';
-import Calculator from './new_api/calculator';
-import BottomSheetNewApi from './new_api/bottom_sheet';
-import ChatHeadsNewApi from './new_api/chat_heads';
-import DragNDrop from './new_api/drag_n_drop';
-import BetterHorizontalDrawer from './new_api/betterHorizontalDrawer';
-import ManualGestures from './new_api/manualGestures/index';
-import Hover from './new_api/hover';
-import HoverableIcons from './new_api/hoverable_icons';
-import VelocityTest from './new_api/velocityTest';
+import ReanimatedSimple from './src/new_api/reanimated';
+import Camera from './src/new_api/camera';
+import Transformations from './src/new_api/transformations';
+import OverlapParents from './src/new_api/overlap_parent';
+import OverlapSiblings from './src/new_api/overlap_siblings';
+import Calculator from './src/new_api/calculator';
+import BottomSheetNewApi from './src/new_api/bottom_sheet';
+import ChatHeadsNewApi from './src/new_api/chat_heads';
+import DragNDrop from './src/new_api/drag_n_drop';
+import BetterHorizontalDrawer from './src/new_api/betterHorizontalDrawer';
+import ManualGestures from './src/new_api/manualGestures/index';
+import Hover from './src/new_api/hover';
+import HoverableIcons from './src/new_api/hoverable_icons';
+import VelocityTest from './src/new_api/velocityTest';
 
-import EmptyExample from './empty/EmptyExample';
-import RectButtonBorders from './release_tests/rectButton';
+import EmptyExample from './src/empty/EmptyExample';
+import RectButtonBorders from './src/release_tests/rectButton';
 
 interface Example {
   name: string;
@@ -159,6 +170,7 @@ const EXAMPLES: ExamplesSection[] = [
 
 type RootStackParamList = {
   Home: undefined;
+  TouchableExample: { item: string };
 } & {
   [Screen: string]: undefined;
 };
@@ -168,8 +180,15 @@ const Stack = createStackNavigator<RootStackParamList>();
 export default function App() {
   return (
     <GestureHandlerRootView>
+      <StatusBar barStyle="dark-content" />
       <NavigationContainer>
-        <Stack.Navigator>
+        <Stack.Navigator
+          screenOptions={{
+            cardStyle: {
+              // It's important to set height for the screen, without it scroll doesn't work on web platform.
+              height: Dimensions.get('window').height,
+            },
+          }}>
           <Stack.Screen
             name="Home"
             options={{ title: '✌️ Gesture Handler Demo' }}