@lodev09/react-native-true-sheet 3.1.0 → 3.2.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.
- package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt +5 -1
- package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt +103 -118
- package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt +7 -2
- package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetDialogObserver.kt +2 -2
- package/android/src/main/java/com/lodev09/truesheet/utils/ScreenUtils.kt +64 -81
- package/android/src/main/res/values/styles.xml +1 -0
- package/ios/TrueSheetView.mm +20 -3
- package/ios/TrueSheetViewController.h +2 -0
- package/ios/TrueSheetViewController.mm +36 -18
- package/lib/module/TrueSheet.js +3 -1
- package/lib/module/TrueSheet.js.map +1 -1
- package/lib/module/fabric/TrueSheetViewNativeComponent.ts +5 -2
- package/lib/module/navigation/TrueSheetRouter.js +12 -18
- package/lib/module/navigation/TrueSheetRouter.js.map +1 -1
- package/lib/module/navigation/TrueSheetView.js +29 -128
- package/lib/module/navigation/TrueSheetView.js.map +1 -1
- package/lib/module/navigation/createTrueSheetNavigator.js +3 -3
- package/lib/module/navigation/createTrueSheetNavigator.js.map +1 -1
- package/lib/module/navigation/screen/ReanimatedTrueSheetScreen.js +46 -0
- package/lib/module/navigation/screen/ReanimatedTrueSheetScreen.js.map +1 -0
- package/lib/module/navigation/screen/TrueSheetScreen.js +39 -0
- package/lib/module/navigation/screen/TrueSheetScreen.js.map +1 -0
- package/lib/module/navigation/screen/index.js +5 -0
- package/lib/module/navigation/screen/index.js.map +1 -0
- package/lib/module/navigation/screen/types.js +4 -0
- package/lib/module/navigation/screen/types.js.map +1 -0
- package/lib/module/navigation/screen/useSheetScreenState.js +77 -0
- package/lib/module/navigation/screen/useSheetScreenState.js.map +1 -0
- package/lib/module/navigation/useTrueSheetNavigation.js +1 -3
- package/lib/module/navigation/useTrueSheetNavigation.js.map +1 -1
- package/lib/typescript/src/TrueSheet.d.ts.map +1 -1
- package/lib/typescript/src/TrueSheet.types.d.ts +24 -0
- package/lib/typescript/src/TrueSheet.types.d.ts.map +1 -1
- package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts +3 -2
- package/lib/typescript/src/fabric/TrueSheetViewNativeComponent.d.ts.map +1 -1
- package/lib/typescript/src/navigation/TrueSheetRouter.d.ts +4 -4
- package/lib/typescript/src/navigation/TrueSheetRouter.d.ts.map +1 -1
- package/lib/typescript/src/navigation/TrueSheetView.d.ts +1 -1
- package/lib/typescript/src/navigation/TrueSheetView.d.ts.map +1 -1
- package/lib/typescript/src/navigation/createTrueSheetNavigator.d.ts +1 -1
- package/lib/typescript/src/navigation/createTrueSheetNavigator.d.ts.map +1 -1
- package/lib/typescript/src/navigation/screen/ReanimatedTrueSheetScreen.d.ts +3 -0
- package/lib/typescript/src/navigation/screen/ReanimatedTrueSheetScreen.d.ts.map +1 -0
- package/lib/typescript/src/navigation/screen/TrueSheetScreen.d.ts +3 -0
- package/lib/typescript/src/navigation/screen/TrueSheetScreen.d.ts.map +1 -0
- package/lib/typescript/src/navigation/screen/index.d.ts +4 -0
- package/lib/typescript/src/navigation/screen/index.d.ts.map +1 -0
- package/lib/typescript/src/navigation/screen/types.d.ts +18 -0
- package/lib/typescript/src/navigation/screen/types.d.ts.map +1 -0
- package/lib/typescript/src/navigation/screen/useSheetScreenState.d.ts +35 -0
- package/lib/typescript/src/navigation/screen/useSheetScreenState.d.ts.map +1 -0
- package/lib/typescript/src/navigation/types.d.ts +29 -1
- package/lib/typescript/src/navigation/types.d.ts.map +1 -1
- package/lib/typescript/src/navigation/useTrueSheetNavigation.d.ts +1 -1
- package/lib/typescript/src/navigation/useTrueSheetNavigation.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TrueSheet.tsx +3 -1
- package/src/TrueSheet.types.ts +26 -0
- package/src/fabric/TrueSheetViewNativeComponent.ts +5 -2
- package/src/navigation/TrueSheetRouter.ts +6 -12
- package/src/navigation/TrueSheetView.tsx +39 -212
- package/src/navigation/createTrueSheetNavigator.tsx +3 -3
- package/src/navigation/screen/ReanimatedTrueSheetScreen.tsx +47 -0
- package/src/navigation/screen/TrueSheetScreen.tsx +37 -0
- package/src/navigation/screen/index.ts +3 -0
- package/src/navigation/screen/types.ts +20 -0
- package/src/navigation/screen/useSheetScreenState.ts +106 -0
- package/src/navigation/types.ts +31 -0
- package/src/navigation/useTrueSheetNavigation.ts +2 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTrueSheetNavigator.d.ts","sourceRoot":"","sources":["../../../../src/navigation/createTrueSheetNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EAEV,2BAA2B,EAC3B,0BAA0B,EAC1B,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAEjB,
|
|
1
|
+
{"version":3,"file":"createTrueSheetNavigator.d.ts","sourceRoot":"","sources":["../../../../src/navigation/createTrueSheetNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EAEV,2BAA2B,EAC3B,0BAA0B,EAC1B,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAEjB,QAAA,MAAM,kBAAkB,GAAI,qEAMzB,uBAAuB,4CAoBzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,wBAAwB,GACnC,KAAK,CAAC,SAAS,SAAS,aAAa,EACrC,KAAK,CAAC,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,SAAS,EACxD,KAAK,CAAC,OAAO,SAAS,oBAAoB,GAAG;IAC3C,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC3C,aAAa,EAAE,0BAA0B,CAAC;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,cAAc,EAAE,GACb,SAAS,IAAI,MAAM,SAAS,GAAG,uBAAuB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,GAC3F,CAAC;IACF,SAAS,EAAE,OAAO,kBAAkB,CAAC;CACtC,EACD,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,EAElE,SAAS,MAAM,KACd,cAAc,CAAC,OAAO,EAAE,MAAM,CAEhC,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { ReanimatedTrueSheetScreenProps } from './types';
|
|
2
|
+
export declare const ReanimatedTrueSheetScreen: ({ detentIndex, resizeKey, navigation, emit, routeKey, closing, detents, children, reanimatedPositionChangeHandler, ...sheetProps }: ReanimatedTrueSheetScreenProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
//# sourceMappingURL=ReanimatedTrueSheetScreen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ReanimatedTrueSheetScreen.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/screen/ReanimatedTrueSheetScreen.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAK9D,eAAO,MAAM,yBAAyB,GAAI,oIAWvC,8BAA8B,4CA2BhC,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { TrueSheetScreenProps } from './types';
|
|
2
|
+
export declare const TrueSheetScreen: ({ detentIndex, resizeKey, navigation, emit, routeKey, closing, detents, children, ...sheetProps }: TrueSheetScreenProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
//# sourceMappingURL=TrueSheetScreen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrueSheetScreen.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/screen/TrueSheetScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpD,eAAO,MAAM,eAAe,GAAI,mGAU7B,oBAAoB,4CAsBtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/screen/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ParamListBase } from '@react-navigation/native';
|
|
2
|
+
import type { TrueSheetProps } from '../../TrueSheet.types';
|
|
3
|
+
import type { TrueSheetNavigationHelpers, TrueSheetNavigationProp } from '../types';
|
|
4
|
+
export interface TrueSheetScreenProps {
|
|
5
|
+
detentIndex: number;
|
|
6
|
+
resizeKey?: number;
|
|
7
|
+
navigation: TrueSheetNavigationProp<ParamListBase>;
|
|
8
|
+
emit: TrueSheetNavigationHelpers['emit'];
|
|
9
|
+
routeKey: string;
|
|
10
|
+
closing?: boolean;
|
|
11
|
+
detents: TrueSheetProps['detents'];
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
[key: string]: unknown;
|
|
14
|
+
}
|
|
15
|
+
export interface ReanimatedTrueSheetScreenProps extends TrueSheetScreenProps {
|
|
16
|
+
reanimatedPositionChangeHandler?: TrueSheetProps['onPositionChange'];
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/screen/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,8BAA+B,SAAQ,oBAAoB;IAC1E,+BAA+B,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;CACtE"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { TrueSheet } from '../../TrueSheet';
|
|
2
|
+
import type { DetentChangeEvent, DetentInfoEventPayload, DidBlurEvent, DidFocusEvent, DidPresentEvent, DragBeginEvent, DragChangeEvent, DragEndEvent, PositionChangeEvent, PositionChangeEventPayload, WillBlurEvent, WillDismissEvent, WillFocusEvent, WillPresentEvent } from '../../TrueSheet.types';
|
|
3
|
+
import type { TrueSheetNavigationEventMap, TrueSheetNavigationHelpers, TrueSheetNavigationProp } from '../types';
|
|
4
|
+
import type { ParamListBase } from '@react-navigation/native';
|
|
5
|
+
type EmitFn = TrueSheetNavigationHelpers['emit'];
|
|
6
|
+
interface UseSheetScreenStateProps {
|
|
7
|
+
detentIndex: number;
|
|
8
|
+
resizeKey?: number;
|
|
9
|
+
closing?: boolean;
|
|
10
|
+
navigation: TrueSheetNavigationProp<ParamListBase>;
|
|
11
|
+
routeKey: string;
|
|
12
|
+
emit: EmitFn;
|
|
13
|
+
}
|
|
14
|
+
export declare const useSheetScreenState: (props: UseSheetScreenStateProps) => {
|
|
15
|
+
ref: import("react").RefObject<TrueSheet | null>;
|
|
16
|
+
initialDetentIndex: number;
|
|
17
|
+
emitEvent: (type: keyof TrueSheetNavigationEventMap, data: DetentInfoEventPayload | PositionChangeEventPayload | undefined) => void;
|
|
18
|
+
eventHandlers: {
|
|
19
|
+
onWillPresent: (e: WillPresentEvent) => void;
|
|
20
|
+
onDidPresent: (e: DidPresentEvent) => void;
|
|
21
|
+
onWillDismiss: (_e: WillDismissEvent) => void;
|
|
22
|
+
onDidDismiss: () => void;
|
|
23
|
+
onDetentChange: (e: DetentChangeEvent) => void;
|
|
24
|
+
onDragBegin: (e: DragBeginEvent) => void;
|
|
25
|
+
onDragChange: (e: DragChangeEvent) => void;
|
|
26
|
+
onDragEnd: (e: DragEndEvent) => void;
|
|
27
|
+
onPositionChange: (e: PositionChangeEvent) => void;
|
|
28
|
+
onWillFocus: (_e: WillFocusEvent) => void;
|
|
29
|
+
onDidFocus: (_e: DidFocusEvent) => void;
|
|
30
|
+
onWillBlur: (_e: WillBlurEvent) => void;
|
|
31
|
+
onDidBlur: (_e: DidBlurEvent) => void;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=useSheetScreenState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSheetScreenState.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/screen/useSheetScreenState.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,cAAc,EACd,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACV,2BAA2B,EAC3B,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,KAAK,MAAM,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;AAEjD,UAAU,wBAAwB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB;;;sBA6BzD,MAAM,2BAA2B,QACjC,sBAAsB,GAAG,0BAA0B,GAAG,SAAS;;2BAsBhD,gBAAgB;0BACjB,eAAe;4BACb,gBAAgB;;4BAEhB,iBAAiB;yBACpB,cAAc;0BACb,eAAe;uBAClB,YAAY;8BACL,mBAAmB;0BACvB,cAAc;yBACf,aAAa;yBACb,aAAa;wBACd,YAAY;;CAGjC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, NavigationState, ParamListBase, RouteProp, StackActionHelpers } from '@react-navigation/native';
|
|
2
|
-
import type { DetentInfoEventPayload, PositionChangeEventPayload, TrueSheetProps } from '../TrueSheet.types';
|
|
2
|
+
import type { DetentInfoEventPayload, PositionChangeEventPayload, PositionChangeEvent, TrueSheetProps } from '../TrueSheet.types';
|
|
3
3
|
export type TrueSheetNavigationEventMap = {
|
|
4
4
|
/**
|
|
5
5
|
* Event fired when the sheet is about to be presented.
|
|
@@ -109,6 +109,34 @@ export type TrueSheetNavigationOptions = Pick<TrueSheetProps, 'detents' | 'backg
|
|
|
109
109
|
* @default 0
|
|
110
110
|
*/
|
|
111
111
|
detentIndex?: number;
|
|
112
|
+
/**
|
|
113
|
+
* Use ReanimatedTrueSheet for this screen.
|
|
114
|
+
* Enables worklet-based `onPositionChange` events.
|
|
115
|
+
*
|
|
116
|
+
* @default false
|
|
117
|
+
*/
|
|
118
|
+
reanimated?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* A reanimated position change handler created by `useReanimatedPositionChangeHandler`.
|
|
121
|
+
* Only used when `reanimated` is enabled.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* ```tsx
|
|
125
|
+
* const positionHandler = useReanimatedPositionChangeHandler((payload) => {
|
|
126
|
+
* 'worklet';
|
|
127
|
+
* animatedValue.value = payload.position;
|
|
128
|
+
* });
|
|
129
|
+
*
|
|
130
|
+
* <Navigator.Screen
|
|
131
|
+
* name="Sheet"
|
|
132
|
+
* options={{
|
|
133
|
+
* reanimated: true,
|
|
134
|
+
* reanimatedPositionChangeHandler: positionHandler,
|
|
135
|
+
* }}
|
|
136
|
+
* />
|
|
137
|
+
* ```
|
|
138
|
+
*/
|
|
139
|
+
reanimatedPositionChangeHandler?: (e: PositionChangeEvent) => void;
|
|
112
140
|
};
|
|
113
141
|
export type TrueSheetNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, TrueSheetNavigationState<ParamListBase>, TrueSheetNavigationOptions, TrueSheetNavigationEventMap, unknown> & {
|
|
114
142
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/navigation/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,aAAa,EACb,SAAS,EACT,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EACV,sBAAsB,EACtB,0BAA0B,EAC1B,mBAAmB,EACnB,cAAc,EACf,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,gBAAgB,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IACnD;;OAEG;IACH,eAAe,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IAClD;;OAEG;IACH,gBAAgB,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IACtC;;OAEG;IACH,eAAe,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IACrC;;OAEG;IACH,iBAAiB,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IACpD;;OAEG;IACH,cAAc,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IACjD;;OAEG;IACH,eAAe,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IAClD;;OAEG;IACH,YAAY,EAAE;QAAE,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IAC/C;;OAEG;IACH,mBAAmB,EAAE;QAAE,IAAI,EAAE,0BAA0B,CAAA;KAAE,CAAC;IAC1D;;OAEG;IACH,cAAc,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IACpC;;OAEG;IACH,aAAa,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IACnC;;OAEG;IACH,aAAa,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IACnC;;OAEG;IACH,YAAY,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,SAAS,SAAS,aAAa,IAAI,IAAI,CAC1E,eAAe,CAAC,SAAS,CAAC,EAC1B,QAAQ,CACT,GAAG;IACF,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,GAAG;QACtD,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,EAAE,CAAC;CACN,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,SAAS,SAAS,aAAa,IAChE,kBAAkB,CAAC,SAAS,CAAC,GAAG;IAC9B;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,uBAAuB,CACjC,SAAS,SAAS,aAAa,EAC/B,SAAS,SAAS,MAAM,SAAS,GAAG,MAAM,EAC1C,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,SAAS,IAChD,cAAc,CAChB,SAAS,EACT,SAAS,EACT,WAAW,EACX,wBAAwB,CAAC,SAAS,CAAC,EACnC,0BAA0B,EAC1B,2BAA2B,CAC5B,GACC,sBAAsB,CAAC,SAAS,CAAC,CAAC;AAEpC,MAAM,MAAM,oBAAoB,CAC9B,SAAS,SAAS,aAAa,EAC/B,SAAS,SAAS,MAAM,SAAS,GAAG,MAAM,EAC1C,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,SAAS,IAChD;IACF,UAAU,EAAE,uBAAuB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,iBAAiB,CACxD,aAAa,EACb,2BAA2B,CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,cAAc,EACZ,SAAS,GACT,iBAAiB,GACjB,cAAc,GACd,aAAa,GACb,WAAW,GACX,SAAS,GACT,gBAAgB,GAChB,QAAQ,GACR,mBAAmB,GACnB,UAAU,GACV,aAAa,GACb,WAAW,GACX,sBAAsB,GACtB,YAAY,GACZ,cAAc,GACd,YAAY,GACZ,QAAQ,GACR,QAAQ,CACX,GAAG;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,+BAA+B,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,uBAAuB,CAC3D,aAAa,EACb,MAAM,GAAG,SAAS,EAClB,wBAAwB,CAAC,aAAa,CAAC,EACvC,0BAA0B,EAC1B,2BAA2B,EAC3B,OAAO,CACR,GAAG;IACF;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAC1C,0BAA0B,EAC1B,uBAAuB,CAAC,aAAa,CAAC,EACtC,SAAS,CAAC,aAAa,CAAC,CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,mBAAmB,CAAC;CACpC,CAAC"}
|
|
@@ -19,5 +19,5 @@ import type { TrueSheetNavigationProp } from './types';
|
|
|
19
19
|
* }
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
|
-
export declare
|
|
22
|
+
export declare const useTrueSheetNavigation: <T extends ParamListBase = ParamListBase>() => TrueSheetNavigationProp<T>;
|
|
23
23
|
//# sourceMappingURL=useTrueSheetNavigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTrueSheetNavigation.d.ts","sourceRoot":"","sources":["../../../../src/navigation/useTrueSheetNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,
|
|
1
|
+
{"version":3,"file":"useTrueSheetNavigation.d.ts","sourceRoot":"","sources":["../../../../src/navigation/useTrueSheetNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,sBAAsB,GACjC,CAAC,SAAS,aAAa,GAAG,aAAa,OACpC,uBAAuB,CAAC,CAAC,CAAgD,CAAC"}
|
package/package.json
CHANGED
package/src/TrueSheet.tsx
CHANGED
|
@@ -373,6 +373,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
373
373
|
style,
|
|
374
374
|
header,
|
|
375
375
|
footer,
|
|
376
|
+
insetAdjustment = 'automatic',
|
|
376
377
|
...rest
|
|
377
378
|
} = this.props;
|
|
378
379
|
|
|
@@ -407,7 +408,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
407
408
|
detents={resolvedDetents}
|
|
408
409
|
blurTint={blurTint}
|
|
409
410
|
blurOptions={blurOptions}
|
|
410
|
-
|
|
411
|
+
backgroundColor={backgroundColor}
|
|
411
412
|
cornerRadius={cornerRadius}
|
|
412
413
|
grabber={grabber}
|
|
413
414
|
grabberOptions={{
|
|
@@ -425,6 +426,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
425
426
|
edgeToEdgeFullScreen={edgeToEdgeFullScreen}
|
|
426
427
|
scrollable={scrollable}
|
|
427
428
|
pageSizing={pageSizing}
|
|
429
|
+
insetAdjustment={insetAdjustment}
|
|
428
430
|
onMount={this.onMount}
|
|
429
431
|
onWillPresent={this.onWillPresent}
|
|
430
432
|
onDidPresent={this.onDidPresent}
|
package/src/TrueSheet.types.ts
CHANGED
|
@@ -97,6 +97,21 @@ export interface BlurOptions {
|
|
|
97
97
|
interaction?: boolean;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
+
/**
|
|
101
|
+
* Inset adjustment behavior for the sheet content.
|
|
102
|
+
*/
|
|
103
|
+
export type InsetAdjustment =
|
|
104
|
+
/**
|
|
105
|
+
* Automatically adjusts the sheet height to account for system insets (safe area).
|
|
106
|
+
* This ensures the sheet content is properly inset from system UI elements.
|
|
107
|
+
*/
|
|
108
|
+
| 'automatic'
|
|
109
|
+
/**
|
|
110
|
+
* Does not adjust the sheet height for system insets.
|
|
111
|
+
* The sheet height is calculated purely from the detent values.
|
|
112
|
+
*/
|
|
113
|
+
| 'never';
|
|
114
|
+
|
|
100
115
|
/**
|
|
101
116
|
* Blur style mapped to native values in IOS.
|
|
102
117
|
*
|
|
@@ -298,6 +313,17 @@ export interface TrueSheetProps extends ViewProps {
|
|
|
298
313
|
*/
|
|
299
314
|
edgeToEdgeFullScreen?: boolean;
|
|
300
315
|
|
|
316
|
+
/**
|
|
317
|
+
* Controls how the sheet adjusts its height for system insets (safe area).
|
|
318
|
+
*
|
|
319
|
+
* - `'automatic'`: Adds the bottom safe area inset to the sheet height,
|
|
320
|
+
* ensuring content is properly inset from system UI elements.
|
|
321
|
+
* - `'never'`: Does not adjust for insets; height is calculated purely from detent values.
|
|
322
|
+
*
|
|
323
|
+
* @default 'automatic'
|
|
324
|
+
*/
|
|
325
|
+
insetAdjustment?: InsetAdjustment;
|
|
326
|
+
|
|
301
327
|
/**
|
|
302
328
|
* A component that is fixed at the top of the Sheet content.
|
|
303
329
|
* Useful for search bars, titles, or other header content.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ViewProps } from 'react-native';
|
|
1
|
+
import type { ColorValue, ViewProps } from 'react-native';
|
|
2
2
|
import type {
|
|
3
3
|
DirectEventHandler,
|
|
4
4
|
Double,
|
|
@@ -39,14 +39,17 @@ export interface NativeProps extends ViewProps {
|
|
|
39
39
|
|
|
40
40
|
// Number properties - use 0 as default to avoid nil insertion
|
|
41
41
|
maxHeight?: WithDefault<Double, 0>;
|
|
42
|
-
background?: WithDefault<Int32, 0>;
|
|
43
42
|
cornerRadius?: WithDefault<Double, -1>;
|
|
43
|
+
|
|
44
|
+
// Color properties
|
|
45
|
+
backgroundColor?: ColorValue;
|
|
44
46
|
initialDetentIndex?: WithDefault<Int32, -1>;
|
|
45
47
|
dimmedDetentIndex?: WithDefault<Int32, 0>;
|
|
46
48
|
|
|
47
49
|
// String properties - use empty string as default to avoid nil insertion
|
|
48
50
|
blurTint?: WithDefault<string, ''>;
|
|
49
51
|
keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
|
|
52
|
+
insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
|
|
50
53
|
|
|
51
54
|
// Blur options
|
|
52
55
|
blurOptions?: BlurOptionsType;
|
|
@@ -35,20 +35,14 @@ export type TrueSheetActionType =
|
|
|
35
35
|
|
|
36
36
|
export const TrueSheetActions = {
|
|
37
37
|
...StackActions,
|
|
38
|
-
resize(index: number): TrueSheetActionType {
|
|
39
|
-
|
|
40
|
-
},
|
|
41
|
-
dismiss(): TrueSheetActionType {
|
|
42
|
-
return { type: 'DISMISS' };
|
|
43
|
-
},
|
|
44
|
-
remove(): TrueSheetActionType {
|
|
45
|
-
return { type: 'REMOVE' };
|
|
46
|
-
},
|
|
38
|
+
resize: (index: number): TrueSheetActionType => ({ type: 'RESIZE', index }),
|
|
39
|
+
dismiss: (): TrueSheetActionType => ({ type: 'DISMISS' }),
|
|
40
|
+
remove: (): TrueSheetActionType => ({ type: 'REMOVE' }),
|
|
47
41
|
};
|
|
48
42
|
|
|
49
|
-
export
|
|
43
|
+
export const TrueSheetRouter = (
|
|
50
44
|
routerOptions: StackRouterOptions
|
|
51
|
-
): Router<TrueSheetNavigationState<ParamListBase>, TrueSheetActionType> {
|
|
45
|
+
): Router<TrueSheetNavigationState<ParamListBase>, TrueSheetActionType> => {
|
|
52
46
|
const baseRouter = StackRouter(routerOptions) as unknown as Router<
|
|
53
47
|
TrueSheetNavigationState<ParamListBase>,
|
|
54
48
|
TrueSheetActionType
|
|
@@ -169,4 +163,4 @@ export function TrueSheetRouter(
|
|
|
169
163
|
|
|
170
164
|
actionCreators: TrueSheetActions,
|
|
171
165
|
};
|
|
172
|
-
}
|
|
166
|
+
};
|
|
@@ -1,225 +1,26 @@
|
|
|
1
1
|
import type { ParamListBase } from '@react-navigation/native';
|
|
2
|
-
import React, { useCallback, useEffect, useRef } from 'react';
|
|
3
2
|
|
|
4
|
-
import { TrueSheet } from '../TrueSheet';
|
|
5
|
-
import type {
|
|
6
|
-
DetentChangeEvent,
|
|
7
|
-
DetentInfoEventPayload,
|
|
8
|
-
DidBlurEvent,
|
|
9
|
-
DidFocusEvent,
|
|
10
|
-
DidPresentEvent,
|
|
11
|
-
DragBeginEvent,
|
|
12
|
-
DragChangeEvent,
|
|
13
|
-
DragEndEvent,
|
|
14
|
-
PositionChangeEvent,
|
|
15
|
-
PositionChangeEventPayload,
|
|
16
|
-
WillBlurEvent,
|
|
17
|
-
WillDismissEvent,
|
|
18
|
-
WillFocusEvent,
|
|
19
|
-
WillPresentEvent,
|
|
20
|
-
} from '../TrueSheet.types';
|
|
21
3
|
import type {
|
|
22
4
|
TrueSheetDescriptorMap,
|
|
23
|
-
TrueSheetNavigationEventMap,
|
|
24
5
|
TrueSheetNavigationHelpers,
|
|
25
|
-
TrueSheetNavigationOptions,
|
|
26
|
-
TrueSheetNavigationProp,
|
|
27
6
|
TrueSheetNavigationState,
|
|
28
7
|
} from './types';
|
|
29
|
-
import {
|
|
8
|
+
import { TrueSheetScreen, type ReanimatedTrueSheetScreenProps } from './screen';
|
|
30
9
|
|
|
31
|
-
|
|
10
|
+
let ReanimatedTrueSheetScreen: React.ComponentType<ReanimatedTrueSheetScreenProps> | null = null;
|
|
32
11
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
closing?: boolean;
|
|
40
|
-
children: React.ReactNode;
|
|
12
|
+
const getReanimatedScreen = (): React.ComponentType<ReanimatedTrueSheetScreenProps> => {
|
|
13
|
+
if (!ReanimatedTrueSheetScreen) {
|
|
14
|
+
ReanimatedTrueSheetScreen =
|
|
15
|
+
require('./screen/ReanimatedTrueSheetScreen').ReanimatedTrueSheetScreen;
|
|
16
|
+
}
|
|
17
|
+
return ReanimatedTrueSheetScreen!;
|
|
41
18
|
};
|
|
42
19
|
|
|
43
|
-
function TrueSheetScreen({
|
|
44
|
-
detentIndex,
|
|
45
|
-
resizeKey,
|
|
46
|
-
navigation,
|
|
47
|
-
emit,
|
|
48
|
-
routeKey,
|
|
49
|
-
closing,
|
|
50
|
-
detents,
|
|
51
|
-
children,
|
|
52
|
-
...sheetProps
|
|
53
|
-
}: TrueSheetScreenProps) {
|
|
54
|
-
const ref = useRef<TrueSheet>(null);
|
|
55
|
-
const isDismissedRef = useRef(false);
|
|
56
|
-
const isFirstRenderRef = useRef(true);
|
|
57
|
-
// Capture initial detent index only once
|
|
58
|
-
const initialDetentIndexRef = useRef(detentIndex);
|
|
59
|
-
|
|
60
|
-
// Handle closing state change - dismiss the sheet and wait for animation
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
if (closing && !isDismissedRef.current) {
|
|
63
|
-
isDismissedRef.current = true;
|
|
64
|
-
(async () => {
|
|
65
|
-
await ref.current?.dismiss();
|
|
66
|
-
navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
|
|
67
|
-
})();
|
|
68
|
-
} else if (closing && isDismissedRef.current) {
|
|
69
|
-
// Sheet was already dismissed by user swipe, just remove
|
|
70
|
-
navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
|
|
71
|
-
}
|
|
72
|
-
}, [closing, navigation, routeKey]);
|
|
73
|
-
|
|
74
|
-
// Handle resize - resizeKey ensures effect runs even when resizing to same index
|
|
75
|
-
useEffect(() => {
|
|
76
|
-
// Skip first render - initialDetentIndex handles initial presentation
|
|
77
|
-
if (isFirstRenderRef.current) {
|
|
78
|
-
isFirstRenderRef.current = false;
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
ref.current?.resize(detentIndex);
|
|
83
|
-
}, [detentIndex, resizeKey]);
|
|
84
|
-
|
|
85
|
-
const emitEvent = useCallback(
|
|
86
|
-
(
|
|
87
|
-
type: keyof TrueSheetNavigationEventMap,
|
|
88
|
-
data: DetentInfoEventPayload | PositionChangeEventPayload | undefined
|
|
89
|
-
) => {
|
|
90
|
-
emit({
|
|
91
|
-
type,
|
|
92
|
-
target: routeKey,
|
|
93
|
-
data,
|
|
94
|
-
} as Parameters<EmitFn>[0]);
|
|
95
|
-
},
|
|
96
|
-
[emit, routeKey]
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
const onWillPresent = useCallback(
|
|
100
|
-
(e: WillPresentEvent) => {
|
|
101
|
-
emitEvent('sheetWillPresent', e.nativeEvent);
|
|
102
|
-
},
|
|
103
|
-
[emitEvent]
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
const onDidPresent = useCallback(
|
|
107
|
-
(e: DidPresentEvent) => {
|
|
108
|
-
emitEvent('sheetDidPresent', e.nativeEvent);
|
|
109
|
-
},
|
|
110
|
-
[emitEvent]
|
|
111
|
-
);
|
|
112
|
-
|
|
113
|
-
const onWillDismiss = useCallback(
|
|
114
|
-
(_e: WillDismissEvent) => {
|
|
115
|
-
emitEvent('sheetWillDismiss', undefined);
|
|
116
|
-
},
|
|
117
|
-
[emitEvent]
|
|
118
|
-
);
|
|
119
|
-
|
|
120
|
-
const onDidDismiss = useCallback(() => {
|
|
121
|
-
emitEvent('sheetDidDismiss', undefined);
|
|
122
|
-
// User dismissed the sheet by swiping down
|
|
123
|
-
if (!isDismissedRef.current) {
|
|
124
|
-
isDismissedRef.current = true;
|
|
125
|
-
navigation.goBack();
|
|
126
|
-
}
|
|
127
|
-
}, [emitEvent, navigation]);
|
|
128
|
-
|
|
129
|
-
const onDetentChange = useCallback(
|
|
130
|
-
(e: DetentChangeEvent) => {
|
|
131
|
-
emitEvent('sheetDetentChange', e.nativeEvent);
|
|
132
|
-
},
|
|
133
|
-
[emitEvent]
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
const onDragBegin = useCallback(
|
|
137
|
-
(e: DragBeginEvent) => {
|
|
138
|
-
emitEvent('sheetDragBegin', e.nativeEvent);
|
|
139
|
-
},
|
|
140
|
-
[emitEvent]
|
|
141
|
-
);
|
|
142
|
-
|
|
143
|
-
const onDragChange = useCallback(
|
|
144
|
-
(e: DragChangeEvent) => {
|
|
145
|
-
emitEvent('sheetDragChange', e.nativeEvent);
|
|
146
|
-
},
|
|
147
|
-
[emitEvent]
|
|
148
|
-
);
|
|
149
|
-
|
|
150
|
-
const onDragEnd = useCallback(
|
|
151
|
-
(e: DragEndEvent) => {
|
|
152
|
-
emitEvent('sheetDragEnd', e.nativeEvent);
|
|
153
|
-
},
|
|
154
|
-
[emitEvent]
|
|
155
|
-
);
|
|
156
|
-
|
|
157
|
-
const onPositionChange = useCallback(
|
|
158
|
-
(e: PositionChangeEvent) => {
|
|
159
|
-
emitEvent('sheetPositionChange', e.nativeEvent);
|
|
160
|
-
},
|
|
161
|
-
[emitEvent]
|
|
162
|
-
);
|
|
163
|
-
|
|
164
|
-
const onWillFocus = useCallback(
|
|
165
|
-
(_e: WillFocusEvent) => {
|
|
166
|
-
emitEvent('sheetWillFocus', undefined);
|
|
167
|
-
},
|
|
168
|
-
[emitEvent]
|
|
169
|
-
);
|
|
170
|
-
|
|
171
|
-
const onDidFocus = useCallback(
|
|
172
|
-
(_e: DidFocusEvent) => {
|
|
173
|
-
emitEvent('sheetDidFocus', undefined);
|
|
174
|
-
},
|
|
175
|
-
[emitEvent]
|
|
176
|
-
);
|
|
177
|
-
|
|
178
|
-
const onWillBlur = useCallback(
|
|
179
|
-
(_e: WillBlurEvent) => {
|
|
180
|
-
emitEvent('sheetWillBlur', undefined);
|
|
181
|
-
},
|
|
182
|
-
[emitEvent]
|
|
183
|
-
);
|
|
184
|
-
|
|
185
|
-
const onDidBlur = useCallback(
|
|
186
|
-
(_e: DidBlurEvent) => {
|
|
187
|
-
emitEvent('sheetDidBlur', undefined);
|
|
188
|
-
},
|
|
189
|
-
[emitEvent]
|
|
190
|
-
);
|
|
191
|
-
|
|
192
|
-
return (
|
|
193
|
-
<TrueSheet
|
|
194
|
-
ref={ref}
|
|
195
|
-
name={`navigation-sheet-${routeKey}`}
|
|
196
|
-
initialDetentIndex={initialDetentIndexRef.current}
|
|
197
|
-
detents={detents}
|
|
198
|
-
onWillPresent={onWillPresent}
|
|
199
|
-
onDidPresent={onDidPresent}
|
|
200
|
-
onWillDismiss={onWillDismiss}
|
|
201
|
-
onDidDismiss={onDidDismiss}
|
|
202
|
-
onDetentChange={onDetentChange}
|
|
203
|
-
onDragBegin={onDragBegin}
|
|
204
|
-
onDragChange={onDragChange}
|
|
205
|
-
onDragEnd={onDragEnd}
|
|
206
|
-
onPositionChange={onPositionChange}
|
|
207
|
-
onWillFocus={onWillFocus}
|
|
208
|
-
onDidFocus={onDidFocus}
|
|
209
|
-
onWillBlur={onWillBlur}
|
|
210
|
-
onDidBlur={onDidBlur}
|
|
211
|
-
{...sheetProps}
|
|
212
|
-
>
|
|
213
|
-
{children}
|
|
214
|
-
</TrueSheet>
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
20
|
const DEFAULT_DETENTS: ('auto' | number)[] = ['auto'];
|
|
219
21
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}
|
|
22
|
+
const clampDetentIndex = (index: number, detentsLength: number): number =>
|
|
23
|
+
Math.min(index, Math.max(detentsLength - 1, 0));
|
|
223
24
|
|
|
224
25
|
interface TrueSheetViewProps {
|
|
225
26
|
state: TrueSheetNavigationState<ParamListBase>;
|
|
@@ -227,7 +28,7 @@ interface TrueSheetViewProps {
|
|
|
227
28
|
descriptors: TrueSheetDescriptorMap;
|
|
228
29
|
}
|
|
229
30
|
|
|
230
|
-
export
|
|
31
|
+
export const TrueSheetView = ({ state, navigation, descriptors }: TrueSheetViewProps) => {
|
|
231
32
|
// First route is the base screen, rest are sheets
|
|
232
33
|
const [baseRoute, ...sheetRoutes] = state.routes;
|
|
233
34
|
|
|
@@ -247,9 +48,35 @@ export function TrueSheetView({ state, navigation, descriptors }: TrueSheetViewP
|
|
|
247
48
|
}
|
|
248
49
|
|
|
249
50
|
const { options, navigation: screenNavigation, render } = descriptor;
|
|
250
|
-
const {
|
|
51
|
+
const {
|
|
52
|
+
detentIndex = 0,
|
|
53
|
+
detents = DEFAULT_DETENTS,
|
|
54
|
+
reanimated,
|
|
55
|
+
reanimatedPositionChangeHandler,
|
|
56
|
+
...sheetProps
|
|
57
|
+
} = options;
|
|
251
58
|
const resolvedIndex = clampDetentIndex(route.resizeIndex ?? detentIndex, detents.length);
|
|
252
59
|
|
|
60
|
+
if (reanimated) {
|
|
61
|
+
const ReanimatedScreen = getReanimatedScreen();
|
|
62
|
+
return (
|
|
63
|
+
<ReanimatedScreen
|
|
64
|
+
key={route.key}
|
|
65
|
+
routeKey={route.key}
|
|
66
|
+
closing={route.closing}
|
|
67
|
+
detentIndex={resolvedIndex}
|
|
68
|
+
resizeKey={route.resizeKey}
|
|
69
|
+
detents={detents}
|
|
70
|
+
navigation={screenNavigation}
|
|
71
|
+
emit={navigation.emit}
|
|
72
|
+
reanimatedPositionChangeHandler={reanimatedPositionChangeHandler}
|
|
73
|
+
{...sheetProps}
|
|
74
|
+
>
|
|
75
|
+
{render()}
|
|
76
|
+
</ReanimatedScreen>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
253
80
|
return (
|
|
254
81
|
<TrueSheetScreen
|
|
255
82
|
key={route.key}
|
|
@@ -268,4 +95,4 @@ export function TrueSheetView({ state, navigation, descriptors }: TrueSheetViewP
|
|
|
268
95
|
})}
|
|
269
96
|
</>
|
|
270
97
|
);
|
|
271
|
-
}
|
|
98
|
+
};
|
|
@@ -18,13 +18,13 @@ import type {
|
|
|
18
18
|
TrueSheetNavigatorProps,
|
|
19
19
|
} from './types';
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const TrueSheetNavigator = ({
|
|
22
22
|
id,
|
|
23
23
|
initialRouteName,
|
|
24
24
|
children,
|
|
25
25
|
screenListeners,
|
|
26
26
|
screenOptions,
|
|
27
|
-
}: TrueSheetNavigatorProps) {
|
|
27
|
+
}: TrueSheetNavigatorProps) => {
|
|
28
28
|
const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
|
|
29
29
|
TrueSheetNavigationState<ParamListBase>,
|
|
30
30
|
TrueSheetRouterOptions,
|
|
@@ -44,7 +44,7 @@ function TrueSheetNavigator({
|
|
|
44
44
|
<TrueSheetView state={state} navigation={navigation} descriptors={descriptors} />
|
|
45
45
|
</NavigationContent>
|
|
46
46
|
);
|
|
47
|
-
}
|
|
47
|
+
};
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
50
|
* Creates a TrueSheet navigator.
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import Animated from 'react-native-reanimated';
|
|
2
|
+
|
|
3
|
+
import { TrueSheet } from '../../TrueSheet';
|
|
4
|
+
import type { ReanimatedTrueSheetScreenProps } from './types';
|
|
5
|
+
import { useSheetScreenState } from './useSheetScreenState';
|
|
6
|
+
|
|
7
|
+
const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
|
|
8
|
+
|
|
9
|
+
export const ReanimatedTrueSheetScreen = ({
|
|
10
|
+
detentIndex,
|
|
11
|
+
resizeKey,
|
|
12
|
+
navigation,
|
|
13
|
+
emit,
|
|
14
|
+
routeKey,
|
|
15
|
+
closing,
|
|
16
|
+
detents,
|
|
17
|
+
children,
|
|
18
|
+
reanimatedPositionChangeHandler,
|
|
19
|
+
...sheetProps
|
|
20
|
+
}: ReanimatedTrueSheetScreenProps) => {
|
|
21
|
+
const {
|
|
22
|
+
ref,
|
|
23
|
+
initialDetentIndex,
|
|
24
|
+
eventHandlers: { onPositionChange, ...eventHandlers },
|
|
25
|
+
} = useSheetScreenState({
|
|
26
|
+
detentIndex,
|
|
27
|
+
resizeKey,
|
|
28
|
+
closing,
|
|
29
|
+
navigation,
|
|
30
|
+
routeKey,
|
|
31
|
+
emit,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<AnimatedTrueSheet
|
|
36
|
+
ref={ref}
|
|
37
|
+
name={`navigation-sheet-${routeKey}`}
|
|
38
|
+
initialDetentIndex={initialDetentIndex}
|
|
39
|
+
detents={detents}
|
|
40
|
+
onPositionChange={reanimatedPositionChangeHandler ?? onPositionChange}
|
|
41
|
+
{...eventHandlers}
|
|
42
|
+
{...sheetProps}
|
|
43
|
+
>
|
|
44
|
+
{children}
|
|
45
|
+
</AnimatedTrueSheet>
|
|
46
|
+
);
|
|
47
|
+
};
|