@fluentui-react-native/tester 0.58.0 → 0.58.3

package/src/FluentTester/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -7,7 +7,7 @@ import { focusZoneTestStyles, stackStyleFocusZone } from './styles';
 import { commonTestStyles } from '../Common/styles';
 import { Stack } from '@fluentui-react-native/stack';
 
-const directionalFocusZone: React.FunctionComponent = () => {
+const DirectionalFocusZone: React.FunctionComponent = () => {
   return (
     <View>
       <Button content="Outside FocusZone" />
@@ -55,7 +55,7 @@ const directionalFocusZone: React.FunctionComponent = () => {
   );
 };
 
-const commonUsageFocusZone: React.FunctionComponent = () => {
+const CommonUsageFocusZone: React.FunctionComponent = () => {
   return (
     <View>
       <Button content="Outside FocusZone" />
@@ -79,42 +79,44 @@ const commonUsageFocusZone: React.FunctionComponent = () => {
   );
 };
 
-const navigation2DFocusZone: React.FunctionComponent = () => {
+const Navigation2DFocusZone: React.FunctionComponent = () => {
   const buttonRefs = [];
-  const onClicks = [];
   const [defaultTabbableElementIndex, setDefaultTabbableElementIndex] = React.useState<number>(5);
+  const onClick = React.useCallback(
+    (i: number) => {
+      setDefaultTabbableElementIndex(i);
+    },
+    [setDefaultTabbableElementIndex],
+  );
 
   for (let i = 0; i <= 9; i++) {
-    buttonRefs.push(i == 0 ? undefined : React.useRef<View>(null));
-    onClicks.push(
-      React.useCallback(() => {
-        setDefaultTabbableElementIndex(i);
-      }, [setDefaultTabbableElementIndex]),
-    );
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ref = React.useRef<View>(null);
+    buttonRefs.push(i == 0 ? undefined : ref);
   }
 
   return (
     <View>
       <View>
         <Button content="Outside FocusZone" />
-        <Button content="Clear default tabble element" onClick={onClicks[0]} />
+        <Button content="Clear default tabble element" onClick={() => onClick(0)} />
       </View>
       <FocusZone use2DNavigation={true} defaultTabbableElement={buttonRefs[defaultTabbableElementIndex]} isCircularNavigation={true}>
         <View style={focusZoneTestStyles.focusZoneContainer}>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#1" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[1]} onClick={onClicks[1]} />
-            <Button content="#2" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[2]} onClick={onClicks[2]} />
-            <Button content="#3" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[3]} onClick={onClicks[3]} />
+            <Button content="#1" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[1]} onClick={() => onClick(1)} />
+            <Button content="#2" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[2]} onClick={() => onClick(2)} />
+            <Button content="#3" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[3]} onClick={() => onClick(3)} />
           </View>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#4" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[4]} onClick={onClicks[4]} />
-            <Button content="#5" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[5]} onClick={onClicks[5]} />
-            <Button content="#6" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[6]} onClick={onClicks[6]} />
+            <Button content="#4" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[4]} onClick={() => onClick(4)} />
+            <Button content="#5" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[5]} onClick={() => onClick(5)} />
+            <Button content="#6" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[6]} onClick={() => onClick(6)} />
           </View>
           <View style={focusZoneTestStyles.focusZoneViewStyle}>
-            <Button content="#7" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[7]} onClick={onClicks[7]} />
-            <Button content="#8" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[8]} onClick={onClicks[8]} />
-            <Button content="#9" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[9]} onClick={onClicks[9]} />
+            <Button content="#7" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[7]} onClick={() => onClick(7)} />
+            <Button content="#8" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[8]} onClick={() => onClick(8)} />
+            <Button content="#9" style={focusZoneTestStyles.focusZoneButton} componentRef={buttonRefs[9]} onClick={() => onClick(9)} />
           </View>
         </View>
       </FocusZone>
