Add dot when active

components/cycle-day/radio-button-group.js

@@ -12,10 +12,8 @@ export default class RadioButton extends Component {
       <View style={styles.radioButtonGroup}>
         {
           this.props.buttons.map(({ label, value }) => {
+            const isActive = value === this.props.active
             const circleStyle = [styles.radioButton]
-            if (value === this.props.active) {
-              circleStyle.push(styles.radioButtonActive)
-            }
             return (
               <TouchableOpacity
                 onPress={() => this.props.onSelect(value)}
@@ -23,7 +21,10 @@ export default class RadioButton extends Component {
                 activeOpacity={1}
               >
                 <View style={styles.radioButtonTextGroup}>
-                  <View style={circleStyle} />
+                  <View style={circleStyle}>
+                    {isActive ?
+                      <View style={styles.radioButtonActiveDot}/> : null}
+                  </View>
                   <Text>{label}</Text>
                 </View>
               </TouchableOpacity>

styles/index.js

@@ -209,17 +209,21 @@ export default StyleSheet.create({
     marginVertical: 10,
   },
   radioButton: {
-    width: 30,
-    height: 30,
+    width: 20,
+    height: 20,
     borderRadius: 100,
     borderStyle: 'solid',
     borderWidth: 2,
     borderColor: secondaryColor,
-    marginBottom: 5
+    marginBottom: 5,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  radioButtonActive: {
-    backgroundColor: secondaryColor,
-    color: fontOnPrimaryColor
+  radioButtonActiveDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 100,
+    backgroundColor: secondaryColor
   },
   radioButtonGroup: {
     flexDirection: 'row',