diff --git a/example/src/ExampleList.js b/example/src/ExampleList.js
index f891ced..e28fa11 100644
--- a/example/src/ExampleList.js
+++ b/example/src/ExampleList.js
@@ -16,6 +16,7 @@ import CheckboxExample from './CheckboxExample';
import DividerExample from './DividerExample';
import PaperExample from './PaperExample';
import RippleExample from './RippleExample';
+import RadioButtonExample from './RadioButtonExample';
import TextExample from './TextExample';
export const examples = {
@@ -25,6 +26,7 @@ export const examples = {
divider: DividerExample,
paper: PaperExample,
ripple: RippleExample,
+ radio: RadioButtonExample,
text: TextExample,
};
diff --git a/example/src/RadioButtonExample.js b/example/src/RadioButtonExample.js
new file mode 100644
index 0000000..eebc314
--- /dev/null
+++ b/example/src/RadioButtonExample.js
@@ -0,0 +1,67 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import {
+ View,
+ StyleSheet,
+} from 'react-native';
+import {
+ Paragraph,
+ RadioButton,
+ Colors,
+} from 'react-native-paper';
+
+export default class RadioButtonExample extends Component {
+
+ static title = 'Radio button';
+
+ state = {
+ checkedNormal: true,
+ checkedCustom: true,
+ };
+
+ render() {
+ return (
+
+
+ Normal
+ this.setState(state => ({ checkedNormal: !state.checkedNormal }))}
+ />
+
+
+ Custom
+ this.setState(state => ({ checkedCustom: !state.checkedCustom }))}
+ />
+
+
+ Checked (Disabled)
+
+
+
+ Unchecked (Disabled)
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: Colors.white,
+ padding: 8,
+ },
+
+ row: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: 8,
+ },
+});
diff --git a/index.js b/index.js
index 93f74be..944cd70 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ export { default as Button } from './src/components/Button';
export { default as Card } from './src/components/Card';
export { default as Checkbox } from './src/components/Checkbox';
export { default as Paper } from './src/components/Paper';
+export { default as RadioButton } from './src/components/RadioButton';
export { default as TouchableRipple } from './src/components/TouchableRipple';
export { default as Caption } from './src/components/Typography/Caption';
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
new file mode 100644
index 0000000..a93e2ad
--- /dev/null
+++ b/src/components/RadioButton.js
@@ -0,0 +1,82 @@
+/* @flow */
+
+import React, {
+ PropTypes,
+} from 'react';
+import {
+ StyleSheet,
+} from 'react-native';
+import color from 'color';
+import Icon from './Icon';
+import TouchableRipple from './TouchableRipple';
+import withTheme from '../core/withTheme';
+import type { Theme } from '../types/Theme';
+
+type Props = {
+ checked: boolean;
+ disabled?: boolean;
+ onPress?: Function;
+ color?: string;
+ theme: Theme;
+}
+
+const RadioButton = (props: Props) => {
+ const {
+ checked,
+ disabled,
+ onPress,
+ theme,
+ } = props;
+
+ const radioColor = props.color || theme.colors.primary;
+
+ let rippleColor, radioStyle;
+
+ if (disabled) {
+ rippleColor = 'rgba(0, 0, 0, .16)';
+ radioStyle = { color: 'rgba(0, 0, 0, .26)' };
+ } else {
+ rippleColor = color(radioColor).clearer(0.32).rgbaString();
+ if (checked) {
+ radioStyle = { color: radioColor };
+ }
+ }
+
+ return (
+
+
+
+ );
+};
+
+RadioButton.propTypes = {
+ checked: PropTypes.bool.isRequired,
+ disabled: PropTypes.bool,
+ onPress: PropTypes.func,
+ color: PropTypes.string,
+ theme: PropTypes.object.isRequired,
+};
+
+const styles = StyleSheet.create({
+ container: {
+ borderRadius: 18,
+ },
+
+ radio: {
+ /* FIXME: using opacity doesn't work properly with TouchableHighlight */
+ color: 'rgba(0, 0, 0, .54)',
+ margin: 6,
+ },
+});
+
+export default withTheme(RadioButton);