Skip to content

Commit a58a29f

Browse files
gorhomgorhom
authored
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
1 parent 0c255e5 commit a58a29f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+2558
-2015
lines changed

‎example/babel.config.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎example/ios/BottomSheetExample.xcodeproj/project.pbxproj‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@
142142
ORGANIZATIONNAME = Facebook;
143143
TargetAttributes = {
144144
13B07F861A680F5B00A75B9A = {
145+
DevelopmentTeam = 4P8A237MEX;
145146
LastSwiftMigration = 1110;
146147
};
147148
};
@@ -269,6 +270,7 @@
269270
CLANG_ENABLE_MODULES = YES;
270271
CURRENT_PROJECT_VERSION = 1;
271272
DEAD_CODE_STRIPPING = NO;
273+
DEVELOPMENT_TEAM = 4P8A237MEX;
272274
INFOPLIST_FILE = BottomSheetExample/Info.plist;
273275
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
274276
OTHER_CFLAGS = (
@@ -280,7 +282,7 @@
280282
"-ObjC",
281283
"-lc++",
282284
);
283-
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.BottomSheetExample.$(PRODUCT_NAME:rfc1034identifier)";
285+
PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
284286
PRODUCT_NAME = BottomSheetExample;
285287
SWIFT_OBJC_BRIDGING_HEADER = "BottomSheetExample-Bridging-Header.h";
286288
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -296,6 +298,7 @@
296298
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
297299
CLANG_ENABLE_MODULES = YES;
298300
CURRENT_PROJECT_VERSION = 1;
301+
DEVELOPMENT_TEAM = 4P8A237MEX;
299302
INFOPLIST_FILE = BottomSheetExample/Info.plist;
300303
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
301304
OTHER_CFLAGS = (
@@ -307,7 +310,7 @@
307310
"-ObjC",
308311
"-lc++",
309312
);
310-
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.BottomSheetExample.$(PRODUCT_NAME:rfc1034identifier)";
313+
PRODUCT_BUNDLE_IDENTIFIER = "dev.gorhom.bottom-sheet";
311314
PRODUCT_NAME = BottomSheetExample;
312315
SWIFT_OBJC_BRIDGING_HEADER = "BottomSheetExample-Bridging-Header.h";
313316
SWIFT_VERSION = 5.0;
@@ -344,6 +347,7 @@
344347
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
345348
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
346349
COPY_PHASE_STRIP = NO;
350+
ENABLE_BITCODE = NO;
347351
ENABLE_STRICT_OBJC_MSGSEND = YES;
348352
ENABLE_TESTABILITY = YES;
349353
GCC_C_LANGUAGE_STANDARD = gnu99;
@@ -397,6 +401,7 @@
397401
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
398402
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
399403
COPY_PHASE_STRIP = YES;
404+
ENABLE_BITCODE = NO;
400405
ENABLE_NS_ASSERTIONS = NO;
401406
ENABLE_STRICT_OBJC_MSGSEND = YES;
402407
GCC_C_LANGUAGE_STANDARD = gnu99;

‎example/ios/Podfile.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -296,13 +296,13 @@ PODS:
296296
- React-cxxreact (= 0.62.2)
297297
- React-jsi (= 0.62.2)
298298
- ReactCommon/callinvoker (= 0.62.2)
299-
- RNCMaskedView (0.1.6):
299+
- RNCMaskedView (0.1.10):
300300
- React
301301
- RNGestureHandler (1.7.0):
302302
- React
303-
- RNReanimated (1.10.1):
303+
- RNReanimated (1.11.0):
304304
- React
305-
- RNScreens (2.9.0):
305+
- RNScreens (2.10.1):
306306
- React
307307
- Yoga (1.14.0)
308308
- YogaKit (1.18.1):
@@ -466,10 +466,10 @@ SPEC CHECKSUMS:
466466
React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d
467467
React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
468468
ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
469-
RNCMaskedView: a88953beefbd347a29072d9eba90e42945fe291e
469+
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
470470
RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
471-
RNReanimated: c2bb7438b57a3d987bb2e4e6e4bca94787e30b02
472-
RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
471+
RNReanimated: f05ea1c5ee07891aaefee662f073f4944c87ac4d
472+
RNScreens: b748efec66e095134c7166ca333b628cd7e6f3e2
473473
Yoga: 3ebccbdd559724312790e7742142d062476b698e
474474
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
475475

‎example/metro.config.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
const path = require('path');
2+
const fs = require('fs');
23
const blacklist = require('metro-config/src/defaults/blacklist');
34
const escape = require('escape-string-regexp');
4-
const pak = require('../package.json');
55

66
const root = path.resolve(__dirname, '..');
7+
const pak = JSON.parse(
8+
fs.readFileSync(path.join(root, 'package.json'), 'utf8')
9+
);
710

8-
const modules = Object.keys({
9-
...pak.peerDependencies,
10-
});
11+
const modules = [
12+
'@babel/runtime',
13+
...Object.keys({
14+
...pak.dependencies,
15+
...pak.peerDependencies,
16+
}),
17+
];
1118

