feat: rewrite bottom sheet from scratch 🎉 (#2)

* chore: added utilities functionalities

* chore: added default handle

* chore: rewrite the whole bottom sheet into a functional component

* chore: added basic example WIP

* chore: extract content pan gesture

* chore: updated flatlist implementation

* chore: updated scrollview implementation

* chore: updated sectionview implementation

* chore: improve snapping by clamping velocity

* chore: extract scrollable functioanlites and introduce removeScrollableRef

* chore: added snapTo and close public methods

* chore: updated basic examples

* chore: added draggable view

* chore: revert clampedVelocity

* chore: fixed issue with manual animation

* fix: fixed android issue with scrollables

* chore: updated dependencies

* chore: extract handle pan gesture from content

* chore: updated examples

* chore: persist scrollable content offset per view

* chore: rename scrollable components

* chore: revert initial screen

* chore: added touchables

* chore: updated examples

* chore: added animatedPosition & animatedPositionIndex callback nodes

* chore: added custom handle & shadow overlay examples

* chore: support initial closed state

* chore: allow user to modify animation configs

* chore: updated navigator example

* chore: added loadash.isequal

example/ios/BottomSheetExample.xcodeproj/project.pbxproj

@@ -142,6 +142,7 @@
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					13B07F861A680F5B00A75B9A = {
+						DevelopmentTeam = 4P8A237MEX;
 						LastSwiftMigration = 1110;
 					};
 				};
@@ -269,6 +270,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
+				DEVELOPMENT_TEAM = 4P8A237MEX;
 				INFOPLIST_FILE = BottomSheetExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_CFLAGS = (
@@ -280,7 +282,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.BottomSheetExample.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
 				PRODUCT_NAME = BottomSheetExample;
 				SWIFT_OBJC_BRIDGING_HEADER = "BottomSheetExample-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -296,6 +298,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 4P8A237MEX;
 				INFOPLIST_FILE = BottomSheetExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_CFLAGS = (
@@ -307,7 +310,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.BottomSheetExample.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
 				PRODUCT_NAME = BottomSheetExample;
 				SWIFT_OBJC_BRIDGING_HEADER = "BottomSheetExample-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
@@ -344,6 +347,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = NO;
+				ENABLE_BITCODE = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
@@ -397,6 +401,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = YES;
+				ENABLE_BITCODE = NO;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;

example/ios/Podfile.lock

@@ -296,13 +296,13 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
     - ReactCommon/callinvoker (= 0.62.2)
-  - RNCMaskedView (0.1.6):
+  - RNCMaskedView (0.1.10):
     - React
   - RNGestureHandler (1.7.0):
     - React
-  - RNReanimated (1.10.1):
+  - RNReanimated (1.11.0):
     - React
-  - RNScreens (2.9.0):
+  - RNScreens (2.10.1):
     - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -466,10 +466,10 @@ SPEC CHECKSUMS:
   React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d
   React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
   ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
-  RNCMaskedView: a88953beefbd347a29072d9eba90e42945fe291e
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
-  RNReanimated: c2bb7438b57a3d987bb2e4e6e4bca94787e30b02
-  RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
+  RNReanimated: f05ea1c5ee07891aaefee662f073f4944c87ac4d
+  RNScreens: b748efec66e095134c7166ca333b628cd7e6f3e2
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

example/metro.config.js

@@ -1,26 +1,29 @@
 const path = require('path');
+const fs = require('fs');
 const blacklist = require('metro-config/src/defaults/blacklist');
 const escape = require('escape-string-regexp');
-const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
+const pak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
 
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
+const modules = [
+  '@babel/runtime',
+  ...Object.keys({
+    ...pak.dependencies,
+    ...pak.peerDependencies,
+  }),
+];
 
 module.exports = {
   projectRoot: __dirname,
   watchFolders: [root],
 
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: blacklist(
-      modules.map(
-        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
+    blacklistRE: blacklist([
+      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
+    ]),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

example/package.json

@@ -10,27 +10,28 @@
   },
   "dependencies": {
     "@gorhom/showcase-template": "^0.3.1",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.3.2",
     "@react-navigation/stack": "^5.3.5",
     "date-fns": "^2.15.0",
     "faker": "^4.1.0",
+    "lodash.isequal": "^4.5.0",
     "react": "16.11.0",
     "react-native": "0.62.2",
-    "react-native-gesture-handler": "^1.6.1",
+    "react-native-gesture-handler": "^1.7.0",
     "react-native-maps": "^0.27.1",
-    "react-native-reanimated": "^1.7.0",
+    "react-native-reanimated": "^1.11.0",
+    "react-native-redash": "^14.2.3",
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "^2.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/runtime": "^7.9.6",
     "@types/faker": "^4.1.12",
-    "@types/react": "~16.9.23",
-    "@types/react-native": "~0.61.17",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.17",
     "metro-react-native-babel-preset": "^0.59.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7"
   }
 }

example/src/App.tsx

@@ -3,9 +3,14 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import RootScreen from './screens/Root';
 import NavigatorExampleScreen from './screens/NavigatorExample';
-import FlatListExampleScreen from './screens/FlatListExample';
-import SectionListExampleScreen from './screens/SectionListExample';
-import ScrollViewExampleScreen from './screens/ScrollViewExample';
+import {
+  FlatListExampleScreen,
+  SectionListExampleScreen,
+  ScrollViewExampleScreen,
+  ViewExampleScreen,
+} from './screens/BasicExamples';
+import CustomHandleExampleScreen from './screens/CustomHandleExample';
+import ShadowOverlayExampleScreen from './screens/ShadowOverlayExample';
 import { AppStackParamsList } from './types';
 
 const Stack = createStackNavigator<AppStackParamsList>();
@@ -18,10 +23,7 @@ function App() {
           component={RootScreen}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
-          name="NavigatorExample"
-          component={NavigatorExampleScreen}
-        />
+        {/* basic examples */}
         <Stack.Screen
           name="FlatListExample"
           component={FlatListExampleScreen}
@@ -34,6 +36,20 @@ function App() {
           name="ScrollViewExample"
           component={ScrollViewExampleScreen}
         />
+        <Stack.Screen name="ViewExample" component={ViewExampleScreen} />
+        {/* advanced examples */}
+        <Stack.Screen
+          name="NavigatorExample"
+          component={NavigatorExampleScreen}
+        />
+        <Stack.Screen
+          name="CustomHandleExample"
+          component={CustomHandleExampleScreen}
+        />
+        <Stack.Screen
+          name="ShadowOverlayExample"
+          component={ShadowOverlayExampleScreen}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

example/src/components/button/Button.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
-import { Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
+import { Text, StyleSheet, ViewStyle } from 'react-native';
+import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 interface ButtonProps {
   label: string;
@@ -27,7 +28,6 @@ const styles = StyleSheet.create({
   },
   label: {
     color: 'white',
-    textTransform: 'capitalize',
   },
 });