feat(iOS): support for custom detents with formSheet presentation

FabricTestExample/package.json

@@ -35,6 +35,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
+    "jotai": "^2.6.0",
     "jest": "^29.6.3",
     "prettier": "^2.8.8",
     "react-test-renderer": "18.2.0",

FabricTestExample/src/Test1649.tsx

@@ -1,23 +1,60 @@
 import * as React from 'react';
-import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
+import {
+  Button,
+  StyleSheet,
+  View,
+  Text,
+  ScrollView,
+  TextInput,
+} from 'react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   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<ParamListBase>;
+};
 
 const Stack = createNativeStackNavigator();
 
+const initialAllowedDetentsArray = [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+
+/// Sheet options
+// const allowedDetentsAtom = jotai.atom<SheetDetent>('all');
+// const largestUndimmedDetentAtom = jotai.atom<SheetDetentTypes | number>('all');
+
+const allowedDetentsAtom = jotai.atom<SheetDetent>(initialAllowedDetentsArray);
+const largestUndimmedDetentAtom = jotai.atom<SheetUndimmedDetent>(3);
+
+// const allowedDetentsAtom = jotai.atom<SheetDetent>([0.7]);
+// const largestUndimmedDetentAtom = jotai.atom<SheetDetentTypes | number>(0);
+
+const grabberVisibleAtom = jotai.atom(false);
+const cornerRadiusAtom = jotai.atom(-1);
+const expandsWhenScrolledToEdgeAtom = jotai.atom(false);
+
+const sheetOptionsAtom = jotai.atom(get => ({
+  sheetAllowedDetents: get(allowedDetentsAtom),
+  sheetLargestUndimmedDetent: get(largestUndimmedDetentAtom),
+  sheetGrabberVisible: get(grabberVisibleAtom),
+  sheetCornerRadius: get(cornerRadiusAtom),
+  sheetExpandsWhenScrolledToEdge: get(expandsWhenScrolledToEdgeAtom),
+}));
+
 export default function App(): JSX.Element {
+  const sheetOptions = jotai.useAtomValue(sheetOptionsAtom);
+
   const initialScreenOptions: NativeStackNavigationOptions = {
     stackPresentation: 'formSheet',
-    sheetAllowedDetents: 'all',
-    sheetLargestUndimmedDetent: 'medium',
-    sheetGrabberVisible: false,
-    sheetCornerRadius: -1,
-    sheetExpandsWhenScrolledToEdge: true,
+    ...sheetOptions,
   };
 
   return (
@@ -31,7 +68,7 @@ export default function App(): JSX.Element {
           headerShown: true,
           headerHideBackButton: false,
         }}>
-        <Stack.Screen name="First" component={First} />
+        <Stack.Screen name="Home" component={Home} />
         <Stack.Screen
           name="Second"
           component={Second}
@@ -53,16 +90,19 @@ export default function App(): JSX.Element {
             ...initialScreenOptions,
           }}
         />
+        <Stack.Screen
+          name="SheetScreenWithTextInput"
+          component={SheetScreenWithTextInput}
+          options={{
+            ...initialScreenOptions,
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<ParamListBase>;
-}) {
+function Home({ navigation }: NavProp) {
   return (
     <Button
       title="Tap me for the second screen"
@@ -71,11 +111,7 @@ function First({
   );
 }
 
-function Second({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<ParamListBase>;
-}) {
+function Second({ navigation }: NavProp) {
   return (
     <>
       <Button
@@ -86,41 +122,63 @@ function Second({
         title="Open the sheet with ScrollView"
         onPress={() => navigation.navigate('SheetScreenWithScrollView')}
       />
+      <Button
+        title="Open the sheet with text input (keyboard interaction)"
+        onPress={() => navigation.navigate('SheetScreenWithTextInput')}
+      />
     </>
   );
 }
 
-function SheetScreen({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<ParamListBase>;
-}) {
-  const [radius, setRadius] = React.useState(-1);
-  const [detent, setDetent] = React.useState<SheetDetentTypes>('all');
-  const [largestUndimmedDetent, sheetLargestUndimmedDetent] =
-    React.useState<SheetDetentTypes>('all');
-  const [isGrabberVisible, setIsGrabberVisible] = React.useState(false);
-  // navigation
-  const [shouldExpand, setShouldExpand] = React.useState(true);
-
-  function nextDetentLevel(currDetent: SheetDetentTypes): SheetDetentTypes {
-    if (currDetent === 'all') {
+function SheetScreen({ navigation }: NavProp) {
+  const [allowedDetents, setAllowedDetents] = jotai.useAtom(allowedDetentsAtom);
+  const [largestUndimmedDetent, setLargestUndimmedDetent] = jotai.useAtom(
+    largestUndimmedDetentAtom,
+  );
+  const [grabberVisible, setGrabberVisible] = jotai.useAtom(grabberVisibleAtom);
+  const [cornerRadius, setCornerRadius] = jotai.useAtom(cornerRadiusAtom);
+  const [expandsWhenScrolledToEdge, setExpandsWhenScrolledToEdge] =
+    jotai.useAtom(expandsWhenScrolledToEdgeAtom);
+
+  function nextDetentLevel(detent: SheetDetent): SheetDetent {
+    if (Array.isArray(detent)) {
+      return 'all';
+    } else if (detent === 'all') {
       return 'medium';
-    } else if (currDetent === 'medium') {
+    } else if (detent === 'medium') {
       return 'large';
-    } else if (currDetent === 'large') {
-      return 'all';
+    } else if (detent === 'large') {
+      return initialAllowedDetentsArray;
     } else {
-      console.warn('Unhandled sheetDetent type');
       return 'all';
     }
   }
 
+  function nextUndimmedDetentLevel(
+    detent: SheetUndimmedDetent,
+  ): SheetUndimmedDetent {
+    if (typeof detent === 'number') {
+      if (Array.isArray(allowedDetents) && detent + 1 < allowedDetents.length) {
+        return detent + 1;
+      } else {
+        return 'all';
+      }
+    } else if (detent === 'large') {
+      if (Array.isArray(allowedDetents)) {
+        return 0;
+      } else {
+        return 'all';
+      }
+    } else {
+      return nextDetentLevel(detent);
+    }
+  }
+
   return (
     <View style={styles.centeredView}>
       <Button
         title="Tap me for the first screen"
-        onPress={() => navigation.navigate('First')}
+        onPress={() => navigation.navigate('Home')}
       />
       <Button
         title="Tap me for the second screen"
@@ -129,66 +187,48 @@ function SheetScreen({
       <Button
         title="Change the corner radius"
         onPress={() => {
-          const newRadius = radius >= 150 ? -1.0 : radius + 50;
-          setRadius(newRadius);
-          navigation.setOptions({
-            sheetCornerRadius: newRadius,
-          });
+          const newRadius = cornerRadius >= 150 ? -1.0 : cornerRadius + 50;
+          setCornerRadius(newRadius);
         }}
       />
-      <Text>radius: {radius}</Text>
+      <Text>radius: {cornerRadius}</Text>
       <Button
         title="Change detent level"
         onPress={() => {
-          const newDetentLevel = nextDetentLevel(detent);
-          setDetent(newDetentLevel);
-          navigation.setOptions({
-            sheetAllowedDetents: newDetentLevel,
-          });
+          const newDetentLevel = nextDetentLevel(allowedDetents);
+          setAllowedDetents(newDetentLevel);
         }}
       />
-      <Text>detent: {detent}</Text>
+      <Text>detent: {allowedDetents}</Text>
       <Button
         title="Change largest undimmed detent"
         onPress={() => {
-          const newDetentLevel = nextDetentLevel(largestUndimmedDetent);
-          sheetLargestUndimmedDetent(newDetentLevel);
-          navigation.setOptions({
-            sheetLargestUndimmedDetent: newDetentLevel,
-          });
+          const newDetentLevel = nextUndimmedDetentLevel(largestUndimmedDetent);
+          setLargestUndimmedDetent(newDetentLevel);
         }}
       />
       <Text>largestUndimmedDetent: {largestUndimmedDetent}</Text>
       <Button
         title="Toggle sheetExpandsWhenScrolledToEdge"
         onPress={() => {
-          setShouldExpand(!shouldExpand);
-          navigation.setOptions({
-            sheetExpandsWhenScrolledToEdge: !shouldExpand,
-          });
+          setExpandsWhenScrolledToEdge(!expandsWhenScrolledToEdge);
         }}
       />
       <Text>
-        sheetExpandsWhenScrolledToEdge: {shouldExpand ? 'true' : 'false'}
+        sheetExpandsWhenScrolledToEdge:{' '}
+        {expandsWhenScrolledToEdge ? 'true' : 'false'}
       </Text>
       <Button
         title="Toggle grabber visibility"
         onPress={() => {
-          setIsGrabberVisible(!isGrabberVisible);
-          navigation.setOptions({
-            sheetGrabberVisible: !isGrabberVisible,
-          });
+          setGrabberVisible(!grabberVisible);
         }}
       />
     </View>
   );
 }
 
-function SheetScreenWithScrollView({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<ParamListBase>;
-}) {
+function SheetScreenWithScrollView({ navigation }: NavProp) {
   return (
     <>
       <View style={styles.centeredView}>
@@ -203,6 +243,21 @@ function SheetScreenWithScrollView({
   );
 }
 
+function SheetScreenWithTextInput({ navigation }: NavProp) {
+  const [textValue, setTextValue] = React.useState('text input');
+
+  return (
+    <View style={styles.centeredView}>
+      <TextInput
+        style={[styles.bordered, styles.keyboardTriggerTextInput]}
+        value={textValue}
+        onChangeText={text => setTextValue(text)}
+      />
+      <SheetScreen navigation={navigation} />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   headerView: {
     height: 20,
@@ -213,4 +268,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  bordered: {
+    borderColor: 'black',
+    borderWidth: 2,
+  },
+  keyboardTriggerTextInput: {
+    paddingVertical: 5,
+    paddingHorizontal: 4,
+    marginTop: 10,
+  },
 });

FabricTestExample/yarn.lock

@@ -4671,6 +4671,11 @@ joi@^17.2.1:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
+jotai@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.6.0.tgz#68b5d634f78a9ea55adfb8d92206ef59304b5dd5"
+  integrity sha512-Vt6hsc04Km4j03l+Ax+Sc+FVft5cRJhqgxt6GTz6GM2eM3DyX3CdBdzcG0z2FrlZToL1/0OAkqDghIyARWnSuQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

TestsExample/App.js

@@ -96,5 +96,5 @@ import Test1864 from './src/Test1864';
 enableFreeze(true);
 
 export default function App() {
-  return <Test42 />;
+  return <Test1649 />;
 }

TestsExample/package.json

@@ -38,6 +38,7 @@
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
+    "jotai": "^2.6.0",
     "prettier": "^2.8.8",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"