Merge pull request #6 from sevvaleygul0/master

The feature to add images to checkbox has been added

Author: WrathChaos

example/App.js

@@ -10,7 +10,7 @@ const App = () => {
         style={{
           flex: 1,
           alignItems: "center",
-          justifyContent: "center"
+          justifyContent: "center",
         }}
       >
         <RadioButton
@@ -30,6 +30,7 @@ const App = () => {
             isBounceable={false}
             animation={"bounceIn"}
             onPress={() => console.log("RadioButton is pressed")}
+            disableText={true}
           />
         </View>
         <View style={{ marginTop: 16 }}>
@@ -41,6 +42,7 @@ const App = () => {
             outerColor="#6a29d9"
             animation={"bounceIn"}
             onPress={() => console.log("RadioButton is pressed")}
+            disableImage={true}
           />
         </View>
       </SafeAreaView>

example/ios/Podfile.lock

@@ -250,7 +250,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -335,4 +335,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 79310af6b976c356911a8a833e9b99c3399fdda3
 
-COCOAPODS: 1.7.4
+COCOAPODS: 1.9.3

lib/src/RadioButton.js

@@ -1,22 +1,22 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Animated, Easing, Text, TouchableOpacity } from "react-native";
+import { Animated, Easing, Text, TouchableOpacity, Image } from "react-native";
 import { View } from "react-native-animatable";
 import styles, {
   textStyle,
   innerStyle,
   outerStyle,
   isHorizontal,
   textContainer,
-  transformStyle
+  transformStyle,
 } from "./RadioButton.style";
 
 export default class RadioButton extends Component {
   constructor(props) {
     super(props);
     this.state = {
       _isSelected: this.props.isSelected,
-      springValue: new Animated.Value(1)
+      springValue: new Animated.Value(1),
     };
   }
 
@@ -34,7 +34,7 @@ export default class RadioButton extends Component {
     springValue.setValue(0.7);
     Animated.spring(springValue, {
       toValue: 1,
-      friction: 5
+      friction: 5,
     }).start();
   };
 
@@ -49,7 +49,11 @@ export default class RadioButton extends Component {
       innerColor,
       outerColor,
       disableText,
-      disableBuiltinStateManagement
+      disableBuiltinStateManagement,
+      imageSource,
+      imageStyle,
+      disableImage,
+      ImageComponent = Image,
     } = this.props;
     const { springValue, _isSelected } = this.state;
 
@@ -66,20 +70,26 @@ export default class RadioButton extends Component {
           style={[
             outerStyle(size, outerColor),
             transformStyle(springValue),
-            styles.center
+            styles.center,
           ]}
         >
           {stateManagement ? (
             <View style={innerStyle(size, innerColor)} {...this.props} />
           ) : null}
         </Animated.View>
-        {disableText || (
-          <View style={textContainer(horizontal)}>
+        <View style={textContainer(horizontal)}>
+          {!disableImage && (
+            <ImageComponent
+              style={imageStyle || styles.imageStyle}
+              source={imageSource}
+            />
+          )}
+          {!disableText && (
             <Text style={textStyle(textColor, innerColor, fontSize)}>
               {text}
             </Text>
-          </View>
-        )}
+          )}
+        </View>
       </TouchableOpacity>
     );
   }
@@ -95,7 +105,7 @@ RadioButton.propTypes = {
   disableText: PropTypes.bool,
   isBounceable: PropTypes.bool,
   innerColor: PropTypes.string,
-  outerColor: PropTypes.string
+  outerColor: PropTypes.string,
 };
 
 RadioButton.defaultProps = {
@@ -108,5 +118,5 @@ RadioButton.defaultProps = {
   onPress: () => null,
   text: "Radio Button",
   innerColor: "dodgerblue",
-  outerColor: "dodgerblue"
+  outerColor: "dodgerblue",
 };

lib/src/RadioButton.style.js

@@ -35,10 +35,19 @@ export const textStyle = (textColor, innerColor, fontSize) => ({
 export const textContainer = (horizontal) => ({
   marginTop: horizontal ? 8 : 0,
   marginLeft: horizontal ? 0 : 8,
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: "center",
 });
 
 export default {
   center: {
     alignItems: "center",
   },
+  imageStyle: {
+    width: 35,
+    height: 35,
+    marginRight: 8,
+    marginLeft: 4,
+  },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-animated-radio-button",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Fully customizable animated radio button for React Native",
   "keywords": [
     "bouncy",