Merge pull request #470 from ammarahm-ed/develop

v10.0.1

Author: ammarahm-ed

app/examples/input.tsx

@@ -6,14 +6,18 @@ import { TextInput } from 'react-native-gesture-handler';
 function Input() {
 
   return (
-    <ActionSheet gestureEnabled>
+    <ActionSheet containerStyle={{
+      borderWidth: 1,
+      borderColor: 'red'
+    }}  gestureEnabled>
       <View
         style={{
           paddingHorizontal: 12,
           height: 200,
           alignItems: 'center',
           justifyContent: 'center',
           gap: 10,
+          borderWidth: 1
         }}>
         <TextInput
           style={{

app/sheets.tsx

@@ -61,8 +61,8 @@ declare module 'react-native-actions-sheet' {
     'return-data': SheetDefinition<{
       returnValue: boolean;
     }>;
-    'legend-list':SheetDefinition
-    'custom-scroll-handlers': SheetDefinition
+    'legend-list': SheetDefinition;
+    'custom-scroll-handlers': SheetDefinition;
   }
 }
 
@@ -86,8 +86,8 @@ export const Sheets = () => {
         'draw-under-statusbar': DrawUnderStatusBar,
         'return-data': ReturnData,
         'floating-sheet': FloatingSheet,
-         'legend-list': LegendListExample,
-         "custom-scroll-handlers": CustomScrollHandlers
+        'legend-list': LegendListExample,
+        'custom-scroll-handlers': CustomScrollHandlers,
       }}
     />
   );

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-actions-sheet",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package.json

@@ -1,9 +1,9 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   EmitterSubscription,
   Keyboard,
   KeyboardEventListener,
-  Platform,
+  Platform
 } from 'react-native';
 
 type ScreenRect = {
@@ -73,7 +73,10 @@ export function useKeyboard(enabled: boolean) {
   }, [enabled, handleKeyboardDidHide, handleKeyboardDidShow]);
   return {
     keyboardShown: !enabled ? false : shown,
-    coordinates: !enabled || !shown ? emptyCoordinates : coordinates,
+    coordinates: {
+      start: !enabled || !shown ? emptyCoordinates : coordinates.start,
+      end: !enabled || !shown ? emptyCoordinates : coordinates.end
+    },
     keyboardHeight: !enabled || !shown ? 0 : keyboardHeight,
     pauseKeyboardHandler,
     reset: () => {

src/hooks/useKeyboard.ts

@@ -1238,9 +1238,6 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                                 {
                                   borderTopRightRadius: 10,
                                   borderTopLeftRadius: 10,
-                                  paddingBottom: useBottomSafeAreaPadding
-                                    ? insets.bottom
-                                    : 0,
                                 },
                                 props.containerStyle,
                                 {
@@ -1251,6 +1248,12 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                                     : dimensions.height - insets.top,
                                   // Using this to trigger layout when keyboard is shown
                                   marginTop: keyboard.keyboardShown ? 0.5 : 0,
+                                  paddingBottom:
+                                    (Platform.OS === 'ios' &&
+                                      keyboard.keyboardShown) ||
+                                    !useBottomSafeAreaPadding
+                                      ? 0
+                                      : insets.bottom,
                                 },
                               ]}>
                               {drawUnderStatusBar ? (

src/index.tsx

@@ -76,7 +76,7 @@ export type ActionSheetRef<SheetId extends keyof Sheets = never> = {
   /**
    * Get the current payload of the sheet
    */
-  currentPayload: () => Sheets[SheetId]["payload"];
+  currentPayload: () => Sheets[SheetId]['payload'];
 };
 
 export type ActionSheetProps<SheetId extends keyof Sheets = never> = {
@@ -203,7 +203,17 @@ export type ActionSheetProps<SheetId extends keyof Sheets = never> = {
   CustomHeaderComponent?: React.ReactNode;
 
   /**
-   * Any custom styles for the container.
+   * Styles for the ActionSheet container.
+   *
+   * Note: You can set most styles here except `maxHeight`, `marginBottom` and `paddingBottom`. These are used internally. You can do this instead:
+   *
+   * ```tsx
+   * <ActionSheet>
+   *  <View style={{
+   *      paddingBottom: 50
+   *   }} />
+   * </ActionSheet>
+   * ```
    * */
   containerStyle?: StyleProp<ViewStyle>;