@fluentui-react-native/tester 0.107.1 → 0.108.0

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -4,8 +4,7 @@ import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-nati
 import { View, Text, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import TestSvg from '../../FluentTester/test-data/test.svg';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import { svgProps } from '../Common/iconExamples';
 import { StyledPicker } from '../Common/StyledPicker';
 import { ToggleButton } from '@fluentui/react-native';
 
@@ -40,11 +39,6 @@ export const StandardUsage: FunctionComponent = () => {
     codepoint: 0x2663,
   };
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const badgeStatus = presence === undefinedText ? undefined : presence;
 

package/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -4,8 +4,7 @@ import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { FontWeight } from '@fluentui-react-native/theme-types';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../../FluentTester/test-data/test.svg';
+import { svgProps } from '../Common/iconExamples';
 import { ToggleButton } from '@fluentui/react-native';
 
 const styles = StyleSheet.create({
@@ -67,10 +66,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   ]);
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   return (
     <View style={commonStyles.root}>

package/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -15,12 +15,11 @@ import {
   BadgeProps,
   BadgeTokens,
 } from '@fluentui-react-native/badge';
-import { SvgIconProps } from '@fluentui-react-native/icon';
 import { StyledPicker } from '../Common/StyledPicker';
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
-import TestSvg from '../../FluentTester/test-data/test.svg';
 import { ToggleButton } from '@fluentui/react-native';
 import { useFluentTheme } from '@fluentui-react-native/framework';
+import { svgProps, iconProps } from '../Common/iconExamples';
 
 const badgeColors: BadgeColor[] = [...BadgeColors];
 const badgeShapes: BadgeShape[] = [...BadgeShapes];
@@ -50,10 +49,6 @@ export const BasicBadge: React.FunctionComponent = () => {
   const onShowIconChange = useCallback(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
 
   const theme = useFluentTheme();
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   const fontBuiltInProps = {
     fontFamily: 'Arial',
@@ -62,7 +57,6 @@ export const BasicBadge: React.FunctionComponent = () => {
   };
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 
   const shadow = showShadow ? theme.shadows.shadow4 : undefined;
   const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
@@ -126,12 +120,12 @@ export const BasicBadge: React.FunctionComponent = () => {
       {svgIconsEnabled && (
         <>
           <Text>Badge with icon</Text>
-          <Badge icon={{ svgSource: svgProps }} iconPosition="after">
+          <Badge icon={iconProps} iconPosition="after">
             Badge with
             <Image source={{ uri: satyaPhotoUrl }} style={{ width: 20, height: 20 }} />
             <Text style={{ backgroundColor: 'yellow' }}>optional content</Text>
           </Badge>
-          <Badge appearance="outline" icon={iconProps} />
+          <Badge appearance="outline" icon={{ ...iconProps, width: 20, height: 20 }} />
           <Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }}>Badge with icon</Badge>
           <Text>Customized Badge with icon</Text>
           <StyledBadge icon={{ svgSource: svgProps }}>Styled badge</StyledBadge>

package/src/TestComponents/Badge/CounterBadgeTest.tsx

@@ -2,15 +2,9 @@
 import React from 'react';
 import { View, Platform, Text } from 'react-native';
 import { CounterBadge } from '@fluentui-react-native/badge';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../../FluentTester/test-data/test.svg';
+import { iconProps } from '../Common/iconExamples';
 
 export const CounterBadgeTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   return (
@@ -26,7 +20,7 @@ export const CounterBadgeTest: React.FunctionComponent = () => {
       <CounterBadge badgeColor="important" overflowCount={1000} count={777}></CounterBadge>
       <CounterBadge badgeColor="danger" overflowCount={1000} count={1500}></CounterBadge>
       <CounterBadge count={13} />
-      {svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}
+      {svgIconsEnabled && <CounterBadge count={17} icon={iconProps} iconPosition="after" />}
     </View>
   );
 };

package/src/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -1,19 +1,18 @@
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import { TextV1 as Text } from '@fluentui-react-native/text';
-import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
-import { Platform, Pressable, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
-import TestSvg from './test.svg';
 import { InteractionEvent, isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
+import { svgProps } from '../Common/iconExamples';
 
 const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
 const CustomButton = Button.customize({ backgroundColor: 'pink' });
 const CustomIconButton = Button.customize({ iconColor: 'yellow' });
 const ComposedButton = Button.compose({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Not all slots have to be overridden for compose to work
   slots: {
-    root: Pressable,
-    icon: Icon,
     content: CustomText,
   },
   slotProps: {
@@ -22,10 +21,6 @@ const ComposedButton = Button.compose({
     },
   },
 });
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
 
 export const ButtonHOCTest: React.FunctionComponent = () => {
   const buttonRef = React.useRef(null);

package/src/TestComponents/Button/ButtonIconTestSection.android.tsx

@@ -0,0 +1,30 @@
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { svgProps } from '../Common/iconExamples';
+
+export const ButtonIconTest: React.FunctionComponent = () => {
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 24,
+  };
+
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  const testImage = require('../../../../assets/icon_24x24.png');
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="accent" icon={{ svgSource: svgProps, color: 'black' }} style={commonTestStyles.vmargin}>
+        SVG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonIconTestSection.tsx

@@ -2,8 +2,7 @@ import { ButtonV1 as Button } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
+import { testImage, svgProps, iconProps } from '../Common/iconExamples';
 import { SvgXml } from 'react-native-svg';
 
 const styles = StyleSheet.create({
@@ -17,13 +16,6 @@ export const ButtonIconTest: React.FunctionComponent = () => {
     fontSize: 24,
   };
 
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../../assets/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   const chevronXml = `
@@ -54,7 +46,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
           <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
             SVG
           </Button>
-          <Button icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button icon={iconProps} style={commonTestStyles.vmargin}>
             SVG
           </Button>
         </>
@@ -66,7 +58,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
         PNG
       </Button>
       {svgIconsEnabled && (
-        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
+        <Button style={commonTestStyles.vmargin} icon={iconProps}>
           Icon Button and Chevron
           <View style={styles.chevron}>
             <SvgXml xml={chevronXml} />

package/src/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -1,16 +1,12 @@
-import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import TestSvg from './test.svg';
+import { iconProps } from '../Common/iconExamples';
 
 export const ButtonSizeTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
   return (
     <View style={testContentRootViewStyle}>
       {svgIconsEnabled && (
@@ -18,7 +14,7 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
           <Button
             iconOnly
             size="small"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Small size button with accessibility icon"
             style={commonTestStyles.vmargin}
             tooltip="button tooltip"
@@ -26,26 +22,32 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
           <Button
             iconOnly
             size="medium"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Medium size button with accessibility icon"
             style={commonTestStyles.vmargin}
           />
           <Button
             iconOnly
             size="large"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Large size button with accessibility icon"
             style={commonTestStyles.vmargin}
           />
-          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="small" icon={iconProps} style={commonTestStyles.vmargin}>
             Small Button with icon
           </Button>
-          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="medium" icon={iconProps} style={commonTestStyles.vmargin}>
             Medium Button with icon
           </Button>
-          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="large" icon={iconProps} style={commonTestStyles.vmargin}>
             Large Button with icon
           </Button>
+          <FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small FAB
+          </FAB>
+          <FAB size="large" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large FAB
+          </FAB>
         </>
       )}
       <Button size="small" style={commonTestStyles.vmargin}>
@@ -57,35 +59,39 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
       <Button size="large" style={commonTestStyles.vmargin}>
         Large
       </Button>
-      <Button loading size="small" style={commonTestStyles.vmargin}>
-        Loading Button Small
-      </Button>
-      <Button loading size="medium" style={commonTestStyles.vmargin}>
-        Loading Button Medium
-      </Button>
-      <Button loading size="large" style={commonTestStyles.vmargin}>
-        Loading Button Large
-      </Button>
-      <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      {svgIconsEnabled && (
+      {Platform.OS !== 'android' && (
         <>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
-            Content
+          <Button loading size="small" style={commonTestStyles.vmargin}>
+            Loading Button Small
+          </Button>
+          <Button loading size="medium" style={commonTestStyles.vmargin}>
+            Loading Button Medium
+          </Button>
+          <Button loading size="large" style={commonTestStyles.vmargin}>
+            Loading Button Large
+          </Button>
+          <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
+          {svgIconsEnabled && (
+            <>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+            </>
+          )}
         </>
       )}
     </View>

package/src/TestComponents/Button/ButtonTest.tsx

@@ -19,20 +19,22 @@ const buttonSections: TestSection[] = [
     testID: BUTTON_TESTPAGE,
     component: ButtonVariantTest,
   },
-  {
-    name: 'Button Shape',
-    component: ButtonShapeTest,
-  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
   },
-  Platform.select({
-    android: null, //Toggle Button is not implemented for Android
-    default: {
-      name: 'Toggle Button',
-      component: ToggleButtonTest,
-    },
+  ...Platform.select({
+    android: [null], //Following sections are not supported from Fluent Android
+    default: [
+      {
+        name: 'Toggle Button',
+        component: ToggleButtonTest,
+      },
+      {
+        name: 'Button Shape',
+        component: ButtonShapeTest,
+      },
+    ],
   }),
   {
     name: 'Sizes',
@@ -66,7 +68,7 @@ export const ButtonTest: React.FunctionComponent = () => {
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

package/src/TestComponents/Button/ButtonVariantTestSection.android.tsx

@@ -0,0 +1,45 @@
+import { Button, FAB } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { iconProps } from '../Common/iconExamples';
+
+export const ButtonVariantTest: React.FunctionComponent = () => {
+  const [showFABText, setShowFABText] = React.useState(true);
+  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Default Disabled
+      </Button>
+      <Button appearance="accent" style={commonTestStyles.vmargin}>
+        Accent
+      </Button>
+      <Button disabled appearance="accent" style={commonTestStyles.vmargin}>
+        Accent Disabled
+      </Button>
+      <Button appearance="outline" style={commonTestStyles.vmargin}>
+        Outline
+      </Button>
+      <Button appearance="outline" disabled style={commonTestStyles.vmargin}>
+        Outline Disabled
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
+      <FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
+      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
+      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonVariantTestSection.tsx

@@ -1,21 +1,10 @@
-import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
 import { View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
 
 // Test also pulls button from deprecated package to ensure it's still working
 export const ButtonVariantTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
-
-  const [showFABText, setShowFABText] = React.useState(true);
-  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
-
   return (
     <View style={testContentRootViewStyle}>
       <Button style={commonTestStyles.vmargin}>Default</Button>
@@ -50,10 +39,6 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
       <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
         Subtle
       </CompoundButton>
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} />
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
-        FAB
-      </FAB>
     </View>
   );
 };

package/src/TestComponents/Button/deprecated/ButtonIconTest.tsx

@@ -4,8 +4,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { stackStyle } from '../../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../test.svg';
+import { testImage, svgProps } from '../../Common/iconExamples';
 
 const CustomizedIconButton = Button.customize({
   tokens: { iconColor: 'red' },
@@ -14,12 +13,6 @@ const CustomizedIconButton = Button.customize({
 
 export const ButtonIconTest_deprecated: React.FunctionComponent = () => {
   /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../../../assets/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   // SVG-based icons are not available on all platforms yet
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);

package/src/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -3,16 +3,29 @@ import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
 import { Theme, useTheme } from '@fluentui-react-native/theme-types';
-import { View, TextInput } from 'react-native';
+import { View, TextInput, Platform } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Text } from '@fluentui-react-native/text';
 
 function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
   console.log(isChecked);
 }
 
+const AndroidBasicCheckbox = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+    </View>
+  );
+};
+
 const BasicCheckbox: React.FunctionComponent = () => {
   return (
     <View>
@@ -147,15 +160,23 @@ const TokenCheckbox: React.FunctionComponent = () => {
   );
 };
 
+const UnSupportedOnAndroid = () => {
+  return (
+    <Text style={{ margin: 10, fontSize: 14 }} color="red">
+      Unsupported on Android
+    </Text>
+  );
+};
+
 const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
+    component: Platform.OS === 'android' ? AndroidBasicCheckbox : BasicCheckbox,
   },
   {
     name: 'Size Checkboxes',
-    component: SizeCheckbox,
+    component: Platform.OS === 'android' ? UnSupportedOnAndroid : SizeCheckbox,
   },
   {
     name: 'Other Implementations',

package/src/TestComponents/Common/iconExamples.tsx

@@ -1,13 +1,15 @@
 import { Platform } from 'react-native';
-import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../Button/test.svg';
+import { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
+import TestSvg from '../../../assets/test.svg';
 
 export const svgProps: SvgIconProps = {
   src: TestSvg,
   viewBox: '0 0 500 500',
 };
 
-const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
+export const iconProps: IconProps = { svgSource: svgProps };
+
+export const testTtf = require('../../../assets/Font_Awesome_900.otf');
 
 export const fontProps: FontIconProps = Platform.select({
   macos: {
@@ -23,4 +25,4 @@ export const fontProps: FontIconProps = Platform.select({
   },
 });
 
-export const testImage = require('./../../../assets/icon_24x24.png');
+export const testImage = require('../../../assets/icon_24x24.png');