ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.41k stars 119 forks source link

Container style doesn't allow changing position of modal without changing the backdrop #367

Open stephbucharelli opened 1 month ago

stephbucharelli commented 1 month ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-actions-sheet@0.9.3 for the project I'm working on.

We were trying to center the action sheet when we had a conditional side drawer. Since containerStyle is used across multiple components styles, this is not possible.

This diff adds a prop called additionalStyles which adds that behavior when consumed. Currently, I only have this applied for marginLeft, but it should work for all styles.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-actions-sheet/dist/src/index.js b/node_modules/react-native-actions-sheet/dist/src/index.js
index d3fcd42..bbd5c7e 100644
--- a/node_modules/react-native-actions-sheet/dist/src/index.js
+++ b/node_modules/react-native-actions-sheet/dist/src/index.js
@@ -1203,6 +1203,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
                     undefined, borderRadius: ((_h = props.containerStyle) === null || _h === void 0 ? void 0 : _h.borderRadius) || undefined, width: ((_j = props.containerStyle) === null || _j === void 0 ? void 0 : _j.width) || '100%' }, getElevation(typeof elevation === 'number' ? elevation : 5)), { flex: undefined, height: dimensions.height, maxHeight: dimensions.height, paddingBottom: keyboard.keyboardShown
                     ? keyboard.keyboardHeight || 0
                     : safeAreaPaddings.current.bottom,
+                    marginLeft: props.additionalStyles.marginLeft || 0,
                 //zIndex: 10,
                 transform: [
                     {
diff --git a/node_modules/react-native-actions-sheet/dist/src/types.d.ts b/node_modules/react-native-actions-sheet/dist/src/types.d.ts
index 4724774..fb0aa56 100644
--- a/node_modules/react-native-actions-sheet/dist/src/types.d.ts
+++ b/node_modules/react-native-actions-sheet/dist/src/types.d.ts
@@ -163,6 +163,7 @@ export type ActionSheetProps<SheetId extends keyof Sheets = never> = {
      * Any custom styles for the container.
      * */
     containerStyle?: ViewStyle;
+    additionalStyles?: ViewStyle;
     /**
      * Control closing ActionSheet by touching on backdrop.
      *

This issue body was partially generated by patch-package.