feat: add <RadioButton /> component. fixes #13

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,
 };
 

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 (
+      <View style={styles.container}>
+        <View style={styles.row}>
+          <Paragraph>Normal</Paragraph>
+          <RadioButton
+            checked={this.state.checkedNormal}
+            onPress={() => this.setState(state => ({ checkedNormal: !state.checkedNormal }))}
+          />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Custom</Paragraph>
+          <RadioButton
+            color={Colors.pink500}
+            checked={this.state.checkedCustom}
+            onPress={() => this.setState(state => ({ checkedCustom: !state.checkedCustom }))}
+          />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Checked (Disabled)</Paragraph>
+          <RadioButton checked disabled />
+        </View>
+        <View style={styles.row}>
+          <Paragraph>Unchecked (Disabled)</Paragraph>
+          <RadioButton checked={false} disabled />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+    padding: 8,
+  },
+
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 8,
+  },
+});

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';

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 (
+    <TouchableRipple
+      {...props}
+      borderless
+      rippleColor={rippleColor}
+      onPress={disabled ? undefined : onPress}
+      style={styles.container}
+    >
+      <Icon
+        name={checked ? 'radio-button-checked' : 'radio-button-unchecked'}
+        size={24}
+        style={[ styles.radio, radioStyle ]}
+      />
+    </TouchableRipple>
+  );
+};
+
+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);