@fluentui-react-native/tester 0.107.1 → 0.108.0

package/src/TestComponents/CornerRadius/CornerRadiusTest.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { View } from 'react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { Text } from '@fluentui/react-native';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+
+interface CornerRadiusTestComponentProps {
+  name: string;
+  cornerRadius: number;
+}
+
+const CornerRadiusTestComponent: React.FunctionComponent<CornerRadiusTestComponentProps> = (props: CornerRadiusTestComponentProps) => {
+  const theme = useFluentTheme();
+  const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
+
+  const outerBoxProps = React.useMemo(
+    () => ({
+      height: 60,
+      margin: 16,
+      backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
+      borderRadius: props.cornerRadius,
+    }),
+    [props.cornerRadius, isLightMode],
+  );
+
+  const innerCircleIndicatorProps = React.useMemo(
+    () => ({
+      height: Math.min(props.cornerRadius * 2, 60),
+      width: Math.min(props.cornerRadius * 2, 60),
+      borderRadius: props.cornerRadius,
+      backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
+    }),
+    [props.cornerRadius, isLightMode],
+  );
+
+  return (
+    <View>
+      <Text variant="bodySemibold">{props.name + ': ' + props.cornerRadius + 'px'}</Text>
+      <View style={outerBoxProps}>
+        <View style={innerCircleIndicatorProps}></View>
+      </View>
+    </View>
+  );
+};
+
+const CornerRadiusTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={500}>
+        <CornerRadiusTestComponent name="radiusNone" cornerRadius={globalTokens.corner.radiusNone} />
+        <CornerRadiusTestComponent name="radius20" cornerRadius={globalTokens.corner.radius20} />
+        <CornerRadiusTestComponent name="radius40" cornerRadius={globalTokens.corner.radius40} />
+        <CornerRadiusTestComponent name="radius60" cornerRadius={globalTokens.corner.radius60} />
+        <CornerRadiusTestComponent name="radius80" cornerRadius={globalTokens.corner.radius80} />
+        <CornerRadiusTestComponent name="radius120" cornerRadius={globalTokens.corner.radius120} />
+        <CornerRadiusTestComponent name="radiusCircular" cornerRadius={globalTokens.corner.radiusCircular} />
+      </Stack>
+    </View>
+  );
+};
+
+const cornerRadiusSections: TestSection[] = [
+  {
+    name: 'Basic Usage',
+    testID: HOMEPAGE_CORNERRADIUS_TESTPAGE,
+    component: CornerRadiusTest,
+  },
+];
+
+export const CornerRadiusTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  const description = 'The different global corner radius tokens available in Fluent UI.';
+
+  return <Test name="Corner Radius Tokens Test" description={description} sections={cornerRadiusSections} status={status} />;
+};

package/src/TestComponents/CornerRadius/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_CORNERRADIUS_BUTTON = 'Homepage_CornerRadius_Button';
+export const HOMEPAGE_CORNERRADIUS_TESTPAGE = 'CornerRadius_TestPage';

package/src/TestComponents/CornerRadius/index.ts

@@ -0,0 +1,2 @@
+export * from './CornerRadiusTest';
+export * from './consts';

package/src/TestComponents/Drawer/DrawerTest.tsx

@@ -5,20 +5,14 @@ import { Link } from '@fluentui/react-native';
 import { Button } from '@fluentui-react-native/experimental-button';
 import { Drawer } from '@fluentui-react-native/experimental-drawer';
 import { Stack } from '@fluentui-react-native/stack';
