diff --git a/apps/fluent-tester/src/FluentTesterApp.tsx b/apps/fluent-tester/src/FluentTesterApp.tsx index c6dd4a8266..5886aeb196 100644 --- a/apps/fluent-tester/src/FluentTesterApp.tsx +++ b/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 = (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 ( - + ); }; diff --git a/change/@fluentui-react-native-interactive-hooks-90e4632d-1fe0-4e7e-9e44-bb1b69eeac1f.json b/change/@fluentui-react-native-interactive-hooks-90e4632d-1fe0-4e7e-9e44-bb1b69eeac1f.json new file mode 100644 index 0000000000..91f6830cf0 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-native-tester-001f54f3-5460-413d-9c6c-1d51ddd915e0.json b/change/@fluentui-react-native-tester-001f54f3-5460-413d-9c6c-1d51ddd915e0.json new file mode 100644 index 0000000000..86db1efe30 --- /dev/null +++ b/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" +} diff --git a/packages/utils/interactive-hooks/src/index.ts b/packages/utils/interactive-hooks/src/index.ts index 0f9fa3ede9..91c36a0865 100644 --- a/packages/utils/interactive-hooks/src/index.ts +++ b/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'; diff --git a/packages/utils/interactive-hooks/src/useSizeClassIOS.ts b/packages/utils/interactive-hooks/src/useSizeClassIOS.ts new file mode 100644 index 0000000000..e4d6d3238c --- /dev/null +++ b/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; + } +};