@@ -143,7 +145,7 @@ function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement {
 
 const focusZoneDirectionStrings = ['Bidirectional', 'Horizontal', 'Vertical', 'None'];
 
-const customizableFocusZone: React.FunctionComponent = () => {
+const CustomizableFocusZone: React.FunctionComponent = () => {
   const [is2DNav, set2dNav] = React.useState(false);
   const [isDisabled, setDisabled] = React.useState(false);
   const [isCircularNav, setIsCircularNav] = React.useState(false);
@@ -223,19 +225,19 @@ const focusZoneSections: TestSection[] = [
   {
     name: 'Directional FocusZone Usage',
     testID: FOCUSZONE_TESTPAGE,
-    component: directionalFocusZone,
+    component: DirectionalFocusZone,
   },
   {
     name: 'Common FocusZone Usage',
-    component: commonUsageFocusZone,
+    component: CommonUsageFocusZone,
   },
   {
     name: '2D Navigation with Default Tabbable Element (#5) FocusZone Usage',
-    component: navigation2DFocusZone,
+    component: Navigation2DFocusZone,
   },
   {
     name: 'Customizable FocusZone',
-    component: customizableFocusZone,
+    component: CustomizableFocusZone,
   },
 ];
 

package/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -11,7 +11,7 @@ const testImage = require('./../../../../assets/testicon.png');
 const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
 import TestSvg from './assets/test.svg';
 
-const icons: React.FunctionComponent = () => {
+const Icons: React.FunctionComponent = () => {
   const fontCustomFontProps: FontIconProps = {
     fontFamily: 'Font Awesome 5 Free',
     fontSrcFile: testTtf,
@@ -94,7 +94,7 @@ const iconSections: TestSection[] = [
   {
     name: 'Icon',
     testID: ICON_TESTPAGE,
-    component: icons,
+    component: Icons,
   },
   {
     name: 'Icon for E2E Testing',

package/src/FluentTester/TestComponents/Link/LinkTest.tsx

@@ -7,7 +7,7 @@ import { LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { LinkE2ETest } from './E2ELinkTest';
 
-const links: React.FunctionComponent = () => {
+const Links: React.FunctionComponent = () => {
   const doPress = (): void => {
     Alert.alert('Alert.', 'You have been alerted.');
   };
@@ -24,7 +24,7 @@ const linkSections: TestSection[] = [
   {
     name: 'Navigation and Alert',
     testID: LINK_TESTPAGE,
-    component: links,
+    component: Links,
   },
   {
     name: 'Link E2E Test',

package/src/FluentTester/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx

@@ -7,7 +7,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { Text } from '@fluentui/react-native';
 
-const nativeDatePicker: React.FunctionComponent = () => {
+const NativeDatePickerMainTest: React.FunctionComponent = () => {
   const [startDate, setStartDate] = React.useState<Date>(new Date());
   const [endDate, setEndDate] = React.useState<Date>(null);
 
@@ -109,7 +109,7 @@ const nativeDatePickerSections: TestSection[] = [
   {
     name: 'Native Date Picker',
     testID: NATIVEDATEPICKER_TESTPAGE,
-    component: nativeDatePicker,
+    component: NativeDatePickerMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -73,7 +73,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       iconStrokeWidth: iconStrokeWidth,
     };
     return PersonaCoin.customize({ tokens });
-  }, [coinColor, textColor, showRings, coinSize, iconSize, iconStrokeWidth]);
+  }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
 
   return (
     <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>

package/src/FluentTester/TestComponents/Pressable/PressableTest.tsx

@@ -92,7 +92,7 @@ const PressComponent: React.FunctionComponent<ViewProps> = (props: ViewProps) =>
   );
 };
 
-const pressable: React.FunctionComponent = () => {
+const PressableMainTest: React.FunctionComponent = () => {
   const [hoverProps, hoverState] = useHoverState({});
 
   return (
@@ -126,7 +126,7 @@ const pressableSections: TestSection[] = [
   {
     name: 'Pressable Components',
     testID: PRESSABLE_TESTPAGE,
-    component: pressable,
+    component: PressableMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupTest.tsx

@@ -5,7 +5,7 @@ import { RADIOGROUP_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ERadioGroupTest } from './RadioGroupE2ETest';
 
-const basicRadioGroup: React.FunctionComponent = () => {
+const BasicRadioGroup: React.FunctionComponent = () => {
   // Client's example onChange function
   const onChange = (key: string) => {
     console.log(key);
@@ -56,7 +56,7 @@ const radioGroupSections: TestSection[] = [
   {
     name: 'Basic RadioGroup Usage',
     testID: RADIOGROUP_TESTPAGE,
-    component: basicRadioGroup,
+    component: BasicRadioGroup,
   },
   {
     name: 'RadioGroup for E2E Testing',

package/src/FluentTester/TestComponents/Separator/SeparatorTest.tsx

@@ -9,7 +9,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 const BlueSeparator = Separator.customize({ color: 'blue' });
 const RedSeparator = Separator.customize({ color: 'red' });
 
-const separator: React.FunctionComponent = () => {
+const SeparatorMainTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle} gap={5}>
       <Stack gap={4} style={separatorStackStyle}>
@@ -31,7 +31,7 @@ const separatorSections: TestSection[] = [
   {
     name: 'Basic Button',
     testID: SEPARATOR_TESTPAGE,
-    component: separator,
+    component: SeparatorMainTest,
   },
 ];
 

package/src/FluentTester/TestComponents/Svg/SvgTest.tsx

@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const rect: React.FunctionComponent = () => {
+const RectTest: React.FunctionComponent = () => {
   const [useColorA, setUseColorA] = React.useState(false);
   const colorA = 'red';
   const colorB = 'green';
@@ -36,7 +36,7 @@ const rect: React.FunctionComponent = () => {
   );
 };
 
-const circle: React.FunctionComponent = () => {
+const CircleTest: React.FunctionComponent = () => {
   return (
     <Svg width="50" height="50">
       <Circle cx="25" cy="25" r="20" fill="red" stroke="black" />
@@ -44,7 +44,7 @@ const circle: React.FunctionComponent = () => {
   );
 };
 
-const line: React.FunctionComponent = () => {
+const LineTest: React.FunctionComponent = () => {
   return (
     <Svg width="50" height="50">
       <Line x1="10" y1="10" x2="20" y2="20" fill="red" stroke="black" />
@@ -52,7 +52,7 @@ const line: React.FunctionComponent = () => {
   );
 };
 
-const path: React.FunctionComponent = () => {
+const PathTest: React.FunctionComponent = () => {
   return (
     <Svg width="100" height="100">
       <Path d="M 0 0 A 10 10 0 0,1 0 100" fill="magenta" stroke="purple" id="path" />
@@ -60,7 +60,7 @@ const path: React.FunctionComponent = () => {
   );
 };
 
-const polygon: React.FunctionComponent = () => {
+const PolygonTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100">
       <Polygon points="40,5 70,80 25,95" fill="lime" stroke="purple" strokeWidth="1" />
@@ -68,7 +68,7 @@ const polygon: React.FunctionComponent = () => {
   );
 };
 
-const linearGradient: React.FunctionComponent = () => {
+const LinearGradientTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100" style={{ backgroundColor: 'black' }} viewBox="0 0 10 10" color="yellow">
       <Defs>
@@ -82,7 +82,7 @@ const linearGradient: React.FunctionComponent = () => {
   );
 };
 
-const radialGradient: React.FunctionComponent = () => {
+const RadialGradientTest: React.FunctionComponent = () => {
   return (
     <Svg height="100" width="100" style={{ backgroundColor: 'black' }} viewBox="0 0 10 10" color="yellow">
       <Defs>
@@ -96,7 +96,7 @@ const radialGradient: React.FunctionComponent = () => {
   );
 };
 
-const rectCircle: React.FunctionComponent = () => {
+const RectCircleTest: React.FunctionComponent = () => {
   return (
     <Svg height="200" width="200">
       <Defs>
@@ -113,11 +113,11 @@ const rectCircle: React.FunctionComponent = () => {
   );
 };
 
-const bundledSvg: React.FunctionComponent = () => {
+const BundledSvgTest: React.FunctionComponent = () => {
   return <TestSvg width={200} height={200} color="red" />;
 };
 
-const remoteSvg: React.FunctionComponent = () => {
+const RemoteSvgTest: React.FunctionComponent = () => {
   return (
     <View>
       <SvgCssUri
@@ -144,43 +144,43 @@ const svgSections: TestSection[] = [
   {
     name: 'Rect',
     testID: SVG_TESTPAGE,
-    component: rect,
+    component: RectTest,
   },
   {
     name: 'Circle',
-    component: circle,
+    component: CircleTest,
   },
   {
     name: 'Line',
-    component: line,
+    component: LineTest,
   },
   {
     name: 'Path',
-    component: path,
+    component: PathTest,
   },
   {
     name: 'Polygon',
-    component: polygon,
+    component: PolygonTest,
   },
   {
     name: 'Linear Gradient',
-    component: linearGradient,
+    component: LinearGradientTest,
   },
   {
     name: 'Radial Gradient',
-    component: radialGradient,
+    component: RadialGradientTest,
   },
   {
     name: 'Rect and Circle via Defs and Use',
-    component: rectCircle,
+    component: RectCircleTest,
   },
   {
     name: 'Bundled Svg',
-    component: bundledSvg,
+    component: BundledSvgTest,
   },
   {
     name: 'Remotely Retrieved Svgs',
-    component: remoteSvg,
+    component: RemoteSvgTest,
   },
 ];
 

package/src/FluentTester/TestComponents/Tabs/TabsTest.tsx

@@ -7,7 +7,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ETabsTest } from './TabsE2ETest';
 import TestSvg from './test.svg';
 
-const tabs: React.FunctionComponent = () => {
+const TabsMainTest: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -25,7 +25,7 @@ const tabs: React.FunctionComponent = () => {
   );
 };
 
-const disabledTabs: React.FunctionComponent = () => {
+const DisabledTabs: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -43,7 +43,7 @@ const disabledTabs: React.FunctionComponent = () => {
   );
 };
 
-const tabsCountIcon: React.FunctionComponent = () => {
+const TabsCountIcon: React.FunctionComponent = () => {
   const svgExample = {
     svgSource: {
       src: TestSvg,
@@ -70,7 +70,7 @@ const tabsCountIcon: React.FunctionComponent = () => {
   );
 };
 
-const onTabsClickEvent: React.FunctionComponent = () => {
+const TabsClickEventTest: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home_key');
 
   const onTabsClick = (key: string) => {
@@ -95,7 +95,7 @@ const onTabsClickEvent: React.FunctionComponent = () => {
   );
 };
 
-const tabsChangingViews: React.FunctionComponent = () => {
+const TabsChangingViews: React.FunctionComponent = () => {
   // If user wants to control what gets rendered example.
   const [selectedKey, setSelectedKey] = React.useState('Tabs #1');
 
@@ -117,7 +117,7 @@ const tabsChangingViews: React.FunctionComponent = () => {
   );
 };
 
-const tabsRenderSeparately: React.FunctionComponent = () => {
+const TabsRenderSeparately: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
 
   const onTabsClick = (key: string) => {
@@ -149,7 +149,7 @@ const tabsRenderSeparately: React.FunctionComponent = () => {
   );
 };
 
-const tabsSettingSelectedKey: React.FunctionComponent = () => {
+const TabsSettingSelectedKey: React.FunctionComponent = () => {
   // If user wants to programmatically set the tab's selectedKey with a button example.
   const [selectedKey, setSelectedKey] = React.useState('home');
   const [currTabItemIndex, setCurrTabItemIndex] = React.useState(0);
@@ -179,7 +179,7 @@ const tabsSettingSelectedKey: React.FunctionComponent = () => {
   );
 };
 
-const tabsShowHideItem: React.FunctionComponent = () => {
+const TabsShowHideItem: React.FunctionComponent = () => {
   const [showFirstItem, setshowFirstItem] = React.useState(true);
 
   const toggleShowFirstItem = React.useCallback(() => {
@@ -208,7 +208,7 @@ const tabsShowHideItem: React.FunctionComponent = () => {
   );
 };
 
-const tabsWithFlexibility: React.FunctionComponent = () => {
+const TabsWithFlexibility: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home');
 
   const goHomeTab = () => {
@@ -241,35 +241,35 @@ const tabsSections: TestSection[] = [
   {
     name: 'Default Tabs',
     testID: TABS_TESTPAGE,
-    component: tabs,
+    component: TabsMainTest,
   },
   {
     name: 'Tabs with disabled',
-    component: disabledTabs,
+    component: DisabledTabs,
   },
   {
     name: 'Trigger onTabsClick event',
-    component: onTabsClickEvent,
+    component: TabsClickEventTest,
   },
   {
     name: 'User Custom Render',
-    component: tabsChangingViews,
+    component: TabsChangingViews,
   },
   {
     name: 'Render Content Separately',
-    component: tabsRenderSeparately,
+    component: TabsRenderSeparately,
   },
   {
     name: 'Override Selected Key',
-    component: tabsSettingSelectedKey,
+    component: TabsSettingSelectedKey,
   },
   {
     name: 'Show/Hide Tabs item',
-    component: tabsShowHideItem,
+    component: TabsShowHideItem,
   },
   {
     name: 'More Flexibility',
-    component: tabsWithFlexibility,
+    component: TabsWithFlexibility,
   },
   {
     name: 'E2E Tabs Test',
@@ -280,7 +280,7 @@ const tabsSections: TestSection[] = [
 if (Platform.OS !== 'windows') {
   tabsSections.push({
     name: 'Count and Icon',
-    component: tabsCountIcon,
+    component: TabsCountIcon,
   });
 }
 

package/src/FluentTester/TestComponents/TabsExperimental/TabsTest.tsx

@@ -10,7 +10,7 @@ import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 import { E2ETestExperimentalTabs } from './TabsExperimentalE2ETest';
 
-const tabs: React.FunctionComponent = () => {
+const TabsMainTest: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -28,7 +28,7 @@ const tabs: React.FunctionComponent = () => {
   );
 };
 
-const disabledTabs: React.FunctionComponent = () => {
+const DisabledTabs: React.FunctionComponent = () => {
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">
@@ -46,7 +46,7 @@ const disabledTabs: React.FunctionComponent = () => {
   );
 };
 
-const tabsCountIcon: React.FunctionComponent = () => {
+const TabsCountIcon: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: TestSvg,
     viewBox: '0 0 500 500',
@@ -69,7 +69,7 @@ const tabsCountIcon: React.FunctionComponent = () => {
   );
 };
 
-const onTabsClickEvent: React.FunctionComponent = () => {
+const TabsClickEventTest: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home_key');
 
   const onTabsClick = React.useCallback(
@@ -97,7 +97,7 @@ const onTabsClickEvent: React.FunctionComponent = () => {
   );
 };
 
-const tabsChangingViews: React.FunctionComponent = () => {
+const TabsChangingViews: React.FunctionComponent = () => {
   // If User wants to control what gets rendered example
   const [selectedKey, setSelectedKey] = React.useState('home');
 
@@ -124,7 +124,7 @@ const tabsChangingViews: React.FunctionComponent = () => {
   );
 };
 
-const tabsRenderSeparately: React.FunctionComponent = () => {
+const TabsRenderSeparately: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('rectangleRed');
 
   const onTabsClick = React.useCallback(
@@ -159,7 +159,7 @@ const tabsRenderSeparately: React.FunctionComponent = () => {
   );
 };
 
-const tabsSettingSelectedKey: React.FunctionComponent = () => {
+const TabsSettingSelectedKey: React.FunctionComponent = () => {
   // If user wants to programmatically set the selectedKey to control the view
   const [selectedKey, setSelectedKey] = React.useState('home');
   const [currTabItemIndex, setCurrTabItemIndex] = React.useState(0);
@@ -189,7 +189,7 @@ const tabsSettingSelectedKey: React.FunctionComponent = () => {
   );
 };
 
-const tabsWithFlexibility: React.FunctionComponent = () => {
+const TabsWithFlexibility: React.FunctionComponent = () => {
   const [selectedKey, setSelectedKey] = React.useState('home');
 
   const goHomeTab = React.useCallback(() => {
@@ -225,31 +225,31 @@ const tabsSections: TestSection[] = [
   {
     name: 'Default Tabs',
     testID: EXPERIMENTAL_TABS_TESTPAGE,
-    component: tabs,
+    component: TabsMainTest,
   },
   {
     name: 'Tabs with disabled',
-    component: disabledTabs,
+    component: DisabledTabs,
   },
   {
     name: 'Trigger onTabsClick event',
-    component: onTabsClickEvent,
+    component: TabsClickEventTest,
   },
   {
     name: 'User Custom Render',
-    component: tabsChangingViews,
+    component: TabsChangingViews,
   },
   {
     name: 'Render Content Separately',
-    component: tabsRenderSeparately,
+    component: TabsRenderSeparately,
   },
   {
     name: 'Override Selected Key',
-    component: tabsSettingSelectedKey,
+    component: TabsSettingSelectedKey,
   },
   {
     name: 'More Flexibility',
-    component: tabsWithFlexibility,
+    component: TabsWithFlexibility,
   },
   {
     name: 'E2E Testing Experimental Tabs',
@@ -260,7 +260,7 @@ const tabsSections: TestSection[] = [
 if (Platform.OS !== 'windows') {
   tabsSections.push({
     name: 'Count and Icon',
-    component: tabsCountIcon,
+    component: TabsCountIcon,
   });
 }