Implement useSizeClassIOS hook

apps/fluent-tester/src/FluentTesterApp.tsx

@@ -6,13 +6,18 @@ import { Platform } from 'react-native';
 import { FluentTester, FluentTesterProps } from './FluentTester';
 import { tests } from './testPages';
 import { testerTheme } from './theme/index';
-
-const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+import { useSizeClassIOS } from '@fluentui-react-native/interactive-hooks';
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
+  const sizeClass = useSizeClassIOS();
+  const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+
+  // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
+  const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
+
   return (
     <ThemeProvider theme={testerTheme}>
-      <FluentTester enabledTests={tests} enableSinglePaneView={isMobile} {...props} />
+      <FluentTester enabledTests={tests} enableSinglePaneView={shouldShowSinglePane} {...props} />
     </ThemeProvider>
   );
 };

change/@fluentui-react-native-interactive-hooks-90e4632d-1fe0-4e7e-9e44-bb1b69eeac1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Implement useSizeClass hook",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-001f54f3-5460-413d-9c6c-1d51ddd915e0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Implement useSizeClass hook",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "sanajmi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/utils/interactive-hooks/src/index.ts

@@ -60,3 +60,5 @@ export { preferKeyDownForKeyEvents, useKeyCallback, useKeyDownProps, useKeyProps
 export type { KeyCallback, KeyPressProps } from './useKeyProps';
 export { useOnPressWithFocus } from './useOnPressWithFocus';
 export type { OnPressCallback, OnPressWithFocusCallback } from './useOnPressWithFocus';
+export type { SizeClassIOS } from './useSizeClassIOS';
+export { useSizeClassIOS } from './useSizeClassIOS';

packages/utils/interactive-hooks/src/useSizeClassIOS.ts

@@ -0,0 +1,23 @@
+import { Platform, useWindowDimensions } from 'react-native';
+
+export type SizeClassIOS = 'regular' | 'compact' | undefined;
+
+/**
+ * Hook that "guesses" our Size Class on iOS based on our window width
+ * For more information about Size Classes, see teh following:
+ * https://developer.apple.com/documentation/uikit/uitraitcollection
+ * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
+ * @returns SizeClassIOS: enum determining our size class
+ */
+export const useSizeClassIOS: () => SizeClassIOS = () => {
+  const width = useWindowDimensions().width;
+  if (Platform.OS === 'ios') {
+    if (width > 375) {
+      return 'regular';
+    } else {
+      return 'compact';
+    }
+  } else {
+    return undefined;
+  }
+};