@fluentui-react-native/tester 0.126.16 → 0.126.18

package/lib-commonjs/fluent-tester/src/TestComponents/TextExperimental/V2Usage.win32.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"V2Usage.win32.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TextExperimental/V2Usage.win32.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAoC;AACpC,sDAAqD;AACrD,2CAA8C;AAC9C,oDAcqC;AAE9B,IAAM,OAAO,GAA4B;IAC9C,OAAO,CACL,oBAAC,mBAAI;QACH,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,eAAQ,mBAAoB;YAC7B,oBAAC,YAAK,gBAAc;YACpB,oBAAC,kBAAW,sBAA0B;YACtC,oBAAC,YAAK,gBAAc;YACpB,oBAAC,kBAAW,sBAA0B;YACtC,oBAAC,gBAAS,oBAAsB;YAChC,oBAAC,sBAAe,0BAAkC;YAClD,oBAAC,gBAAS,oBAAsB;YAChC,oBAAC,sBAAe,0BAAkC;YAClD,oBAAC,aAAM,iBAAgB;YACvB,oBAAC,mBAAY,uBAA4B;YACzC,oBAAC,iBAAU,qBAAwB;YACnC,oBAAC,cAAO,kBAAkB,CACpB,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,OAAO,WAoBlB"}

package/lib-commonjs/fluent-tester/src/TestComponents/TextExperimental/index.d.ts

@@ -1,2 +0,0 @@
-export * from './TextExperimentalTest';
-//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/fluent-tester/src/TestComponents/TextExperimental/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/TestComponents/TextExperimental/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib-commonjs/fluent-tester/src/TestComponents/TextExperimental/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./TextExperimentalTest"), exports);
-//# sourceMappingURL=index.js.map

package/lib-commonjs/fluent-tester/src/TestComponents/TextExperimental/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/TestComponents/TextExperimental/index.ts"],"names":[],"mappings":";;;AAAA,sEAAuC"}

package/src/TestComponents/Checkbox/CheckboxE2ETest.tsx

@@ -1,51 +0,0 @@
-import { Checkbox, Text } from '@fluentui/react-native';
-import * as React from 'react';
-import { View } from 'react-native';
-import { stackStyle } from '../Common/styles';
-import {
-  CHECKBOX_TEST_COMPONENT,
-  CHECKBOX_ON_PRESS,
-  CHECKBOX_NO_A11Y_LABEL_COMPONENT,
-  CHECKBOX_TEST_COMPONENT_LABEL,
-  CHECKBOX_ACCESSIBILITY_LABEL,
-} from '../../../../E2E/src/Checkbox/consts';
-import { Stack } from '@fluentui-react-native/stack';
-import { testProps } from '../Common/TestProps';
-
-export const E2ECheckboxTest: React.FunctionComponent = () => {
-  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
-
-  const onClick = React.useCallback(
-    (checked) => {
-      setCheckboxPressed(checked);
-    },
-    [setCheckboxPressed],
-  );
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Checkbox
-          accessibilityLabel={CHECKBOX_ACCESSIBILITY_LABEL}
-          disabled={false}
-          label="Testing accessibilityLabel"
-          onChange={onClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOX_TEST_COMPONENT)}
-        />
-        <Checkbox
-          label={CHECKBOX_TEST_COMPONENT_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(CHECKBOX_NO_A11Y_LABEL_COMPONENT)}
-        />
-        {checkboxPressed ? (
-          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(CHECKBOX_ON_PRESS)}
-          >
-            Checkbox Selected
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/Checkbox/CheckboxTest.tsx

@@ -1,188 +0,0 @@
-import { Checkbox } from '@fluentui/react-native';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
-import * as React from 'react';
-import { View, TextInput } from 'react-native';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/Checkbox/consts';
-import { E2ECheckboxTest } from './CheckboxE2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-function onChangeUncontrolled(isChecked: boolean) {
-  console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
-  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={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
-  const onChangeControlled1 = React.useCallback((checked) => {
-    setCheckedControlled1(checked);
-  }, []);
-
-  const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
-  const onChangeControlled2 = React.useCallback((checked) => {
-    setCheckedControlled2(checked);
-  }, []);
-
-  return (
-    <View>
-      <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
-      <Checkbox
-        label="Checkbox rendered with boxSide 'end' (controlled)"
-        onChange={onChangeControlled2}
-        boxSide="end"
-        checked={isCheckedControlled2}
-      />
-    </View>
-  );
-};
-
-const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-const CircleColorCheckbox = Checkbox.customize({
-  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'green',
-        checkboxBorderColor: 'green',
-        checkmarkColor: 'white',
-      },
-    },
-    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'black',
-        checkmarkColor: 'white',
-      },
-    },
-    hovered: {
-      tokens: {
-        checkmarkVisibility: 1,
-      },
-    },
-  },
-});
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
-  const [checkboxColor, setCheckboxColor] = React.useState('blue');
-  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
-  const BlueCheckbox = Checkbox.customize({
-    tokens: { checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: checkboxColor,
-          checkboxBorderColor: checkboxColor,
-          checkmarkColor: checkmarkColor,
-        },
-      },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle = getThemedStyles(theme);
-
-  return (
-    <View>
-      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" onChange={onChangeUncontrolled} defaultChecked={true} />
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        boxSide="end"
-        defaultChecked={false}
-      />
-
-      <TextInput
-        accessibilityLabel="Background color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Background color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckboxColor(e.nativeEvent.text);
-        }}
-      />
-
-      <TextInput
-        accessibilityLabel="Checkmark color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Checkmark color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckmarkColor(e.nativeEvent.text);
-        }}
-      />
-    </View>
-  );
-};
-
-const checkboxSections: TestSection[] = [
-  {
-    name: 'Basic Checkboxes',
-    testID: CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
-  },
-  {
-    name: 'Other Implementations',
-    component: OtherCheckbox,
-  },
-  {
-    name: 'Token Customized Checkboxes',
-    component: TokenCheckbox,
-  },
-  {
-    name: 'Checkbox for E2E Testing',
-    component: E2ECheckboxTest,
-  },
-];
-
-export const CheckboxTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'N/A',
-    macosStatus: 'Deprecated',
-    androidStatus: 'N/A',
-  };
-
-  const description =
-    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
-
-  return <Test name="Checkbox Test" description={description} spec={spec} sections={checkboxSections} status={status} />;
-};

