diff --git a/FabricTestExample/src/Test1649.tsx b/FabricTestExample/src/Test1649.tsx index 4ba981c7a8..6c7ac1e9ad 100644 --- a/FabricTestExample/src/Test1649.tsx +++ b/FabricTestExample/src/Test1649.tsx @@ -13,41 +13,50 @@ import { NativeStackNavigationProp, NativeStackNavigationOptions, } from 'react-native-screens/native-stack'; +import { SheetDetentTypes } from 'react-native-screens'; import * as jotai from 'jotai'; -type SheetDetent = NativeStackNavigationOptions['sheetAllowedDetents']; -type SheetUndimmedDetent = - NativeStackNavigationOptions['sheetLargestUndimmedDetent']; - type NavProp = { navigation: NativeStackNavigationProp; }; -const Stack = createNativeStackNavigator(); +type SheetOptions = { + sheetAllowedDetents: SheetDetentTypes; + sheetLargestUndimmedDetent: SheetDetentTypes; + sheetGrabberVisible: boolean; + sheetCornerRadius: number; + sheetExpandsWhenScrolledToEdge: boolean; + sheetCustomDetents: number[]; +}; -const initialAllowedDetentsArray = [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]; +const Stack = createNativeStackNavigator(); /// Sheet options -// const allowedDetentsAtom = jotai.atom('all'); -// const largestUndimmedDetentAtom = jotai.atom('all'); - -const allowedDetentsAtom = jotai.atom(initialAllowedDetentsArray); -const largestUndimmedDetentAtom = jotai.atom(3); - -// const allowedDetentsAtom = jotai.atom([0.7]); -// const largestUndimmedDetentAtom = jotai.atom(0); - +const allowedDetentsAtom = jotai.atom('custom'); +const largestUndimmedDetentAtom = jotai.atom('large'); const grabberVisibleAtom = jotai.atom(false); const cornerRadiusAtom = jotai.atom(-1); const expandsWhenScrolledToEdgeAtom = jotai.atom(false); +const customDetentsAtom = jotai.atom([0.3, 0.6, 0.85]); -const sheetOptionsAtom = jotai.atom(get => ({ - sheetAllowedDetents: get(allowedDetentsAtom), - sheetLargestUndimmedDetent: get(largestUndimmedDetentAtom), - sheetGrabberVisible: get(grabberVisibleAtom), - sheetCornerRadius: get(cornerRadiusAtom), - sheetExpandsWhenScrolledToEdge: get(expandsWhenScrolledToEdgeAtom), -})); +const sheetOptionsAtom = jotai.atom( + get => ({ + sheetAllowedDetents: get(allowedDetentsAtom), + sheetLargestUndimmedDetent: get(largestUndimmedDetentAtom), + sheetGrabberVisible: get(grabberVisibleAtom), + sheetCornerRadius: get(cornerRadiusAtom), + sheetExpandsWhenScrolledToEdge: get(expandsWhenScrolledToEdgeAtom), + sheetCustomDetents: get(customDetentsAtom), + }), + (_get, set, value: SheetOptions) => { + set(allowedDetentsAtom, value.sheetAllowedDetents); + set(largestUndimmedDetentAtom, value.sheetLargestUndimmedDetent); + set(grabberVisibleAtom, value.sheetGrabberVisible); + set(cornerRadiusAtom, value.sheetCornerRadius); + set(expandsWhenScrolledToEdgeAtom, value.sheetExpandsWhenScrolledToEdge); + set(customDetentsAtom, value.sheetCustomDetents); + }, +); export default function App(): JSX.Element { const sheetOptions = jotai.useAtomValue(sheetOptionsAtom); @@ -139,6 +148,7 @@ function SheetScreen({ navigation }: NavProp) { const [cornerRadius, setCornerRadius] = jotai.useAtom(cornerRadiusAtom); const [expandsWhenScrolledToEdge, setExpandsWhenScrolledToEdge] = jotai.useAtom(expandsWhenScrolledToEdgeAtom); + // const [customDetents, setCustomDetents] = jotai.useAtom(customDetentsAtom); function nextDetentLevel(detent: SheetDetent): SheetDetent { if (Array.isArray(detent)) { @@ -147,8 +157,10 @@ function SheetScreen({ navigation }: NavProp) { return 'medium'; } else if (detent === 'medium') { return 'large'; - } else if (detent === 'large') { - return initialAllowedDetentsArray; + } else if (currDetent === 'large') { + return 'custom'; + } else if (currDetent === 'custom') { + return 'all'; } else { return 'all'; } @@ -189,6 +201,9 @@ function SheetScreen({ navigation }: NavProp) { onPress={() => { const newRadius = cornerRadius >= 150 ? -1.0 : cornerRadius + 50; setCornerRadius(newRadius); + // navigation.setOptions({ + // sheetCornerRadius: newRadius, + // }); }} /> radius: {cornerRadius} @@ -197,14 +212,20 @@ function SheetScreen({ navigation }: NavProp) { onPress={() => { const newDetentLevel = nextDetentLevel(allowedDetents); setAllowedDetents(newDetentLevel); + // navigation.setOptions({ + // sheetAllowedDetents: newDetentLevel, + // }); }} /> detent: {allowedDetents}