@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx

@@ -1,72 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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"
-            accessibilityPositionInSet={1}
-            accessibilitySetSize={4}
-          />
-          <RadioButton content="Option B" buttonKey="B" accessibilityPositionInSet={2} accessibilitySetSize={4} />
-          <RadioButton content="Option C" buttonKey="C" accessibilityPositionInSet={3} accessibilitySetSize={4} />
-          <RadioButton content="Option D" buttonKey="D" accessibilityPositionInSet={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

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

package/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx

@@ -1,376 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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"
-            accessibilityPositionInSet={1}
-            accessibilitySetSize={4}
-          />
-          <Radio label="Option B" value="B" accessibilityPositionInSet={2} accessibilitySetSize={4} />
-          <Radio label="Option C" value="C" accessibilityPositionInSet={3} accessibilitySetSize={4} />
-          <Radio label="Option D" value="D" accessibilityPositionInSet={4} accessibilitySetSize={4} />
-        </View>
-      </RadioGroup>
-    </View>
-  );
-};

package/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx

@@ -1,30 +0,0 @@
-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

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