package/src/TestComponents/Checkbox/index.ts

@@ -1 +0,0 @@
-export * from './CheckboxTest';

package/src/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -1,226 +0,0 @@
-import * as React from 'react';
-import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxExperimental/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, Platform } from 'react-native';
-import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
-import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-
-function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
-  console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
-  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 DesktopSpecificCheckbox: React.FunctionComponent = () => {
-  return (
-    <>
-      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" shape="circular" />
-      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
-      <Checkbox label="A required checkbox" required />
-    </>
-  );
-};
-
-const SizeCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox tooltip="Medium checkbox" size="medium" />
-      <Checkbox tooltip="Large checkbox" size="large" />
-      <Checkbox label="Medium checkbox" size="medium" />
-      <Checkbox label="Large checkbox" size="large" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isChecked, setisChecked] = React.useState(false);
-
-  const setCheckedTrue = React.useCallback(() => {
-    setisChecked(true);
-  }, []);
-
-  const setCheckedFalse = React.useCallback(() => {
-    setisChecked(false);
-  }, []);
-
-  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
-
-  return (
-    <View style={memoizedStyles}>
-      <Button onClick={setCheckedTrue} size="small">
-        Check controlled checkboxes below
-      </Button>
-      <Button onClick={setCheckedFalse} size="small">
-        Uncheck controlled checkboxes below
-      </Button>
-
-      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
-      {Platform.OS !== 'android' && (
-        <>
-          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
-          <Checkbox label="A required checkbox with other required text" required="**" />
-        </>
-      )}
-    </View>
-  );
-};
-
-const CircleColorCheckbox = Checkbox.customize({
-  checked: {
-    checkboxBackgroundColor: 'green',
-    checkboxBorderColor: 'green',
-    checkmarkColor: 'white',
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  hovered: {
-    checkmarkOpacity: 1,
-  },
-});
-
-const BigLabelCheckbox = Checkbox.customize({
-  label: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-});
-
-const ComposedCheckbox = Checkbox.compose({
-  slotProps: {
-    label: { style: { color: 'hotpink' } },
-  },
-});
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
-  const [checkboxColor, setCheckboxColor] = React.useState('blue');
-  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
-  const BlueCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: checkboxColor,
-      checkboxBorderColor: checkboxColor,
-      checkmarkColor: checkmarkColor,
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle = getThemedStyles(theme);
-
-  return (
-    <View>
-      {Platform.OS !== 'android' && (
-        <>
-          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
-          <CircleColorCheckbox
-            label="A circular token-customized checkbox"
-            shape="circular"
-            onChange={onChangeUncontrolled}
-            defaultChecked
-          />
-        </>
-      )}
-
-      <BigLabelCheckbox label="A checkbox with a bold large font label" />
-      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
-
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        labelPosition="before"
-        defaultChecked={false}
-      />
-      <TextInput
-        accessibilityLabel="Background color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Background color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckboxColor(e.nativeEvent.text);
-        }}
-      />
-
-      <TextInput
-        accessibilityLabel="Checkmark color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Checkmark color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckmarkColor(e.nativeEvent.text);
-        }}
-      />
-    </View>
-  );
-};
-
-const checkboxSections: TestSection[] = [
-  {
-    name: 'Basic Checkboxes',
-    testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Size Checkboxes',
-      component: SizeCheckbox,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Desktop Specific Checkboxes',
-      component: DesktopSpecificCheckbox,
-    },
-  }),
-  {
-    name: 'Other Implementations',
-    component: OtherCheckbox,
-  },
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Token Customized Checkboxes',
-      component: TokenCheckbox,
-    },
-  }),
-  {
-    name: 'E2E Testing for Experimental Checkbox',
-    component: E2ECheckboxExperimentalTest,
-  },
-];
-
-export const ExperimentalCheckboxTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'N/A',
-    iosStatus: 'N/A',
-    macosStatus: 'Experimental',
-    androidStatus: 'Experimental',
-  };
-
-  const description =
-    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
-
-  return <Test name="Experimental Checkbox Test" description={description} sections={checkboxSections} status={status} />;
-};

