@mustmove/overlay-kit-rn 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +101 -0
  2. package/dist/index.d.mts +140 -0
  3. package/dist/index.d.ts +140 -0
  4. package/dist/index.js +841 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +821 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +54 -0
package/README.md ADDED
@@ -0,0 +1,101 @@
1
+ # @mustmove/overlay-kit-rn
2
+
3
+ React Native overlay management library for modals and bottom sheets.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @mustmove/overlay-kit-rn
9
+ ```
10
+
11
+ ### Peer Dependencies
12
+
13
+ This library requires the following peer dependencies:
14
+
15
+ ```bash
16
+ npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-worklets
17
+ ```
18
+
19
+ ## Quick Start
20
+
21
+ ```tsx
22
+ import { overlay, OverlayProvider } from '@mustmove/overlay-kit-rn';
23
+
24
+ // 1. Wrap your app with OverlayProvider
25
+ function App() {
26
+ return (
27
+ <OverlayProvider>
28
+ <YourAppContent />
29
+ </OverlayProvider>
30
+ );
31
+ }
32
+
33
+ // 2. Create your modal component
34
+ const MyModal = ({ close }) => (
35
+ <View>
36
+ <Text>Hello Modal!</Text>
37
+ <Button title="Close" onPress={close} />
38
+ </View>
39
+ );
40
+
41
+ // 3. Open the modal
42
+ const openModal = () => {
43
+ overlay.open(MyModal, {
44
+ overlayType: 'modal',
45
+ modalType: 'center',
46
+ });
47
+ };
48
+ ```
49
+
50
+ ## Features
51
+
52
+ - ✅ Pure React Native Modal (no third-party modal dependency)
53
+ - ✅ Bottom Sheet with @gorhom/bottom-sheet
54
+ - ✅ Multiple overlay types (modal, bottomSheet, overlay)
55
+ - ✅ Async modal support
56
+ - ✅ Nested modals
57
+ - ✅ TypeScript support
58
+ - ✅ Keyboard handling for bottom sheets
59
+
60
+ ## API
61
+
62
+ ### `overlay.open(Component, options)`
63
+
64
+ Opens an overlay with the specified component.
65
+
66
+ ```tsx
67
+ overlay.open(YourComponent, {
68
+ overlayType: 'modal' | 'bottomSheet' | 'overlay',
69
+ // Modal specific options
70
+ modalType: 'center' | 'bottom' | 'top' | 'left' | 'right',
71
+ backdropOpacity: 0.5,
72
+ animationType: 'slideInUp' | 'slideInDown' | 'bounceIn' | 'fadeIn',
73
+ // Bottom sheet specific options
74
+ snapPoints: ['25%', '50%', '90%'],
75
+ enablePanDownToClose: true,
76
+ });
77
+ ```
78
+
79
+ ### `overlay.openAsync(Component, options)`
80
+
81
+ Opens an overlay and returns a promise that resolves with the result.
82
+
83
+ ```tsx
84
+ const result = await overlay.openAsync(AsyncComponent, {
85
+ overlayType: 'modal',
86
+ });
87
+ ```
88
+
89
+ ### Component Props
90
+
91
+ Your overlay components receive these props:
92
+
93
+ ```tsx
94
+ interface OverlayComponentProps {
95
+ close: (result?: any) => void;
96
+ }
97
+ ```
98
+
99
+ ## License
100
+
101
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,140 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import React__default, { FC } from 'react';
4
+ import { ListRenderItem, StyleProp, ViewStyle } from 'react-native';
5
+
6
+ declare const overlay: {
7
+ open: (controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent, options?: {
8
+ overlayId?: string;
9
+ overlayType?: "overlay" | "bottomSheet" | "modal";
10
+ snapPoints?: (string | number)[];
11
+ enablePanDownToClose?: boolean;
12
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
13
+ backdropOpacity?: number;
14
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
15
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
16
+ }) => string;
17
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
18
+ overlayId?: string;
19
+ overlayType?: "overlay" | "bottomSheet" | "modal";
20
+ snapPoints?: (string | number)[];
21
+ enablePanDownToClose?: boolean;
22
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
23
+ backdropOpacity?: number;
24
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
25
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
26
+ }) => Promise<T>;
27
+ close: (overlayId: string) => void;
28
+ unmount: (overlayId: string) => void;
29
+ closeAll: () => void;
30
+ unmountAll: () => void;
31
+ };
32
+ declare const OverlayProvider: ({ children }: React.PropsWithChildren) => react_jsx_runtime.JSX.Element;
33
+ declare const useCurrentOverlay: () => string | null;
34
+ declare const useOverlayData: () => Record<string, {
35
+ id: string;
36
+ componentKey: string;
37
+ isOpen: boolean;
38
+ isMounted: boolean;
39
+ controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent;
40
+ overlayType?: "overlay" | "bottomSheet" | "modal";
41
+ options?: any;
42
+ }>;
43
+ declare function experimental_createOverlayContext(): {
44
+ overlay: {
45
+ open: (controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent, options?: {
46
+ overlayId?: string;
47
+ overlayType?: "overlay" | "bottomSheet" | "modal";
48
+ snapPoints?: (string | number)[];
49
+ enablePanDownToClose?: boolean;
50
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
51
+ backdropOpacity?: number;
52
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
53
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
54
+ }) => string;
55
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
56
+ overlayId?: string;
57
+ overlayType?: "overlay" | "bottomSheet" | "modal";
58
+ snapPoints?: (string | number)[];
59
+ enablePanDownToClose?: boolean;
60
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
61
+ backdropOpacity?: number;
62
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
63
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
64
+ }) => Promise<T>;
65
+ close: (overlayId: string) => void;
66
+ unmount: (overlayId: string) => void;
67
+ closeAll: () => void;
68
+ unmountAll: () => void;
69
+ };
70
+ OverlayProvider: ({ children }: React.PropsWithChildren) => react_jsx_runtime.JSX.Element;
71
+ useCurrentOverlay: () => string | null;
72
+ useOverlayData: () => Record<string, {
73
+ id: string;
74
+ componentKey: string;
75
+ isOpen: boolean;
76
+ isMounted: boolean;
77
+ controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent;
78
+ overlayType?: "overlay" | "bottomSheet" | "modal";
79
+ options?: any;
80
+ }>;
81
+ };
82
+
83
+ declare function createUseExternalEvents<EventHandlers extends Record<string, (params: any) => void>>(prefix: string): readonly [(events: EventHandlers) => void, <EventKey extends keyof EventHandlers>(event: EventKey) => (...payload: Parameters<EventHandlers[EventKey]>) => void];
84
+
85
+ type BottomSheetControllerProps<T = any> = {
86
+ overlayId: string;
87
+ isOpen: boolean;
88
+ close: () => void;
89
+ unmount: () => void;
90
+ snapPoints?: (string | number)[];
91
+ enablePanDownToClose?: boolean;
92
+ header?: React__default.ReactNode;
93
+ footer?: React__default.ReactNode;
94
+ children?: React__default.ReactNode;
95
+ isFlatList?: boolean;
96
+ data?: ArrayLike<T> | null | undefined;
97
+ renderItem?: ListRenderItem<T> | null | undefined;
98
+ keyExtractor?: ((item: T, index: number) => string) | undefined;
99
+ contentContainerStyle?: StyleProp<ViewStyle> | undefined;
100
+ ItemSeparatorComponent?: React__default.ComponentType<any> | null | undefined;
101
+ flatListHeader?: React__default.ReactNode;
102
+ flatListFooter?: React__default.ReactNode;
103
+ enableBackdrop?: boolean;
104
+ backdropOpacity?: number;
105
+ onBackdropPress?: () => void;
106
+ enableDynamicSizing?: boolean;
107
+ enableScrolling?: boolean;
108
+ backgroundStyle?: StyleProp<ViewStyle>;
109
+ handleStyle?: StyleProp<ViewStyle>;
110
+ isLoading?: boolean;
111
+ emptyText?: string;
112
+ extraData?: any;
113
+ };
114
+ type BottomSheetControllerComponent<T = any> = FC<BottomSheetControllerProps<T>>;
115
+
116
+ type ModalControllerProps = {
117
+ overlayId: string;
118
+ isOpen: boolean;
119
+ close: () => void;
120
+ unmount: () => void;
121
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
122
+ backdropOpacity?: number;
123
+ animationType?: "none" | "slide" | "fade";
124
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
125
+ };
126
+ type ModalControllerComponent = FC<ModalControllerProps>;
127
+
128
+ type OverlayControllerProps = {
129
+ overlayId: string;
130
+ isOpen: boolean;
131
+ close: () => void;
132
+ unmount: () => void;
133
+ };
134
+ type OverlayAsyncControllerProps<T> = Omit<OverlayControllerProps, "close"> & {
135
+ close: (param: T) => void;
136
+ };
137
+ type OverlayControllerComponent = FC<OverlayControllerProps>;
138
+ type OverlayAsyncControllerComponent<T> = FC<OverlayAsyncControllerProps<T>>;
139
+
140
+ export { type BottomSheetControllerComponent, type ModalControllerComponent, type OverlayAsyncControllerComponent, type OverlayControllerComponent, OverlayProvider, createUseExternalEvents, experimental_createOverlayContext, overlay, useCurrentOverlay, useOverlayData };
package/dist/index.d.ts ADDED
@@ -0,0 +1,140 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import React__default, { FC } from 'react';
4
+ import { ListRenderItem, StyleProp, ViewStyle } from 'react-native';
5
+
6
+ declare const overlay: {
7
+ open: (controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent, options?: {
8
+ overlayId?: string;
9
+ overlayType?: "overlay" | "bottomSheet" | "modal";
10
+ snapPoints?: (string | number)[];
11
+ enablePanDownToClose?: boolean;
12
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
13
+ backdropOpacity?: number;
14
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
15
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
16
+ }) => string;
17
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
18
+ overlayId?: string;
19
+ overlayType?: "overlay" | "bottomSheet" | "modal";
20
+ snapPoints?: (string | number)[];
21
+ enablePanDownToClose?: boolean;
22
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
23
+ backdropOpacity?: number;
24
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
25
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
26
+ }) => Promise<T>;
27
+ close: (overlayId: string) => void;
28
+ unmount: (overlayId: string) => void;
29
+ closeAll: () => void;
30
+ unmountAll: () => void;
31
+ };
32
+ declare const OverlayProvider: ({ children }: React.PropsWithChildren) => react_jsx_runtime.JSX.Element;
33
+ declare const useCurrentOverlay: () => string | null;
34
+ declare const useOverlayData: () => Record<string, {
35
+ id: string;
36
+ componentKey: string;
37
+ isOpen: boolean;
38
+ isMounted: boolean;
39
+ controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent;
40
+ overlayType?: "overlay" | "bottomSheet" | "modal";
41
+ options?: any;
42
+ }>;
43
+ declare function experimental_createOverlayContext(): {
44
+ overlay: {
45
+ open: (controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent, options?: {
46
+ overlayId?: string;
47
+ overlayType?: "overlay" | "bottomSheet" | "modal";
48
+ snapPoints?: (string | number)[];
49
+ enablePanDownToClose?: boolean;
50
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
51
+ backdropOpacity?: number;
52
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
53
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
54
+ }) => string;
55
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
56
+ overlayId?: string;
57
+ overlayType?: "overlay" | "bottomSheet" | "modal";
58
+ snapPoints?: (string | number)[];
59
+ enablePanDownToClose?: boolean;
60
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
61
+ backdropOpacity?: number;
62
+ animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
63
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
64
+ }) => Promise<T>;
65
+ close: (overlayId: string) => void;
66
+ unmount: (overlayId: string) => void;
67
+ closeAll: () => void;
68
+ unmountAll: () => void;
69
+ };
70
+ OverlayProvider: ({ children }: React.PropsWithChildren) => react_jsx_runtime.JSX.Element;
71
+ useCurrentOverlay: () => string | null;
72
+ useOverlayData: () => Record<string, {
73
+ id: string;
74
+ componentKey: string;
75
+ isOpen: boolean;
76
+ isMounted: boolean;
77
+ controller: OverlayControllerComponent | BottomSheetControllerComponent | ModalControllerComponent;
78
+ overlayType?: "overlay" | "bottomSheet" | "modal";
79
+ options?: any;
80
+ }>;
81
+ };
82
+
83
+ declare function createUseExternalEvents<EventHandlers extends Record<string, (params: any) => void>>(prefix: string): readonly [(events: EventHandlers) => void, <EventKey extends keyof EventHandlers>(event: EventKey) => (...payload: Parameters<EventHandlers[EventKey]>) => void];
84
+
85
+ type BottomSheetControllerProps<T = any> = {
86
+ overlayId: string;
87
+ isOpen: boolean;
88
+ close: () => void;
89
+ unmount: () => void;
90
+ snapPoints?: (string | number)[];
91
+ enablePanDownToClose?: boolean;
92
+ header?: React__default.ReactNode;
93
+ footer?: React__default.ReactNode;
94
+ children?: React__default.ReactNode;
95
+ isFlatList?: boolean;
96
+ data?: ArrayLike<T> | null | undefined;
97
+ renderItem?: ListRenderItem<T> | null | undefined;
98
+ keyExtractor?: ((item: T, index: number) => string) | undefined;
99
+ contentContainerStyle?: StyleProp<ViewStyle> | undefined;
100
+ ItemSeparatorComponent?: React__default.ComponentType<any> | null | undefined;
101
+ flatListHeader?: React__default.ReactNode;
102
+ flatListFooter?: React__default.ReactNode;
103
+ enableBackdrop?: boolean;
104
+ backdropOpacity?: number;
105
+ onBackdropPress?: () => void;
106
+ enableDynamicSizing?: boolean;
107
+ enableScrolling?: boolean;
108
+ backgroundStyle?: StyleProp<ViewStyle>;
109
+ handleStyle?: StyleProp<ViewStyle>;
110
+ isLoading?: boolean;
111
+ emptyText?: string;
112
+ extraData?: any;
113
+ };
114
+ type BottomSheetControllerComponent<T = any> = FC<BottomSheetControllerProps<T>>;
115
+
116
+ type ModalControllerProps = {
117
+ overlayId: string;
118
+ isOpen: boolean;
119
+ close: () => void;
120
+ unmount: () => void;
121
+ modalType?: "center" | "bottom" | "top" | "left" | "right";
122
+ backdropOpacity?: number;
123
+ animationType?: "none" | "slide" | "fade";
124
+ swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
125
+ };
126
+ type ModalControllerComponent = FC<ModalControllerProps>;
127
+
128
+ type OverlayControllerProps = {
129
+ overlayId: string;
130
+ isOpen: boolean;
131
+ close: () => void;
132
+ unmount: () => void;
133
+ };
134
+ type OverlayAsyncControllerProps<T> = Omit<OverlayControllerProps, "close"> & {
135
+ close: (param: T) => void;
136
+ };
137
+ type OverlayControllerComponent = FC<OverlayControllerProps>;
138
+ type OverlayAsyncControllerComponent<T> = FC<OverlayAsyncControllerProps<T>>;
139
+
140
+ export { type BottomSheetControllerComponent, type ModalControllerComponent, type OverlayAsyncControllerComponent, type OverlayControllerComponent, OverlayProvider, createUseExternalEvents, experimental_createOverlayContext, overlay, useCurrentOverlay, useOverlayData };