@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { RadioButton, RadioGroup } from '@fluentui/react-native';
+import {
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
+  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_BUTTON_LABEL,
+} from '@fluentui-react-native/e2e-testing';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+
+export const RadioGroupLegacyE2ETest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_TEST_COMPONENT)}
+        >
+          <RadioButton
+            content="Option A"
+            buttonKey="A"
+            accessibilityLabel={FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIRST_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content={SECOND_RADIO_BUTTON_LABEL}
+            buttonKey="B"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(SECOND_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option C (disabled)"
+            buttonKey="C"
+            disabled={true}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(THIRD_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option D"
+            buttonKey="C"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FOURTH_RADIO_BUTTON)}
+          />
+        </RadioGroup>
+        <RadioGroup
+          label={RADIOGROUP_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_NO_A11Y_LABEL_COMPONENT)}
+        >
+          <RadioButton content="Option W" buttonKey="W" />
+          <RadioButton content="Option X" buttonKey="X" />
+          <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option Z" buttonKey="Z" />
+        </RadioGroup>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
+import { RADIOGROUP_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { RadioGroupLegacyE2ETest } from './RadioGroupLegacyE2ETest';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const BasicRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+
+  const [selectedKey, setSelectedKey] = React.useState('C');
+
+  const onChange2 = React.useCallback((key: string) => {
+    if (key == 'A') {
+      setSelectedKey('A');
+    } else if (key == 'B') {
+      setSelectedKey('B');
+    } else if (key == 'C') {
+      setSelectedKey('C');
+    } else if (key == 'D') {
+      setSelectedKey('D');
+    }
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup label="Uncontrolled RadioGroup" defaultSelectedKey="X" onChange={onChange}>
+        <RadioButton content="Option W" buttonKey="W" accessibilityLabel="Test Accessibility Label" />
+        <RadioButton content="Option X" buttonKey="X" />
+        <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+        <RadioButton content="Option Z" buttonKey="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup label="Controlled RadioGroup" selectedKey={selectedKey} onChange={onChange2}>
+        <View>
+          <RadioButton
+            content="Option A"
+            buttonKey="A"
+            accessibilityLabel="Test Accessibility Label"
+            accessibilityPosInSet={1}
+            accessibilitySetSize={4}
+          />
+          <RadioButton content="Option B" buttonKey="B" accessibilityPosInSet={2} accessibilitySetSize={4} />
+          <RadioButton content="Option C" buttonKey="C" accessibilityPosInSet={3} accessibilitySetSize={4} />
+          <RadioButton content="Option D" buttonKey="D" accessibilityPosInSet={4} accessibilitySetSize={4} />
+        </View>
+      </RadioGroup>
+    </View>
+  );
+};
+
+const radioGroupSections: TestSection[] = [
+  {
+    name: 'Basic RadioGroup Usage',
+    testID: RADIOGROUP_TESTPAGE,
+    component: BasicRadioGroup,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'RadioGroup for E2E Testing',
+    component: RadioGroupLegacyE2ETest,
+  },
+];
+
+export const RadioGroupLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description = 'No description.';
+
+  return (
+    <Test name="RadioGroup Legacy Test" description={description} sections={radioGroupSections} status={status} e2eSections={e2eSections} />
+  );
+};

package/src/TestComponents/RadioGroupLegacy/index.ts

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

package/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx

@@ -0,0 +1,376 @@
+import * as React from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+
+import type { RadioGroupTokens, RadioTokens } from '@fluentui-react-native/radio-group';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/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 [radioOuterCircleSize, setRadioOuterCircleSize] = 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 [labelMarginVertical, setLabelMarginVertical] = React.useState<number>(4);
+  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,
+      radioOuterCircleSize,
+      radioInnerCircleSize,
+      color,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      labelMarginVertical,
+      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,
+    radioOuterCircleSize,
+    radioInnerCircleSize,
+    radioFill,
+    color,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    labelMarginVertical,
+    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="radioOuterCircleSize"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioOuterCircleSize(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 vertical"
+            style={commonStyles.textBox}
+            placeholder="marginVertical"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginVertical(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>
+  );
+};

package/src/TestComponents/RadioGroupV1/DefaultRadioGroup.android.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+
+export const DefaultRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const [unselectedAccessibilityPrefix, setPrefix] = React.useState<string>('Unselected');
+  const onChange = React.useCallback((key: string) => {
+    console.log(key);
+    if (key == 'W') setPrefix('');
+    else setPrefix('Unselected');
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup label="RadioGroup Sample" onChange={onChange}>
+        <Radio label="Option W" value="W" accessibilityLabel={unselectedAccessibilityPrefix + 'Test Accessibility Label'} />
+        <Radio label="Option X" value="X" />
+        <Radio label="Option Y" value="Y" />
+        <Radio label="Option Z" value="Z" />
+      </RadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupV1/DefaultRadioGroup.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Separator } from '@fluentui/react-native';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+
+export const DefaultRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key: string) => {
+    console.log(key);
+  }, []);
+
+  const [selectedKey, setSelectedKey] = React.useState('C');
+
+  const onChange2 = React.useCallback((key: string) => {
+    setSelectedKey(key);
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup label="Uncontrolled RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Option W" value="W" accessibilityLabel="Test Accessibility Label" />
+        <Radio label="Option X" value="X" />
+        <Radio label="Option Y (disabled)" value="C" disabled={true} />
+        <Radio label="Option Z" value="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup label="Controlled RadioGroup" value={selectedKey} onChange={onChange2}>
+        <View>
+          <Radio
+            label="Option A"
+            value="A"
+            accessibilityLabel="Test Accessibility Label"
+            accessibilityPosInSet={1}
+            accessibilitySetSize={4}
+          />
+          <Radio label="Option B" value="B" accessibilityPosInSet={2} accessibilitySetSize={4} />
+          <Radio label="Option C" value="C" accessibilityPosInSet={3} accessibilitySetSize={4} />
+          <Radio label="Option D" value="D" accessibilityPosInSet={4} accessibilitySetSize={4} />
+        </View>
+      </RadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Separator } from '@fluentui/react-native';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+
+export const DisabledRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key: string) => {
+    console.log(key);
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup disabled label="Disabled RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Option W" value="W" accessibilityLabel="Test Accessibility Label" />
+        <Radio label="Option X" value="X" />
+        <Radio label="Option Y" value="C" />
+        <Radio label="Option Z" value="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup label="Disabled Item" defaultValue="X" onChange={onChange}>
+        <Radio label="Option W" value="W" accessibilityLabel="Test Accessibility Label" />
+        <Radio label="Option X" value="X" />
+        <Radio label="Option Y (disabled)" value="C" disabled={true} />
+        <Radio label="Option Z" value="Z" />
+      </RadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupV1/HorizontalRadioGroup.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Separator } from '@fluentui/react-native';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+
+export const HorizontalRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key: string) => {
+    console.log(key);
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup layout={'horizontal'} label="Horizontal RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Apple" value="W" />
+        <Radio label="Pear" value="X" />
+        <Radio label="Banana" value="C" />
+        <Radio label="Orange" value="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup layout={'horizontal-stacked'} label="Horizontal-Stacked RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Apple" value="W" />
+        <Radio label="Pear" value="X" />
+        <Radio label="Banana" value="C" />
+        <Radio label="Orange" value="Z" />
+      </RadioGroup>
+    </View>
+  );
+};