From f39db982cd2b5fee0fac9b3d89b3d2b677a28b07 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Tue, 9 Jan 2024 17:44:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20correct=20example=20code?=
 =?UTF-8?q?=20snippet=20mistake=20for=20typescript=20and=20javascript.=20F?=
 =?UTF-8?q?ixes=20#11?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 124 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 68 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index 4e5de7a..c9ac742 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # React Native Bottom Sheet 💖
+
 ![GitHub](https://img.shields.io/github/license/stanleyugwu/react-native-bottom-sheet?style=plastic&label=License&color=%23fea9f8)
 ![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/stanleyugwu/react-native-bottom-sheet/ci.yml?color=%23fea9f8&label=Build)
 [![runs with expo](https://img.shields.io/badge/Expo-Support-fea9f8.svg?style=platic&logo=EXPO&logoColor=fff)](https://expo.io/)
@@ -6,11 +7,12 @@
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@devvie/bottom-sheet?style=plastic&logo=npm&color=%23fea9f8&label=Bundle%20Size)
 ![npm downloads](https://img.shields.io/npm/dm/@devvie/bottom-sheet?style=plastic&logo=npm&color=%23fea9f8&label=Downloads)
 
-
 The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
 
 ![Preview for Android & iOS](https://i.ibb.co/Y38XsMr/Combined.gif)
+
 #### Web Preview
+
 <p float="left">
   <img src="https://i.ibb.co/sJpsFKD/Web.png" width="400" />
 </p>
@@ -45,7 +47,8 @@ yarn add @devvie/bottom-sheet
 ```
 
 ## 📱 Minimal Usage
-Opening and closing the bottom sheet is done imperatively, so just pass a `ref` to the bottom sheet and call the `open` or `close` methods via the `ref` instance to open and close the bottom sheet respectively. 
+
+Opening and closing the bottom sheet is done imperatively, so just pass a `ref` to the bottom sheet and call the `open` or `close` methods via the `ref` instance to open and close the bottom sheet respectively.
 
 ##### Examples
 
@@ -54,130 +57,139 @@ Opening and closing the bottom sheet is done imperatively, so just pass a `ref`
 ```tsx
 import React, { useRef } from 'react';
 import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
-import { Button } from 'react-native';
+import { Button, View } from 'react-native';
 
 const App = () => {
   const sheetRef = useRef<BottomSheetMethods>(null);
   return (
-    <Button title="Open" onPress={() => sheetRef.current.open()} />
-    <BottomSheet ref={sheetRef}>
-      <Text>
-        The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
-      </Text>
-    </BottomSheet>
+    <View>
+      <Button title="Open" onPress={() => sheetRef.current?.open()} />
+      <BottomSheet ref={sheetRef}>
+        <Text>
+          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
+        </Text>
+      </BottomSheet>
+    </View>
   );
 };
 
 export default App;
 ```
+
 #### Javascript
 
 ```tsx
 import React, { useRef } from 'react';
 import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
-import { Button } from 'react-native';
+import { Button, View } from 'react-native';
 
 const App = () => {
   const sheetRef = useRef(null);
   return (
-    <Button title="Open" onPress={() => sheetRef.current.open()} />
-    <BottomSheet ref={sheetRef}>
-      <Text>
-        The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
-      </Text>
-    </BottomSheet>
+    <View>
+      <Button title="Open" onPress={() => sheetRef.current?.open()} />
+      <BottomSheet ref={sheetRef}>
+        <Text>
+          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
+        </Text>
+      </BottomSheet>
+    </View>
   );
 };
 ```
 
 ### ⚠ Warning
-The bottom sheet component uses and handles pan gestures internally, so to avoid scroll/pan misbehavior with its container, **DO NOT** put it inside a container that supports panning e.g `ScrollView`. You can always  put it just next to the `ScrollView` and use `React Fragment` or a `View` to wrap them and everything should be okay.
+
+The bottom sheet component uses and handles pan gestures internally, so to avoid scroll/pan misbehavior with its container, **DO NOT** put it inside a container that supports panning e.g `ScrollView`. You can always put it just next to the `ScrollView` and use `React Fragment` or a `View` to wrap them and everything should be okay.
 
 #### ❌ Don't do this
 
 ```jsx
 <ScrollView>
-  <BottomSheet>
-    ...
-  </BottomSheet>
+  <BottomSheet>...</BottomSheet>
 </ScrollView>
 ```
 
 #### ✅ Do this
+
 ```jsx
 <>
-<ScrollView>
-  ...
-</ScrollView>
+  <ScrollView>...</ScrollView>
 
-<BottomSheet>
-  ...
-</BottomSheet>
+  <BottomSheet>...</BottomSheet>
 </>
 ```
 
-
 ## 🛠 Props
+
 The bottom sheet is highly configurable via props. All props works for both `Android` and `iOS` except those prefixed with `android_` and `ios_`, which works for only `Android` and `iOS` respectively.
 
-| Property                             | Type                                                                                                                                                                                                                             | Default                   | Description                                                                                                   | Required         |
-| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `android_backdropMaskRippleColor`    | `string \| OpaqueColorValue`                                                                                                                                                                                                      |                            | Color of the ripple effect when backdrop mask is pressed (__Android Only__).                                     | No               |
-| `android_closeOnBackPress`           | `boolean`                                                                                                                                                                                                                        | `true`                     | Determines whether the sheet will close when the device back button is pressed (__Android Only__).            | No               |
-| `animationType`                      | `'slide' \| 'spring' \| 'fade' \| ANIMATIONS`                                                                                                                                                                                                     | `'slide'`                  | Animation to use when opening and closing the bottom sheet.                                                    | No               |
-| `backdropMaskColor`                  | `string \| OpaqueColorValue`                                                                                                                                                                                                      | `'#00000052'`             | Color of the scrim or backdrop mask.                                                     | No               |
-| `children`                           | `ViewProps['children'] \| React.FunctionComponent<{_animatedHeight: Animated.Value}>`                                                                                                                                           | `null`                     | Contents of the bottom sheet.                                                                                 | Yes              |
-| `closeDuration`                      | `number`                                                                                                                                                                                                                         | `500`                      | Duration for sheet closing animation.                                                                         | No               |
-| `closeOnBackdropPress`               | `boolean`                                                                                                                                                                                                                        | `true`                     | Determines whether the bottom sheet will close when the scrim or backdrop mask is pressed.                             | No               |
-| `closeOnDragDown`                    | `boolean`                                                                                                                                                                                                                        | `true`                     | Determines whether the bottom sheet will close when dragged down.                                              | No               |
-| `containerHeight`                    | `ViewStyle['height']`                                                                                                                                                                                                             | `DEVICE SCREEN HEIGHT`    | Height of the bottom sheet's overall container.                                                              | No               |
-| `customBackdropComponent`            | `React.FunctionComponent<{_animatedHeight: Animated.Value}>`                                                                                                                                                                      | `null`                     | Custom component for sheet's scrim or backdrop mask.                                                          | No               |
-| `customBackdropPosition`             | `"top" \| "behind"`                                                                                                                                                                                                              | `'behind'`                 | Determines the position of the custom scrim or backdrop component. `'behind'` puts it behind the keyboard and `'top'`` puts it atop the keyboard.                                                      | No               |
-| `customDragHandleComponent`          | `React.FC<{_animatedHeight: Animated.Value}>`                                                                                                                                           |                            | Custom drag handle component to replace the default bottom sheet's drag handle.                               | No               |
-| `customEasingFunction`               | `AnimationEasingFunction`                                                                                                                                                                                                         | `ANIMATIONS.SLIDE`         | Custom easing function for driving sheet's animation.                                                          | No               |
-| `disableBodyPanning`                 | `boolean`                                                                                                                                                                                                                        | `false`                    | Prevents the bottom sheet from being dragged/panned down on its body.                                          | No               |
-| `disableDragHandlePanning`           | `boolean`                                                                                                                                                                                                                        | `false`                    | Prevents the bottom sheet from being panned down by dragging its drag handle.                                   | No               |
-| `dragHandleStyle`                    | `ViewStyle`                                                                                                                                                                                                                      |                            | Extra styles to apply to the drag handle.                                                                     | No               |
-| `height`                             | `number \| string`                                                                                                                                                                                                               | `'50%'`                    | Height of the bottom sheet when opened. Relative to `containerHeight` prop                                                                   | No               |
-| `hideDragHandle`                     | `boolean`                                                                                                                                                                                                                        | `false`                    | When true, hides the sheet's drag handle.                                                                     | No               |
-| `modal`                              | `boolean`                                                                                                                                                                                                                        | `true`                     | Determines whether the sheet is a modal. A modal sheet has a scrim or backdrop mask, while a standard (non-modal) sheet doesn't.                                                                   | No               |
-| `openDuration`                       | `number`                                                                                                                                                                                                                         | `500`                      | Duration for sheet opening animation.                                                                         | No               |
-| `style`                              | `Omit<ViewStyle, 'height' \| 'minHeight' \| 'maxHeight' \| 'transform:[{translateY}]'>`                                                                                                                                        |                            | Extra styles to apply to the bottom sheet.                                                                    | No               |
+| Property                          | Type                                                                                    | Default                | Description                                                                                                                                       | Required |
+| --------------------------------- | --------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `android_backdropMaskRippleColor` | `string \| OpaqueColorValue`                                                            |                        | Color of the ripple effect when backdrop mask is pressed (**Android Only**).                                                                      | No       |
+| `android_closeOnBackPress`        | `boolean`                                                                               | `true`                 | Determines whether the sheet will close when the device back button is pressed (**Android Only**).                                                | No       |
+| `animationType`                   | `'slide' \| 'spring' \| 'fade' \| ANIMATIONS`                                           | `'slide'`              | Animation to use when opening and closing the bottom sheet.                                                                                       | No       |
+| `backdropMaskColor`               | `string \| OpaqueColorValue`                                                            | `'#00000052'`          | Color of the scrim or backdrop mask.                                                                                                              | No       |
+| `children`                        | `ViewProps['children'] \| React.FunctionComponent<{_animatedHeight: Animated.Value}>`   | `null`                 | Contents of the bottom sheet.                                                                                                                     | Yes      |
+| `closeDuration`                   | `number`                                                                                | `500`                  | Duration for sheet closing animation.                                                                                                             | No       |
+| `closeOnBackdropPress`            | `boolean`                                                                               | `true`                 | Determines whether the bottom sheet will close when the scrim or backdrop mask is pressed.                                                        | No       |
+| `closeOnDragDown`                 | `boolean`                                                                               | `true`                 | Determines whether the bottom sheet will close when dragged down.                                                                                 | No       |
+| `containerHeight`                 | `ViewStyle['height']`                                                                   | `DEVICE SCREEN HEIGHT` | Height of the bottom sheet's overall container.                                                                                                   | No       |
+| `customBackdropComponent`         | `React.FunctionComponent<{_animatedHeight: Animated.Value}>`                            | `null`                 | Custom component for sheet's scrim or backdrop mask.                                                                                              | No       |
+| `customBackdropPosition`          | `"top" \| "behind"`                                                                     | `'behind'`             | Determines the position of the custom scrim or backdrop component. `'behind'` puts it behind the keyboard and `'top'`` puts it atop the keyboard. | No       |
+| `customDragHandleComponent`       | `React.FC<{_animatedHeight: Animated.Value}>`                                           |                        | Custom drag handle component to replace the default bottom sheet's drag handle.                                                                   | No       |
+| `customEasingFunction`            | `AnimationEasingFunction`                                                               | `ANIMATIONS.SLIDE`     | Custom easing function for driving sheet's animation.                                                                                             | No       |
+| `disableBodyPanning`              | `boolean`                                                                               | `false`                | Prevents the bottom sheet from being dragged/panned down on its body.                                                                             | No       |
+| `disableDragHandlePanning`        | `boolean`                                                                               | `false`                | Prevents the bottom sheet from being panned down by dragging its drag handle.                                                                     | No       |
+| `dragHandleStyle`                 | `ViewStyle`                                                                             |                        | Extra styles to apply to the drag handle.                                                                                                         | No       |
+| `height`                          | `number \| string`                                                                      | `'50%'`                | Height of the bottom sheet when opened. Relative to `containerHeight` prop                                                                        | No       |
+| `hideDragHandle`                  | `boolean`                                                                               | `false`                | When true, hides the sheet's drag handle.                                                                                                         | No       |
+| `modal`                           | `boolean`                                                                               | `true`                 | Determines whether the sheet is a modal. A modal sheet has a scrim or backdrop mask, while a standard (non-modal) sheet doesn't.                  | No       |
+| `openDuration`                    | `number`                                                                                | `500`                  | Duration for sheet opening animation.                                                                                                             | No       |
+| `style`                           | `Omit<ViewStyle, 'height' \| 'minHeight' \| 'maxHeight' \| 'transform:[{translateY}]'>` |                        | Extra styles to apply to the bottom sheet.                                                                                                        | No       |
 
 ## Examples
+
 Flexibility is a focus for this bottom sheet, these few examples shows certain behaviors of the bottom sheet and what can be achieved by tweaking its props.
 
 ### 1️⃣ Smart response to keyboard pop ups and orientation changes (_automatic behavior_)
-Android            |  iOS
-:-------------------------:|:-------------------------:
- ![Preview for keyboard handling (Android)](https://i.ibb.co/0BfLWYK/Keyboard-Response.gif) |  ![Preview for keyboard handling (iOS)](https://i.ibb.co/302ZYBL/Keyboard-Response.gif)
+
+|                                          Android                                           |                                          iOS                                           |
+| :----------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |
+| ![Preview for keyboard handling (Android)](https://i.ibb.co/0BfLWYK/Keyboard-Response.gif) | ![Preview for keyboard handling (iOS)](https://i.ibb.co/302ZYBL/Keyboard-Response.gif) |
 
 ### 2️⃣ Handles deeply nested list and scroll views interactions (_automatic beavior_)
-Android            |  iOS
-:-------------------------:|:-------------------------:
- ![Preview for scroll handling (Android)](https://i.ibb.co/kgfPM3w/Nested-Scroll.gif) |  ![Preview for scroll handling (iOS)](https://i.ibb.co/rcrJVLc/Nested-List.gif)
+
+|                                       Android                                        |                                      iOS                                       |
+| :----------------------------------------------------------------------------------: | :----------------------------------------------------------------------------: |
+| ![Preview for scroll handling (Android)](https://i.ibb.co/kgfPM3w/Nested-Scroll.gif) | ![Preview for scroll handling (iOS)](https://i.ibb.co/rcrJVLc/Nested-List.gif) |
 
 ### 3️⃣ Auto adjusts layout when `height` and `containerHeight` props change (_automatic behavior_)
+
 <p float="left">
   <img src="https://i.ibb.co/3YGXHht/Detect-Height.gif" width="300" />
 </p>
 
 ### 4️⃣ Extend sheet height when its content is scrolled
+
 <p float="left">
   <img src="https://i.ibb.co/9W5J2t5/Extend-on-scroll.gif" width="300" />
 </p>
 
 ### 5️⃣ Use as `SnackBar`
+
 <p float="left">
   <img src="https://i.ibb.co/LkMJ255/Snack-Bar.gif" width="300" />
 </p>
 
 ### 6️⃣ Custom Drag Handle Animation Interpolation
+
 <p float="left">
   <img src="https://i.ibb.co/0yDPQ0W/Drag-Handle-Animation.gif" width="300" />
 </p>
 
 ### 7️⃣ Custom Scrim/Backdrop Mask
+
 <p float="left">
   <img src="https://i.ibb.co/h9XqBJC/Custom-Scrim.gif" width="300" />
 </p>