fix(iOS): fix detents not changing if sheetInitialDetent > 0

FabricExample/e2e/issuesTests/Test2543.e2e.ts

@@ -0,0 +1,200 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS, selectTestScreen } from '../e2e-utils';
+
+async function testDetentsVisibility(
+  testCaseName: string,
+  firstVisible: boolean,
+  secondVisible: boolean,
+  thirdVisible: boolean,
+) {
+  const firstDetent = element(by.id(`${testCaseName}-text-first-detent`));
+  const secondDetent = element(by.id(`${testCaseName}-text-second-detent`));
+  const thirdDetent = element(by.id(`${testCaseName}-text-third-detent`));
+
+  if (firstVisible) {
+    await expect(firstDetent).toBeVisible();
+  } else {
+    await expect(firstDetent).not.toBeVisible();
+  }
+
+  if (secondVisible) {
+    await expect(secondDetent).toBeVisible();
+  } else {
+    await expect(secondDetent).not.toBeVisible();
+  }
+
+  if (thirdVisible) {
+    await expect(thirdDetent).toBeVisible();
+  } else {
+    await expect(thirdDetent).not.toBeVisible();
+  }
+}
+
+// issue related to iOS formSheet initial detent
+describeIfiOS('Test2543', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test2543 should exist', async () => {
+    await selectTestScreen('Test2543');
+  });
+
+  it('formSheet with 2 detents, initial first, should allow changing detents', async () => {
+    await testDetentsVisibility('TwoDetentsInitialFirst', false, false, false);
+
+    await element(by.id('home-button-open-TwoDetentsInitialFirst')).tap();
+    await testDetentsVisibility('TwoDetentsInitialFirst', true, false, false);
+
+    const header = element(by.id('TwoDetentsInitialFirst-text-header'));
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('TwoDetentsInitialFirst', true, true, false);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('TwoDetentsInitialFirst', true, false, false);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('TwoDetentsInitialFirst', false, false, false);
+  });
+
+  it('formSheet with 2 detents, initial second, should allow changing detents', async () => {
+    await testDetentsVisibility('TwoDetentsInitialSecond', false, false, false);
+
+    await element(by.id('home-button-open-TwoDetentsInitialSecond')).tap();
+    await testDetentsVisibility('TwoDetentsInitialSecond', true, true, false);
+
+    const header = element(by.id('TwoDetentsInitialSecond-text-header'));
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('TwoDetentsInitialSecond', true, false, false);
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('TwoDetentsInitialSecond', true, true, false);
+
+    await header.swipe('down', 'fast', 0.5);
+    await testDetentsVisibility('TwoDetentsInitialSecond', false, false, false);
+  });
+
+  it('formSheet with 3 detents, initial first, should allow changing detents', async () => {
+    await testDetentsVisibility(
+      'ThreeDetentsInitialFirst',
+      false,
+      false,
+      false,
+    );
+
+    await element(by.id('home-button-open-ThreeDetentsInitialFirst')).tap();
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, false, false);
+
+    const header = element(by.id('ThreeDetentsInitialFirst-text-header'));
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, true, false);
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, true, true);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, true, false);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, false, false);
+
+    await header.swipe('up', 'fast', 0.5);
+    await testDetentsVisibility('ThreeDetentsInitialFirst', true, true, true);
+
+    await header.swipe('down', 'fast', 0.5);
+    await testDetentsVisibility(
+      'ThreeDetentsInitialFirst',
+      false,
+      false,
+      false,
+    );
+  });
+
+  it('formSheet with 3 detents, initial second, should allow changing detents', async () => {
+    await testDetentsVisibility(
+      'ThreeDetentsInitialSecond',
+      false,
+      false,
+      false,
+    );
+
+    await element(by.id('home-button-open-ThreeDetentsInitialSecond')).tap();
+    await testDetentsVisibility('ThreeDetentsInitialSecond', true, true, false);
+
+    const header = element(by.id('ThreeDetentsInitialSecond-text-header'));
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility(
+      'ThreeDetentsInitialSecond',
+      true,
+      false,
+      false,
+    );
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialSecond', true, true, false);
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialSecond', true, true, true);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialSecond', true, true, false);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility(
+      'ThreeDetentsInitialSecond',
+      true,
+      false,
+      false,
+    );
+
+    await header.swipe('up', 'fast', 0.5);
+    await testDetentsVisibility('ThreeDetentsInitialSecond', true, true, true);
+
+    await header.swipe('down', 'fast', 0.5);
+    await testDetentsVisibility(
+      'ThreeDetentsInitialSecond',
+      false,
+      false,
+      false,
+    );
+  });
+
+  it('formSheet with 3 detents, initial third, should allow changing detents', async () => {
+    await testDetentsVisibility(
+      'ThreeDetentsInitialThird',
+      false,
+      false,
+      false,
+    );
+
+    await element(by.id('home-button-open-ThreeDetentsInitialThird')).tap();
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, true, true);
+
+    const header = element(by.id('ThreeDetentsInitialThird-text-header'));
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, true, false);
+
+    await header.swipe('down', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, false, false);
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, true, false);
+
+    await header.swipe('up', 'fast', 0.25);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, true, true);
+
+    await header.swipe('down', 'fast', 0.4);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, false, false);
+
+    await header.swipe('up', 'fast', 0.5);
+    await testDetentsVisibility('ThreeDetentsInitialThird', true, true, true);
+
+    await header.swipe('down', 'fast', 0.75);
+    await testDetentsVisibility(
+      'ThreeDetentsInitialThird',
+      false,
+      false,
+      false,
+    );
+  });
+});

