diff --git a/__tests__/App-test.js b/__tests__/App-test.js
index 64279663..b33b0ab2 100644
--- a/__tests__/App-test.js
+++ b/__tests__/App-test.js
@@ -34,6 +34,9 @@ import {XamlExamplePage} from '../src/examples/XamlExamplePage';
//import {TrackPlayerExamplePage} from '../src/examples/TrackPlayerExamplePage';
import {WindowsHelloExamplePage} from '../src/examples/WindowsHelloExamplePage';
import {ExpanderExamplePage} from '../src/examples/ExpanderExamplePage';
+// https://github.com/microsoft/react-native-gallery/issues/420
+// Unable to import: {export * from './types'; SyntaxError: Unexpected token 'export'
+//import {RadioButtonsExamplePage} from '../src/examples/RadioButtonsExamplePage';
import {View} from 'react-native';
function Control() {
@@ -137,6 +140,11 @@ test('ProgressView Example Page', () => {
expect(tree).toMatchSnapshot();
});
+/*test('Radio Buttons Example Page', () => {
+ const tree = create().toJSON();
+ expect(tree).toMatchSnapshot();
+});*/
+
test('ScrollView Example Page', () => {
const tree = create().toJSON();
expect(tree).toMatchSnapshot();
diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap
index 66e79d61..e22f81f4 100644
--- a/__tests__/__snapshots__/App-test.js.snap
+++ b/__tests__/__snapshots__/App-test.js.snap
@@ -50159,6 +50159,685 @@ exports[`Xaml Example Page 1`] = `
+
+
+ A simple XAML radio group.
+
+
+
+
+
+
+
+
+
+
+ Output:
+You selected Option 1
+
+
+
+
+
+
+
+
+ const
+
+
+
+ [selectedRadioButton, setSelectedRadioButton] = useState(
+
+
+
+ '1'
+
+
+
+ );
+
+
+
+
+ const
+
+
+
+ onRadioButtonSelected =
+
+
+
+ (
+
+
+
+ event
+
+
+
+ ) =>
+
+
+
+ {
+ setSelectedRadioButton(event.nativeEvent?.sender.tag);
+};
+
+
+
+
+
+
+ <
+
+
+
+ View
+
+
+
+ >
+
+
+
+
+
+
+
+
+ <
+
+
+
+ RadioButton
+
+
+
+
+
+
+
+ content
+
+
+
+ =
+
+
+
+ "Option 1"
+
+
+
+
+
+
+
+ tag
+
+
+
+ =
+
+
+
+ "1"
+
+
+
+
+
+
+
+ isChecked
+
+
+
+ =
+
+
+
+ {true}
+
+
+
+
+
+
+
+ onChecked
+
+
+
+ =
+
+
+
+ {onRadioButtonSelected}/
+
+
+
+ >
+
+
+
+
+
+
+
+
+ <
+
+
+
+ RadioButton
+
+
+
+
+
+
+
+ content
+
+
+
+ =
+
+
+
+ "Option 2"
+
+
+
+
+
+
+
+ tag
+
+
+
+ =
+
+
+
+ "2"
+
+
+
+
+
+
+
+ onChecked
+
+
+
+ =
+
+
+
+ {onRadioButtonSelected}/
+
+
+
+ >
+
+
+
+
+
+
+
+
+ <
+
+
+
+ RadioButton
+
+
+
+
+
+
+
+ content
+
+
+
+ =
+
+
+
+ "Option 3"
+
+
+
+
+
+
+
+ tag
+
+
+
+ =
+
+
+
+ "3"
+
+
+
+
+
+
+
+ onChecked
+
+
+
+ =
+
+
+
+ {onRadioButtonSelected}/
+
+
+
+ >
+
+
+
+
+
+
+
+
+ </
+
+
+
+ View
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
= [
"Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.",
type: 'Basic Input',
},
+ {
+ key: 'Radio Buttons',
+ component: RadioButtonsExamplePage,
+ textIcon: '\uECCB',
+ imageIcon: require('../assets/ControlImages/RadioButtons.png'),
+ subtitle:
+ 'A control that allows the user to select a single option from a group of options.',
+ type: 'Basic Input',
+ },
{
key: 'ScrollView',
component: ScrollViewExamplePage,
diff --git a/src/examples/RadioButtonsExamplePage.tsx b/src/examples/RadioButtonsExamplePage.tsx
new file mode 100644
index 00000000..41689bcd
--- /dev/null
+++ b/src/examples/RadioButtonsExamplePage.tsx
@@ -0,0 +1,72 @@
+'use strict';
+import React, {useState} from 'react';
+import {Text, View} from 'react-native';
+import {Example} from '../components/Example';
+import {Page} from '../components/Page';
+import RadioGroup from 'react-native-radio-buttons-group';
+
+export const RadioButtonsExamplePage: React.FunctionComponent<{}> = () => {
+ const [radioSelection, setRadioSelection] = useState('3');
+ const example1jsx = ``;
+ return (
+
+
+ Options:
+
+
+ {`Output:
+You selected Option ${radioSelection}`}
+
+
+
+ );
+};
diff --git a/src/examples/XamlExamplePage.tsx b/src/examples/XamlExamplePage.tsx
index bfe176e1..198f5593 100644
--- a/src/examples/XamlExamplePage.tsx
+++ b/src/examples/XamlExamplePage.tsx
@@ -1,5 +1,5 @@
'use strict';
-import {View} from 'react-native';
+import {Text, View} from 'react-native';
import React, {useState} from 'react';
import {Example} from '../components/Example';
import {Page} from '../components/Page';
@@ -7,6 +7,7 @@ import {
TextBlock,
Button,
Hyperlink,
+ RadioButton,
Run,
ToggleSwitch,
ComboBox,
@@ -24,6 +25,10 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => {
const [menuFlyoutOption, setMenuFlyoutOption] = useState(
'MenuFlyout Option 1',
);
+ const [selectedRadioButton, setSelectedRadioButton] = useState('1');
+ const onRadioButtonSelected = (event) => {
+ setSelectedRadioButton(event.nativeEvent?.sender.tag);
+ };
const example1jsx = '';
const example2jsx =
@@ -77,6 +82,16 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => {
`;
+ const example9jsx = `const [selectedRadioButton, setSelectedRadioButton] = useState('1');
+const onRadioButtonSelected = (event) => {
+ setSelectedRadioButton(event.nativeEvent?.sender.tag);
+};
+
+
+
+
+
+`;
return (
= () => {
+
+
+
+
+
+
+
+ {`Output:
+You selected Option ${selectedRadioButton}`}
+
+