-
-
Notifications
You must be signed in to change notification settings - Fork 803
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: introduce bottom sheet modal 🔥 (#37)
* chore: update example dependencies * chore: install nanoid * chore: added modal/provider implementation * chore: updated examples * chore: updated example screens titles * chore: remove default handle shadow * chore: added dismissOnScrollDown feature * chore: reset app entry screen * chore: stablize animated values and nodes * chore: updated scrollables style type * chore: added pointerEvents to overlay * chore: added allowTouchThroughOverlay to modal * fix: patch react-native on ios 14 * chore: updated examples! * docs: updated readme and add modal document * docs: updated readme and add modal document * chore: updated preview image * chore: updated map example * chore: renamed stack modals example
- Loading branch information
Showing
77 changed files
with
2,386 additions
and
548 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| # Bottom Sheet Modal | ||
|
|
||
| With the release of the library, support for stack sheet modals were something planned ahead to provide the a native feel & and experience to users. | ||
|
|
||
| The implementation of this feature was inspired by Apple Maps sheet modals ❤️, [check out the Apple Map sheet modals clone](../example/src/screens/advanced/MapExample.tsx). | ||
|
|
||
| ## Features | ||
|
|
||
| - Smooth interaction and mounting animation. | ||
| - Support stack sheet modals. | ||
|
|
||
| ## Hooks | ||
|
|
||
| ### `useBottomSheetModal` | ||
|
|
||
| This hook to provides the bottom sheet modal: | ||
|
|
||
| #### `present` | ||
|
|
||
| Present a scrollable view that it will be wrapped with Bottom Sheet, and provide the bottom sheet view & modal props in the configs parameter. | ||
|
|
||
| > `type:` (content: ReactNode, configs: [BottomSheetModalConfigs](#bottom-sheet-modal-configs)) => void | ||
| #### `dismiss` | ||
|
|
||
| Dismiss the presented sheet modal. | ||
|
|
||
| > `type:` () => void | ||
| #### `dismissAll` | ||
|
|
||
| Dismiss all presented sheet modals. | ||
|
|
||
| > `type:` () => void | ||
| #### `snapTo` | ||
|
|
||
| Snap to one of the provided points from `snapPoints`. | ||
|
|
||
| > `type:` (index: number) => void | ||
| #### `expand` | ||
|
|
||
| Snap to the maximum provided point from `snapPoints`. | ||
|
|
||
| > `type:` () => void | ||
| #### `collapse` | ||
|
|
||
| Snap to the minimum provided point from `snapPoints`. | ||
|
|
||
| > `type:` () => void | ||
| ## Bottom Sheet Modal Configs | ||
|
|
||
| This will also include [BottomSheetProps](../README.md#props). | ||
|
|
||
| #### `allowTouchThroughOverlay` | ||
|
|
||
| Allow touch through overlay component. | ||
|
|
||
| > `required:` NO | `type:` boolean | `default:` false | ||
| #### `overlayComponent` | ||
|
|
||
| Overlay component. | ||
|
|
||
| > `required:` NO | `type:` React.FC<[BottomSheetOverlayProps](../src/components/overlay/types.d.ts)> | ||
| #### `overlayOpacity` | ||
|
|
||
| Overlay opacity. | ||
|
|
||
| > `required:` NO | `type:` number | `default:` 0.5 | ||
| #### `dismissOnOverlayPress` | ||
|
|
||
| Dismiss modal when press on overlay. | ||
|
|
||
| > `required:` NO | `type:` boolean | `default:` true | ||
| #### `dismissOnScrollDown` | ||
|
|
||
| Dismiss modal when scroll down. | ||
|
|
||
| > `required:` NO | `type:` boolean | `default:` true | ||
| ## Example | ||
|
|
||
| ```tsx | ||
| import React, { useCallback, useMemo, useRef } from 'react'; | ||
| import { View, StyleSheet, Button } from 'react-native'; | ||
| import { | ||
| BottomSheetModalProvider, | ||
| useBottomSheetModal, | ||
| } from '@gorhom/bottom-sheet'; | ||
|
|
||
| const App = () => { | ||
| // hooks | ||
| const { present, dismiss } = useBottomSheetModal(); | ||
|
|
||
| // variables | ||
| const snapPoints = useMemo(() => ['25%', '50%', '90%'], []); | ||
|
|
||
| // callbacks | ||
| const handleSheetChanges = useCallback((index: number) => { | ||
| console.log('handleSheetChanges', index); | ||
| }, []); | ||
| const handlePresentPress = useCallback(() => { | ||
| present( | ||
| { | ||
| /* INSERT A SCROLLABLE HERE */ | ||
| }, | ||
| { | ||
| snapPoints: snapPoints, | ||
| onChange: handleSheetChanges, | ||
| } | ||
| ); | ||
| }, [present, snapPoints, handleSheetChanges]); | ||
|
|
||
| const handleDismissPress = useCallback(() => { | ||
| dismiss(); | ||
| }, [dismiss]); | ||
|
|
||
| // renders | ||
| return ( | ||
| <View style={styles.container}> | ||
| <Button onPress={handlePresentPress} title="Present Modal" /> | ||
| <Button onPress={handleDismissPress} title="Dismiss Modal" /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| padding: 24, | ||
| }, | ||
| }); | ||
|
|
||
| export default () => ( | ||
| <BottomSheetModalProvider> | ||
| <App /> | ||
| </BottomSheetModalProvider> | ||
| ); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,10 @@ | ||
| import 'react-native-gesture-handler'; | ||
| import { AppRegistry } from 'react-native'; | ||
| import { enableScreens } from 'react-native-screens'; | ||
| import App from './src/App'; | ||
| import { name as appName } from './app.json'; | ||
|
|
||
| console.disableYellowBox = true; | ||
| enableScreens(true); | ||
|
|
||
| AppRegistry.registerComponent(appName, () => App); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m | ||
| index 21f1a06..2444713 100644 | ||
| --- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m | ||
| +++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m | ||
| @@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink | ||
|
|
||
| - (void)displayLayer:(CALayer *)layer | ||
| { | ||
| + if (!_currentFrame) { | ||
| + _currentFrame = self.image; | ||
| + } | ||
| if (_currentFrame) { | ||
| layer.contentsScale = self.animatedImageScale; | ||
| layer.contents = (__bridge id)_currentFrame.CGImage; | ||
| diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env | ||
| new file mode 100644 | ||
| index 0000000..361f5fb | ||
| --- /dev/null | ||
| +++ b/node_modules/react-native/scripts/.packager.env | ||
| @@ -0,0 +1 @@ | ||
| +export RCT_METRO_PORT=8081 |
Oops, something went wrong.