docs: rename RadioGroup to RadioButtonGroup and fix docs

example/src/ExampleList.js

@@ -14,7 +14,7 @@ import FABExample from './FABExample';
 import PaperExample from './PaperExample';
 import ProgressBarExample from './ProgressBarExample';
 import RadioButtonExample from './RadioButtonExample';
-import RadioGroupExample from './RadioGroupExample';
+import RadioButtonGroupExample from './RadioButtonGroupExample';
 import RippleExample from './RippleExample';
 import SearchBarExample from './SearchBarExample';
 import SwitchExample from './SwitchExample';
@@ -39,7 +39,7 @@ export const examples = {
   paper: PaperExample,
   progressbar: ProgressBarExample,
   radio: RadioButtonExample,
-  radioGroup: RadioGroupExample,
+  radioGroup: RadioButtonGroupExample,
   ripple: RippleExample,
   searchbar: SearchBarExample,
   switch: SwitchExample,

example/src/RadioButtonGroupExample.js

@@ -5,7 +5,7 @@ import { View, StyleSheet } from 'react-native';
 import {
   Colors,
   withTheme,
-  RadioGroup,
+  RadioButtonGroup,
   RadioButton,
   Paragraph,
 } from 'react-native-paper';
@@ -19,8 +19,8 @@ type State = {
   value: string,
 };
 
-class RadioGroupExample extends React.Component<Props, State> {
-  static title = 'Radio group';
+class RadioButtonGroupExample extends React.Component<Props, State> {
+  static title = 'Radio button group';
 
   state = {
     value: 'first',
@@ -37,7 +37,7 @@ class RadioGroupExample extends React.Component<Props, State> {
           },
         ]}
       >
-        <RadioGroup
+        <RadioButtonGroup
           value={this.state.value}
           onValueChange={value => this.setState({ value })}
         >
@@ -49,7 +49,7 @@ class RadioGroupExample extends React.Component<Props, State> {
             <Paragraph>Second</Paragraph>
             <RadioButton value="second" />
           </View>
-        </RadioGroup>
+        </RadioButtonGroup>
       </View>
     );
   }
@@ -70,4 +70,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTheme(RadioGroupExample);
+export default withTheme(RadioButtonGroupExample);

src/components/RadioButton.ios.js

@@ -6,7 +6,7 @@ import color from 'color';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
 import withTheme from '../core/withTheme';
-import { RadioGroupContext } from './RadioGroup';
+import { RadioButtonContext } from './RadioButtonGroup';
 import type { Theme } from '../types';
 
 type Props = {
@@ -42,7 +42,7 @@ type Props = {
 class RadioButton extends React.Component<Props> {
   render() {
     return (
-      <RadioGroupContext.Consumer>
+      <RadioButtonContext.Consumer>
         {context => {
           const { disabled, onPress, theme, ...rest } = this.props;
 
@@ -92,7 +92,7 @@ class RadioButton extends React.Component<Props> {
             </TouchableRipple>
           );
         }}
-      </RadioGroupContext.Consumer>
+      </RadioButtonContext.Consumer>
     );
   }
 }

src/components/RadioButton.js

@@ -5,7 +5,7 @@ import { Animated, View, Platform, StyleSheet } from 'react-native';
 import color from 'color';
 import TouchableRipple from './TouchableRipple';
 import withTheme from '../core/withTheme';
-import { RadioGroupContext } from './RadioGroup';
+import { RadioButtonContext } from './RadioButtonGroup';
 import type { Theme } from '../types';
 
 type Props = {
@@ -43,7 +43,7 @@ type State = {
 const BORDER_WIDTH = 2;
 
 /**
- * Radio buttons allow the selection a single option from a set
+ * Radio buttons allow the selection a single option from a set.
  *
  * <div class="screenshots">
  *   <figure>
@@ -72,21 +72,22 @@ const BORDER_WIDTH = 2;
  *
  * export default class MyComponent extends React.Component {
  *   state = {
- *     checked: 'firstOption',
+ *     checked: 'first',
  *   };
  *
  *   render() {
  *     const { checked } = this.state;
+ *
  *     return (
  *       <View>
  *         <RadioButton
- *           value="firstOption"
- *           checked={checked === 'firstOption'}
+ *           value="first"
+ *           checked={checked === 'first'}
  *           onPress={() => { this.setState({ checked: 'firstOption' }); }}
  *         />
  *         <RadioButton
- *           value="secondOption"
- *           checked={checked === 'secondOption'}
+ *           value="second"
+ *           checked={checked === 'second'}
  *           onPress={() => { this.setState({ checked: 'secondOption' }); }}
  *         />
  *       </View>
@@ -123,7 +124,7 @@ class RadioButton extends React.Component<Props, State> {
 
   render() {
     return (
-      <RadioGroupContext.Consumer>
+      <RadioButtonContext.Consumer>
         {context => {
           const { disabled, onPress, theme, ...rest } = this.props;
           const checkedColor = this.props.color || theme.colors.accent;
@@ -191,7 +192,7 @@ class RadioButton extends React.Component<Props, State> {
             </TouchableRipple>
           );
         }}
-      </RadioGroupContext.Consumer>
+      </RadioButtonContext.Consumer>
     );
   }
 }

src/components/RadioButtonGroup.js

@@ -5,31 +5,36 @@ import createReactContext, { type Context } from 'create-react-context';
 
 type Props = {
   /**
-   * React elements containing radio buttons
-   */
-  children: React.Node,
-  /**
-   * Function to execute on selection change
+   * Function to execute on selection change.
    */
   onValueChange: (value: string) => mixed,
   /**
-   * Value of currently selected Radio
+   * Value of the currently selected radio button.
    */
   value: string,
+  /**
+   * React elements containing radio buttons.
+   */
+  children: React.Node,
 };
 
-type RadioContext = {
+type RadioButtonContextType = {
   value: string,
   onValueChange: (item: string) => mixed,
 };
 
+export const RadioButtonContext: Context<?RadioButtonContextType> = createReactContext(
+  null
+);
+
 /**
- * RadioGroup allows the selection of a single RadioButton
+ * Radio button group allows to control a group of radio buttons.
+ *
  * ## Usage
  * ```js
  * import * as React from 'react';
  * import { View } from 'react-native';
- * import { RadioGroup, RadioButton } from 'react-native-paper';
+ * import { RadioButtonGroup, RadioButton } from 'react-native-paper';
  *
  * export default class MyComponent extends Component {
  *   state = {
@@ -38,7 +43,7 @@ type RadioContext = {
  *
  *   render() {
  *     return(
- *       <RadioGroup
+ *       <RadioButtonGroup
  *         onValueChange={value => this.setState({ value })}
  *         value={this.state.value}
  *       >
@@ -50,29 +55,22 @@ type RadioContext = {
  *           <Text>Second</Text>
  *           <RadioButton value="second" />
  *         </View>
- *       </RadioGroup>
+ *       </RadioButtonGroup>
  *     )
  *   }
  * }
  *```
  */
-
-export const RadioGroupContext: Context<?RadioContext> = createReactContext(
-  null
-);
-
-class RadioGroup extends React.Component<Props> {
+class RadioButtonGroup extends React.Component<Props> {
   render() {
     const { value, onValueChange, children } = this.props;
 
     return (
-      <RadioGroupContext.Provider
-        value={{ value, onValueChange, passed: true }}
-      >
+      <RadioButtonContext.Provider value={{ value, onValueChange }}>
         {children}
-      </RadioGroupContext.Provider>
+      </RadioButtonContext.Provider>
     );
   }
 }
 
-export default RadioGroup;
+export default RadioButtonGroup;

src/index.js

@@ -32,7 +32,7 @@ export { default as Modal } from './components/Modal';
 export { default as Paper } from './components/Paper';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RadioButton } from './components/RadioButton';
-export { default as RadioGroup } from './components/RadioGroup';
+export { default as RadioButtonGroup } from './components/RadioButtonGroup';
 export { default as SearchBar } from './components/SearchBar';
 export { default as Switch } from './components/Switch';
 export { default as Toolbar } from './components/Toolbar/Toolbar';