package/src/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -1,53 +0,0 @@
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import * as React from 'react';
-import { View } from 'react-native';
-import { stackStyle } from '../Common/styles';
-import {
-  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT,
-  EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
-  EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
-  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
-  EXPERIMENTAL_CHECKBOX_ON_PRESS,
-} from '../../../../E2E/src/CheckboxExperimental/consts';
-import { Stack } from '@fluentui-react-native/stack';
-import { Text } from '@fluentui/react-native';
-import { testProps } from '../Common/TestProps';
-
-export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
-  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
-
-  const onClick = React.useCallback(
-    (_e, checked) => {
-      setCheckboxPressed(checked);
-    },
-    [setCheckboxPressed],
-  );
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Checkbox
-          accessibilityLabel={EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL}
-          disabled={false}
-          label="Testing accessibilityLabel"
-          onChange={onClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(EXPERIMENTAL_CHECKBOX_TEST_COMPONENT)}
-        />
-        <Checkbox
-          label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT)}
-        />
-        {checkboxPressed ? (
-          <Text
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(EXPERIMENTAL_CHECKBOX_ON_PRESS)}
-          >
-            Checkbox Selected
-          </Text>
-        ) : null}
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/CheckboxExperimental/index.ts

@@ -1 +0,0 @@
-export * from './CheckboxTest';

package/src/TestComponents/Icon/IconE2ETest.tsx

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import * as React from 'react';
-import { View } from 'react-native';
-import { Text } from '@fluentui/react-native';
-import { Icon } from '@fluentui-react-native/icon';
-import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/Icon/consts';
-import { RasterImageIconProps } from '@fluentui-react-native/icon';
-import { testImage } from '../Common/iconExamples';
-
-export const E2ETestingIcon: React.FunctionComponent = () => {
-  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
-  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
-
-  const showRasterIcons = true;
-
-  return (
-    <View>
-      {showRasterIcons ? (
-        <View>
-          <Text>Raster icons</Text>
-          <Icon
-            rasterImageSource={rasterRainbowSpectrumProps}
-            width={100}
-            height={100}
-            color="green"
-            accessibilityLabel={ICON_ACCESSIBILITY_LABEL}
-          />
-          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
-        </View>
-      ) : null}
-    </View>
-  );
-};

package/src/TestComponents/Icon/IconExperimental.tsx

@@ -1,58 +0,0 @@
-import React, { useMemo } from 'react';
-import { FontIcon, SvgIcon, Icon } from '@fluentui-react-native/experimental-icon';
-import { Text, View } from 'react-native';
-import TestSvg from '../../../assets/test.svg';
-import { SvgIconProps } from '@fluentui-react-native/experimental-icon';
-
-const fontBuiltInProps = {
-  fontFamily: 'Arial',
-  codepoint: 0x2663,
-  fontSize: 100,
-  color: '#f09',
-};
-
-const svgUriProps: SvgIconProps = {
-  uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
-  viewBox: '0 0 1000 1000',
-  width: 100,
-  height: 100,
-};
-
-const svgSrcProps: SvgIconProps = {
-  viewBox: '0 0 500 500',
-  src: TestSvg,
-  width: 72,
-  height: 72,
-};
-
-export const IconExperimental: React.FunctionComponent = () => {
-  const svgSource = useMemo(
-    () => ({
-      color: 'lightgreen',
-      ...svgSrcProps,
-    }),
-    [],
-  );
-  const fontSource = useMemo(
-    () => ({
-      ...fontBuiltInProps,
-      color: 'lightskyblue',
-    }),
-    [],
-  );
-
-  return (
-    <View>
-      <Text>Icon component</Text>
-      <Icon svgSource={svgSource} />
-      <Icon svgSource={svgUriProps} />
-      <Icon fontSource={fontSource} />
-
-      <Text>SVG</Text>
-      <SvgIcon color="green" {...svgSrcProps} />
-
-      <Text>FontIcon</Text>
-      <FontIcon {...fontBuiltInProps} />
-    </View>
-  );
-};