apps/src/tests/Test2543.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import {
+  NavigationContainer,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
+import {
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
+import { Button, Text, View } from 'react-native';
+import Colors from '../shared/styling/Colors';
+
+const FORM_SHEET_CONFIGURATIONS: Record<string, NativeStackNavigationOptions> =
+  {
+    TwoDetentsInitialFirst: {
+      sheetAllowedDetents: [0.3, 0.55],
+    },
+    TwoDetentsInitialSecond: {
+      sheetAllowedDetents: [0.3, 0.55],
+      sheetInitialDetentIndex: 1,
+    },
+    ThreeDetentsInitialFirst: {
+      sheetAllowedDetents: [0.3, 0.55, 0.8],
+    },
+    ThreeDetentsInitialSecond: {
+      sheetAllowedDetents: [0.3, 0.55, 0.8],
+      sheetInitialDetentIndex: 1,
+    },
+    ThreeDetentsInitialThird: {
+      sheetAllowedDetents: [0.3, 0.55, 0.8],
+      sheetInitialDetentIndex: 2,
+    },
+  };
+
+type StackRouteParamList = {
+  Home: undefined;
+} & {
+  [P in keyof typeof FORM_SHEET_CONFIGURATIONS]: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+  route: RouteProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<StackRouteParamList>;
+
+const Stack = createNativeStackNavigator<StackRouteParamList>();
+
+function Home({ navigation }: StackNavigationProp) {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.GreenLight40,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 15,
+      }}>
+      {Object.keys(FORM_SHEET_CONFIGURATIONS).map(key => (
+        <Button
+          title={key}
+          key={key}
+          onPress={() => navigation.navigate(key)}
+          testID={`home-button-open-${key}`}
+        />
+      ))}
+    </View>
+  );
+}
+
+function FormSheet({ route }: StackNavigationProp) {
+  return (
+    <View style={{ paddingTop: 20 }}>
+      <Text
+        style={{
+          fontSize: 24,
+          fontWeight: 'bold',
+          marginBottom: 16,
+          textAlign: 'center',
+        }}
+        testID={`${route.name}-text-header`}>
+        {route.name}
+      </Text>
+      <Text style={{ textAlign: 'center', marginBottom: 16 }}>
+        You should be able to easily switch between detents.
+      </Text>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 180,
+        }}>
+        <Text testID={`${route.name}-text-first-detent`}>
+          This should be visible on first detent.
+        </Text>
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 180,
+          backgroundColor: Colors.PurpleLight40,
+        }}>
+        <Text testID={`${route.name}-text-second-detent`}>
+          This should be visible on second detent.
+        </Text>
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 200,
+          backgroundColor: Colors.NavyLight40,
+        }}>
+        <Text testID={`${route.name}-text-third-detent`}>
+          This should be visible on third detent.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}>
+        <Stack.Screen name="Home" component={Home} />
+        {Object.keys(FORM_SHEET_CONFIGURATIONS).map(key => (
+          <Stack.Screen
+            name={key}
+            key={key}
+            component={FormSheet}
+            options={{
+              presentation: 'formSheet',
+              sheetGrabberVisible: true,
+              ...FORM_SHEET_CONFIGURATIONS[key],
+            }}
+          />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -119,6 +119,7 @@ export { default as Test2379 } from './Test2379';
 export { default as Test2395 } from './Test2395';
 export { default as Test2466 } from './Test2466';
 export { default as Test2538 } from './Test2538';
+export { default as Test2543 } from './Test2543'; // [E2E created](iOS): issue related to iOS formSheet initial detent
 export { default as Test2552 } from './Test2552';
 export { default as Test2611 } from './Test2611';
 export { default as Test2631 } from './Test2631';