feat(ui-react-native): add RadioGroup uncontrolled support

examples/react-native/storybook/stories/RadioGroup.stories.tsx

@@ -13,7 +13,23 @@ const ControlledRadioGroup = ({ ...props }: any) => {
   };
 
   return (
-    <RadioGroup {...props} value={value} onChange={onChange}>
+    <RadioGroup {...props} initialValue={value} onChange={onChange}>
+      <Radio value="option-1" label="Option 1" />
+      <Radio value="option-2" label="Option 2" />
+      <Radio value="option-3" label="Option 3" />
+    </RadioGroup>
+  );
+};
+
+const UncontrolledRadioGroup = ({ ...props }: any) => {
+  const [selectedValue, setSelectedValue] = useState('Empty :(');
+
+  return (
+    <RadioGroup
+      {...props}
+      label={selectedValue}
+      onValueChange={setSelectedValue}
+    >
       <Radio value="option-1" label="Option 1" />
       <Radio value="option-2" label="Option 2" />
       <Radio value="option-3" label="Option 3" />
@@ -28,7 +44,7 @@ const CustomRadioGroup = ({ ...props }: any) => {
   };
 
   return (
-    <RadioGroup {...props} value={value} onChange={onChange}>
+    <RadioGroup {...props} initialValue={value} onChange={onChange}>
       <Radio value="small" label="Should be small" size="small" />
       <Radio
         value="red"
@@ -48,8 +64,9 @@ const CustomRadioGroup = ({ ...props }: any) => {
 storiesOf('RadioGroup', module)
   .add('default', () => <ControlledRadioGroup label="Basic RadioGroup" />)
   .add('controlled', () => (
-    <ControlledRadioGroup label="Defaults to Option 2" value="option-2" />
+    <ControlledRadioGroup label="Defaults to Option 2" />
   ))
+  .add('uncontrolled', () => <UncontrolledRadioGroup initialValue="option-2" />)
   .add('direction', () => (
     <>
       <ControlledRadioGroup label="Horizontal" direction="horizontal" />

packages/react-core/src/__tests__/__snapshots__/index.spec.ts.snap

@@ -7,5 +7,7 @@ Array [
   "useAuthenticator",
   "useAuthenticatorInitMachine",
   "useAuthenticatorRoute",
+  "useHasValueUpdated",
+  "usePreviousValue",
 ]
 `;

packages/react-core/src/index.ts

@@ -14,3 +14,6 @@ export {
   UseAuthenticatorRoute,
   FormFieldsComponent,
 } from './Authenticator';
+
+// components/hooks/utils
+export { useHasValueUpdated, usePreviousValue } from './hooks';

packages/react-native/src/primitives/Radio/Radio.tsx

@@ -66,7 +66,10 @@ export default function Radio<T>({
         style={[styles.radioContainer, radioContainerSize, radioContainerStyle]}
       >
         {selected ? (
-          <View style={[styles.radioDot, radioDotSize, radioDotStyle]} />
+          <View
+            style={[styles.radioDot, radioDotSize, radioDotStyle]}
+            testID="amplify__radio-button__dot"
+          />
         ) : null}
       </View>
       {label ? <Label style={labelStyle}>{label}</Label> : null}

packages/react-native/src/primitives/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -119,6 +119,7 @@ exports[`Radio renders as expected when passing a number to the size prop 1`] =
           undefined,
         ]
       }
+      testID="amplify__radio-button__dot"
     />
   </View>
   <Text
@@ -257,6 +258,7 @@ exports[`Radio renders as expected when selected is true 1`] = `
           undefined,
         ]
       }
+      testID="amplify__radio-button__dot"
     />
   </View>
   <Text
@@ -334,6 +336,7 @@ exports[`Radio renders as expected when size is large 1`] = `
           undefined,
         ]
       }
+      testID="amplify__radio-button__dot"
     />
   </View>
   <Text
@@ -411,6 +414,7 @@ exports[`Radio renders as expected when size is medium 1`] = `
           undefined,
         ]
       }
+      testID="amplify__radio-button__dot"
     />
   </View>
   <Text
@@ -488,6 +492,7 @@ exports[`Radio renders as expected when size is small 1`] = `
           undefined,
         ]
       }
+      testID="amplify__radio-button__dot"
     />
   </View>
   <Text

packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx

@@ -1,6 +1,16 @@
-import React, { Children, cloneElement, isValidElement, useMemo } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { View, ViewStyle } from 'react-native';
 
+import { useHasValueUpdated } from '@aws-amplify/ui-react-core';
+
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
 import { RadioProps } from '../Radio';
@@ -13,15 +23,29 @@ export default function RadioGroup<T>({
   children,
   direction = 'vertical',
   disabled,
+  initialValue,
   label,
   labelPosition = 'top',
   labelStyle,
   onChange,
+  onValueChange,
   size,
   style,
-  value,
   ...rest
 }: RadioGroupProps<T>): JSX.Element {
+  const [value, setValue] = useState<T | undefined>(initialValue);
+
+  // track `hasValueUpdated` and `hasOnValueChangeUpdated`,
+  // only call `onValueChange` on `value` update
+  const hasValueUpdated = useHasValueUpdated(value);
+  const hasOnValueChangeUpdated = useHasValueUpdated(onValueChange);
+
+  useEffect(() => {
+    if (hasValueUpdated) {
+      onValueChange?.(value);
+    }
+  }, [hasOnValueChangeUpdated, hasValueUpdated, onValueChange, value]);
+
   const containerStyle: ViewStyle = useMemo(
     () => ({
       flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
@@ -34,6 +58,15 @@ export default function RadioGroup<T>({
     [direction]
   );
 
+  const handleChange = useCallback(
+    (nextValue: T | undefined) => {
+      setValue(nextValue);
+
+      onChange?.(nextValue);
+    },
+    [onChange]
+  );
+
   return (
     <View {...rest} style={[containerStyle, style]}>
       <View accessibilityRole={accessibilityRole} style={childContainerStyle}>
@@ -50,7 +83,7 @@ export default function RadioGroup<T>({
 
             return cloneElement<RadioProps<T>>(child, {
               disabled: isChildDisabled,
-              onChange,
+              onChange: handleChange,
               selected: isChildSelected,
               size: childSize ?? size,
             });

packages/react-native/src/primitives/RadioGroup/__tests__/RadioGroup.spec.tsx

@@ -30,7 +30,7 @@ const ControlledRadioGroup = ({
   return (
     <RadioGroup
       {...rest}
-      value={value}
+      initialValue={value}
       onChange={(nextValue) => {
         if (typeof nextValue === 'string') {
           handleOnChange(nextValue);
@@ -94,4 +94,64 @@ describe('RadioGroup', () => {
     const { toJSON } = render(<ControlledRadioGroup size={value} />);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('updates the selected option in uncontrolled mode', () => {
+    const { getByTestId, queryByTestId } = render(
+      <RadioGroup>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    const selectedOption = queryByTestId('amplify__radio-button__dot');
+
+    expect(selectedOption).toBeNull();
+
+    const optionOne = getByTestId('option-1');
+
+    fireEvent.press(optionOne);
+
+    expect(queryByTestId('amplify__radio-button__dot')).toBeDefined();
+  });
+
+  it('only calls onValueChange when value changes', () => {
+    const onValueChange = jest.fn();
+
+    const { getByTestId, rerender } = render(
+      <RadioGroup onValueChange={onValueChange}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    const optionOne = getByTestId('option-1');
+
+    fireEvent.press(optionOne);
+
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(onValueChange).toHaveBeenCalledWith('option-1');
+
+    const updatedOnValueChange = jest.fn();
+
+    rerender(
+      <RadioGroup onValueChange={updatedOnValueChange}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 2" testID="option-2" />
+      </RadioGroup>
+    );
+
+    expect(updatedOnValueChange).not.toHaveBeenCalled();
+  });
+
+  it('renders the label prop', () => {
+    const label = 'label';
+    const { getByText } = render(
+      <RadioGroup label={label}>
+        <Radio value="option-1" label="Option 1" testID="option-1" />
+        <Radio value="option-2" label="Option 1" testID="option-2" />
+      </RadioGroup>
+    );
+
+    expect(getByText(label)).toBeDefined();
+  });
 });

packages/react-native/src/primitives/RadioGroup/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -75,6 +75,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text
@@ -347,6 +348,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text
@@ -619,6 +621,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text
@@ -891,6 +894,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text
@@ -1163,6 +1167,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text
@@ -1435,6 +1440,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
               undefined,
             ]
           }
+          testID="amplify__radio-button__dot"
         />
       </View>
       <Text

packages/react-native/src/primitives/RadioGroup/types.ts

@@ -13,11 +13,12 @@ export interface RadioGroupProps<T>
       | 'labelStyle'
       | 'onChange'
       | 'size'
-      | 'value'
     >,
     ViewProps {
   children: React.ReactElement<RadioProps<T>>[];
   direction?: Direction;
+  initialValue?: T;
+  onValueChange?: (value?: T) => void;
 }
 
 export interface RadioGroupStyles {