1219
module.exports = {
1320
projectRoot: __dirname,
1421
watchFolders: [root],
1522

16-
// We need to make sure that only one version is loaded for peerDependencies
17-
// So we blacklist them at the root, and alias them to the versions in example's node_modules
1823
resolver: {
19-
blacklistRE: blacklist(
20-
modules.map(
21-
m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
22-
)
23-
),
24+
blacklistRE: blacklist([
25+
new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
26+
]),
2427

2528
extraNodeModules: modules.reduce((acc, name) => {
2629
acc[name] = path.join(__dirname, 'node_modules', name);

‎example/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,28 @@
1010
},
1111
"dependencies": {
1212
"@gorhom/showcase-template": "^0.3.1",
13-
"@react-native-community/masked-view": "0.1.6",
13+
"@react-native-community/masked-view": "0.1.10",
1414
"@react-navigation/native": "^5.3.2",
1515
"@react-navigation/stack": "^5.3.5",
1616
"date-fns": "^2.15.0",
1717
"faker": "^4.1.0",
18+
"lodash.isequal": "^4.5.0",
1819
"react": "16.11.0",
1920
"react-native": "0.62.2",
20-
"react-native-gesture-handler": "^1.6.1",
21+
"react-native-gesture-handler": "^1.7.0",
2122
"react-native-maps": "^0.27.1",
22-
"react-native-reanimated": "^1.7.0",
23+
"react-native-reanimated": "^1.11.0",
24+
"react-native-redash": "^14.2.3",
2325
"react-native-safe-area-context": "0.7.3",
2426
"react-native-screens": "^2.9.0"
2527
},
2628
"devDependencies": {
2729
"@babel/core": "^7.9.6",
2830
"@babel/runtime": "^7.9.6",
2931
"@types/faker": "^4.1.12",
30-
"@types/react": "~16.9.23",
31-
"@types/react-native": "~0.61.17",
32-
"babel-plugin-module-resolver": "^4.0.0",
32+
"@types/react": "^16.9.23",
33+
"@types/react-native": "^0.61.17",
3334
"metro-react-native-babel-preset": "^0.59.0",
34-
"typescript": "^3.8.3"
35+
"typescript": "^3.9.7"
3536
}
3637
}

‎example/src/App.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,14 @@ import { NavigationContainer } from '@react-navigation/native';
33
import { createStackNavigator } from '@react-navigation/stack';
44
import RootScreen from './screens/Root';
55
import NavigatorExampleScreen from './screens/NavigatorExample';
6-
import FlatListExampleScreen from './screens/FlatListExample';
7-
import SectionListExampleScreen from './screens/SectionListExample';
8-
import ScrollViewExampleScreen from './screens/ScrollViewExample';
6+
import {
7+
FlatListExampleScreen,
8+
SectionListExampleScreen,
9+
ScrollViewExampleScreen,
10+
ViewExampleScreen,
11+
} from './screens/BasicExamples';
12+
import CustomHandleExampleScreen from './screens/CustomHandleExample';
13+
import ShadowOverlayExampleScreen from './screens/ShadowOverlayExample';
914
import { AppStackParamsList } from './types';
1015

1116
const Stack = createStackNavigator<AppStackParamsList>();
@@ -18,10 +23,7 @@ function App() {
1823
component={RootScreen}
1924
options={{ headerShown: false }}
2025
/>
21-
<Stack.Screen
22-
name="NavigatorExample"
23-
component={NavigatorExampleScreen}
24-
/>
26+
{/* basic examples */}
2527
<Stack.Screen
2628
name="FlatListExample"
2729
component={FlatListExampleScreen}
@@ -34,6 +36,20 @@ function App() {
3436
name="ScrollViewExample"
3537
component={ScrollViewExampleScreen}
3638
/>
39+
<Stack.Screen name="ViewExample" component={ViewExampleScreen} />
40+
{/* advanced examples */}
41+
<Stack.Screen
42+
name="NavigatorExample"
43+
component={NavigatorExampleScreen}
44+
/>
45+
<Stack.Screen
46+
name="CustomHandleExample"
47+
component={CustomHandleExampleScreen}
48+
/>
49+
<Stack.Screen
50+
name="ShadowOverlayExample"
51+
component={ShadowOverlayExampleScreen}
52+
/>
3753
</Stack.Navigator>
3854
</NavigationContainer>
3955
);

‎example/src/components/Handle.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎example/src/components/Transaction.tsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎example/src/components/button/Button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useMemo } from 'react';
2-
import { Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
2+
import { Text, StyleSheet, ViewStyle } from 'react-native';
3+
import { TouchableOpacity } from '@gorhom/bottom-sheet';
34

45
interface ButtonProps {
56
label: string;
@@ -27,7 +28,6 @@ const styles = StyleSheet.create({
2728
},
2829
label: {
2930
color: 'white',
30-
textTransform: 'capitalize',
3131
},
3232
});
3333

0 commit comments

Comments
 (0)