-import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
+import { Icon } from '@fluentui-react-native/icon';
 import { DRAWER_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
-
-import TestSvg from '../Icon/assets/test.svg';
+import { svgProps } from '../Common/iconExamples';
 
 const BasicDrawer: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   return (
     <Stack style={stackStyle} gap={5}>
       <Drawer>

package/src/TestComponents/Icon/IconE2ETest.tsx

@@ -5,8 +5,7 @@ import { Text } from '@fluentui/react-native';
 import { Icon } from '@fluentui-react-native/icon';
 import { ICON_ACCESSIBILITY_LABEL } from './consts';
 import { RasterImageIconProps } from '@fluentui-react-native/icon';
-
-const testImage = require('../../../../assets/icon_24x24.png');
+import { testImage } from '../Common/iconExamples';
 
 export const E2ETestingIcon: React.FunctionComponent = () => {
   const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };

package/src/TestComponents/Icon/IconExperimental.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+};

package/src/TestComponents/Icon/IconTest.tsx

@@ -6,10 +6,8 @@ import { Icon, RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluent
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ICON_TESTPAGE } from './consts';
 import { E2ETestingIcon } from './IconE2ETest';
-
-const testImage = require('../../../../assets/icon_24x24.png');
-const testTtf = require('./../../../assets/Font_Awesome_900.otf');
-import TestSvg from './assets/test.svg';
+import { IconExperimental } from './IconExperimental';
+import { testImage, testTtf, svgProps } from '../Common/iconExamples';
 
 const Icons: React.FunctionComponent = () => {
   const fontCustomFontProps: FontIconProps = {
@@ -25,11 +23,6 @@ const Icons: React.FunctionComponent = () => {
     fontSize: 32,
   };
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"
   // https://thenounproject.com/search/?q=d20&i=2453700
   const svgD20DataUriProps: SvgIconProps = {
@@ -104,6 +97,10 @@ const iconSections: TestSection[] = [
     name: 'Icon for E2E Testing',
     component: E2ETestingIcon,
   },
+  {
+    name: 'Default Icon',
+    component: IconExperimental,
+  },
 ];
 
 export const IconTest: React.FunctionComponent = () => {

package/src/TestComponents/MenuButton/NestedMenuButtonTest.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Separator, MenuButton } from '@fluentui/react-native';
-import { menuItems, testImage, iconProps } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import { testImage } from '../Common/iconExamples';
 
 export const NestedMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButton/StandardMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Separator, MenuButton, ContextualMenuProps } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
-import { menuItems, iconProps, testImage } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { IconSourcesType } from '@fluentui-react-native/icon';
+import { testImage } from '../Common/iconExamples';
 
 export const StandardMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButton/testData.ts

@@ -1,14 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('./../../../assets/icon_24x24.png');
-import TestSvg from '../Button/test.svg';
 import { MENU_ITEM_1_COMPONENT } from './consts';
-
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
+import { svgProps, testImage } from '../Common/iconExamples';
 
 export const menuItems: MenuButtonItemProps[] = [
   {

package/src/TestComponents/MenuButtonExperimental/NestedMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Separator } from '@fluentui/react-native';
-import { menuItems, testImage, iconProps } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { testImage } from '../Common/iconExamples';
 
 export const NestedMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButtonExperimental/StandardMenuButtonTest.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Separator, ContextualMenuProps } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
-import { menuItems, iconProps, testImage } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { IconSourcesType } from '@fluentui-react-native/icon';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { testImage } from '../Common/iconExamples';
 
 export const StandardMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButtonExperimental/testData.ts

@@ -1,13 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('./../../../assets/icon_24x24.png');
-import TestSvg from '../Button/test.svg';
-
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
+import { testImage, svgProps } from '../Common/iconExamples';
 
 export const menuItems: MenuButtonItemProps[] = [
   {

package/src/TestComponents/RadioGroupExperimental/CustomizedRadioGroup.tsx

@@ -0,0 +1,373 @@
+import * as React from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+import { RadioGroup, Radio, RadioGroupTokens, RadioTokens } from '@fluentui-react-native/experimental-radio-group';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+const styles = StyleSheet.create({
+  tokensRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  tokensColumn: {
+    flexDirection: 'column',
+    margin: 10,
+  },
+});
+
+export const CustomizedRadioGroup: React.FunctionComponent = () => {
+  // RadioGroup
+  const [groupColor, setGroupColor] = React.useState<string>('black');
+  const [requiredColor, setRequiredColor] = React.useState<string>('red');
+  const [requiredPadding, setRequiredPadding] = React.useState<number>(2);
+
+  // Radio
+  const [borderColor, setBorderColor] = React.useState<string>('white');
+  const [borderWidth, setBorderWidth] = React.useState<number>(1);
+  const [borderRadius, setBorderRadius] = React.useState<number>(1);
+  const [radioBorderWidth, setRadioBorderWidth] = React.useState<number>(1);
+  const [radioVisibility, setRadioVisibility] = React.useState<number>(1);
+  const [radioBorder, setRadioBorder] = React.useState<string>('black');
+  const [radioSize, setRadioSize] = React.useState<number>(20);
+  const [radioInnerCircleSize, setRadioInnerCircleSize] = React.useState<number>(10);
+  const [radioFill, setRadioFill] = React.useState<string>('blue');
+  const [color, setColor] = React.useState<string>('black');
+  const [marginTop, setMarginTop] = React.useState<number>(6);
+  const [marginRight, setMarginRight] = React.useState<number>(6);
+  const [marginBottom, setMarginBottom] = React.useState<number>(6);
+  const [marginLeft, setMarginLeft] = React.useState<number>(4);
+  const [labelMarginTop, setLabelMarginTop] = React.useState<number>(5);
+  const [labelMarginRight, setLabelMarginRight] = React.useState<number>(2);
+  const [labelMarginLeft, setLabelMarginLeft] = React.useState<number>(0);
+  const [subtextMarginTop, setSubtextMarginTop] = React.useState<number>(2);
+  const [subtextMarginBottom, setSubtextMarginBottom] = React.useState<number>(2);
+
+  const CustomRadioGroup = React.useMemo(() => {
+    const tokens: RadioGroupTokens = {
+      color: groupColor,
+      requiredColor,
+      requiredPadding,
+      disabled: {
+        color: groupColor,
+      },
+    };
+    return RadioGroup.customize(tokens);
+  }, [groupColor, requiredColor, requiredPadding]);
+
+  const CustomRadio = React.useMemo(() => {
+    const tokens: RadioTokens = {
+      borderColor,
+      borderWidth,
+      borderRadius,
+      radioBorderWidth,
+      radioVisibility,
+      radioBorder,
+      radioSize,
+      radioInnerCircleSize,
+      color,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      labelMarginTop,
+      labelMarginRight,
+      labelMarginLeft,
+      subtextMarginTop,
+      subtextMarginBottom,
+
+      labelPositionBelow: {
+        marginLeft: marginLeft,
+      },
+
+      disabled: {
+        radioBorder,
+        color,
+        radioVisibility,
+      },
+      hovered: {
+        radioBorder,
+        color,
+        selected: {
+          radioBorder,
+          radioFill,
+          color,
+          radioVisibility,
+        },
+      },
+      pressed: {
+        radioBorder,
+        color,
+        selected: {
+          radioBorder,
+          radioFill,
+          color,
+          radioVisibility,
+        },
+      },
+      focused: {
+        borderColor,
+        selected: {
+          radioVisibility,
+        },
+      },
+      selected: {
+        radioBorder,
+        radioFill,
+        color,
+        radioVisibility,
+        disabled: {
+          radioFill,
+        },
+      },
+    };
+    return Radio.customize(tokens);
+  }, [
+    borderColor,
+    borderWidth,
+    borderRadius,
+    radioBorderWidth,
+    radioVisibility,
+    radioBorder,
+    radioSize,
+    radioInnerCircleSize,
+    radioFill,
+    color,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    labelMarginTop,
+    labelMarginRight,
+    labelMarginLeft,
+    subtextMarginTop,
+    subtextMarginBottom,
+  ]);
+
+  return (
+    <View style={styles.tokensColumn}>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>RadioGroup Tokens</Text>
+          <TextInput
+            accessibilityLabel="RadioGroup color"
+            style={commonStyles.textBox}
+            placeholder="color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setGroupColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="RadioGroup required color"
+            style={commonStyles.textBox}
+            placeholder="requiredColor"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRequiredColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="RadioGroup required padding"
+            style={commonStyles.textBox}
+            placeholder="requiredPadding"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRequiredPadding(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+      </View>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>Radio Border Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio border color"
+            style={commonStyles.textBox}
+            placeholder="borderColor"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio border width"
+            style={commonStyles.textBox}
+            placeholder="borderWidth"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderWidth(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio border radius"
+            style={commonStyles.textBox}
+            placeholder="borderRadius"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderRadius(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Button Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio button border width"
+            style={commonStyles.textBox}
+            placeholder="radioBorderWidth"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioBorderWidth(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button visibility"
+            style={commonStyles.textBox}
+            placeholder="radioVisibility"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioVisibility(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button border"
+            style={commonStyles.textBox}
+            placeholder="radioBorder"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioBorder(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button size"
+            style={commonStyles.textBox}
+            placeholder="radioSize"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioSize(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button inner circle size"
+            style={commonStyles.textBox}
+            placeholder="radioInnerCircleSize"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioInnerCircleSize(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button fill"
+            style={commonStyles.textBox}
+            placeholder="radioFill"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioFill(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin right"
+            style={commonStyles.textBox}
+            placeholder="marginRight"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginRight(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin bottom"
+            style={commonStyles.textBox}
+            placeholder="marginBottom"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginBottom(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin left"
+            style={commonStyles.textBox}
+            placeholder="marginLeft"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginLeft(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Label Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio label color"
+            style={commonStyles.textBox}
+            placeholder="color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin right"
+            style={commonStyles.textBox}
+            placeholder="marginRight"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginRight(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin left"
+            style={commonStyles.textBox}
+            placeholder="marginLeft"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginLeft(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Subtext Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio subtext margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setSubtextMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio subtext margin bottom"
+            style={commonStyles.textBox}
+            placeholder="marginBottom"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setSubtextMarginBottom(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+      </View>
+
+      <CustomRadioGroup required label="Custom RadioGroup" accessibilityLabel="Custom Switch">
+        <CustomRadio label="Apple" subtext="Fruit" value="Apple"></CustomRadio>
+        <CustomRadio label="Pear" value="Pear"></CustomRadio>
+        <CustomRadio label="Banana" value="Banana"></CustomRadio>
+        <CustomRadio label="Orange" value="Orange"></CustomRadio>
+      </CustomRadioGroup>
+    </View>
+  );
+};