RadioButton support for rendering content on right (#889)

* Add "add" icon to our demo app

* Update TabController example screen

* RadioButton - add contentOnRight prop to control content position

Author: ethanshar

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -20,10 +20,10 @@ export default class RadioButtonScreen extends Component {
     };
   }
 
-  renderRadioButton(value, text) {
+  renderRadioButton(value, text, props) {
     return (
       <View row centerV marginB-5>
-        <RadioButton value={value} label={text}/>
+        <RadioButton value={value} label={text} {...props}/>
       </View>
     );
   }
@@ -71,10 +71,12 @@ export default class RadioButtonScreen extends Component {
 
             <RadioGroup marginT-30 initialValue={this.state.textSide} onValueChange={value => this.setState({textSide: value})}>
               <Text marginB-20 text60 dark10>
-                Select text side
+                Alignments
               </Text>
-              {this.renderRadioButtonWithImageAndText('right', 'Text on right')}
-              {this.renderRadioButtonWithImageAndText('left', 'Text on left', true)}
+              {this.renderRadioButtonWithImageAndText('right-icon', 'Text on right')}
+              {this.renderRadioButtonWithImageAndText('left-icon', 'Text on left', true)}
+              {this.renderRadioButton('left-content', 'Content on left', true)}
+              {this.renderRadioButton('right-content', 'Content on right', {contentOnRight: true})}
               <Text marginT-10>You chose: {this.state.textSide}</Text>
             </RadioGroup>
 

src/components/radioButton/RadioButton.tsx

@@ -72,7 +72,11 @@ export type RadioButtonPropTypes = RadioGroupContextPropTypes & ViewProps & {
    * Should the icon be on the right side of the label
    */
   iconOnRight?: boolean;
-}
+   /**
+     * Should the content be rendered right to the button
+     */
+    contentOnRight?: boolean;
+  };
 
 interface RadioButtonState {
   opacityAnimationValue: Animated.Value;
@@ -206,10 +210,10 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
   }
 
   renderLabel() {
-    const {label, labelStyle} = this.props;
+    const {label, labelStyle, contentOnRight} = this.props;
     return (
       label && (
-        <Text marginL-10 style={labelStyle}>
+        <Text marginL-10={!contentOnRight} marginR-10={contentOnRight} style={labelStyle}>
           {label}
         </Text>
       )
@@ -222,9 +226,24 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     return iconSource && <Image style={style} source={iconSource}/>;
   }
 
-  render() {
-    const {onPress, onValueChange, ...others} = this.props;
+  renderButton() {
     const {opacityAnimationValue, scaleAnimationValue} = this.state;
+
+    return (
+      <View style={this.getRadioButtonOutlineStyle()}>
+        <Animated.View
+          style={[
+            this.getRadioButtonInnerStyle(),
+            {opacity: opacityAnimationValue},
+            {transform: [{scale: scaleAnimationValue}]}
+          ]}
+        />
+      </View>
+    );
+  }
+
+  render() {
+    const {onPress, onValueChange, contentOnRight, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
 
     return (
@@ -234,21 +253,13 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         centerV
         activeOpacity={1}
         {...others}
-        style={undefined}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
       >
-        <View style={this.getRadioButtonOutlineStyle()}>
-          <Animated.View
-            style={[
-              this.getRadioButtonInnerStyle(),
-              {opacity: opacityAnimationValue},
-              {transform: [{scale: scaleAnimationValue}]}
-            ]}
-          />
-        </View>
+        {!contentOnRight && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}
+        {contentOnRight && this.renderButton()}
       </Container>
     );
   }