innerBackgroundColor prop is added

Author: kuraydev

README.md

@@ -58,11 +58,12 @@ You can check the example out 😏
 
 # Configuration - Props
 
-| Property       |   Type   | Default | Description                                     |
-| -------------- | :------: | :-----: | ----------------------------------------------- |
-| style          |  style   | default | set the main container's style (outer circle)   |
-| innerContainer |  style   | default | set the inner container's style (inner circle)  |
-| onPress        | function | default | set your own function when onPress is triggered |
+| Property             |   Type   | Default | Description                                     |
+| -------------------- | :------: | :-----: | ----------------------------------------------- |
+| style                |  style   | default | set the main container's style (outer circle)   |
+| innerContainerStyle  |  style   | default | set the inner container's style (inner circle)  |
+| innerBackgroundColor |  color   |   red   | change the inner circle's background color      |
+| onPress              | function | default | set your own function when onPress is triggered |
 
 ## Future Plans
 

example/App.tsx

@@ -13,6 +13,14 @@ const App = () => {
       <RadioButton
         onPress={(isActive: boolean) => console.log("isActive: ", isActive)}
       />
+      <RadioButton
+        style={{ borderColor: "#019310" }}
+        innerContainer={{ backgroundColor: "#019310" }}
+        onPress={(isActive: boolean) => console.log("isActive: ", isActive)}
+      />
+      <RadioButton
+        onPress={(isActive: boolean) => console.log("isActive: ", isActive)}
+      />
     </SafeAreaView>
   );
 };

example/package-lock.json

@@ -13,7 +13,7 @@
     "@freakycoder/react-native-bounceable": "^0.2.5",
     "react": "17.0.1",
     "react-native": "0.64.1",
-    "react-native-animated-radio-button": "^2.0.0"
+    "react-native-animated-radio-button": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

example/package.json

@@ -4,11 +4,14 @@ interface Style {
   container: ViewStyle;
 }
 
-export const _innerStyle = (isActive: boolean): ViewStyle => ({
+export const _innerStyle = (
+  isActive: boolean,
+  innerBackgroundColor: string,
+): ViewStyle => ({
   width: 30,
   height: 30,
   borderRadius: 25,
-  backgroundColor: isActive ? "red" : "transparent",
+  backgroundColor: isActive ? innerBackgroundColor : "transparent",
 });
 
 export default StyleSheet.create<Style>({

lib/RadioButton.style.ts

@@ -10,7 +10,8 @@ type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
 
 interface IRadioButtonProps {
   style?: CustomStyleProp;
-  innerContainer?: CustomStyleProp;
+  innerContainerStyle?: CustomStyleProp;
+  innerBackgroundColor?: string;
   onPress: (isActive: boolean) => void;
 }
 
@@ -36,13 +37,22 @@ export default class RadioButton extends React.Component<
   };
 
   render() {
-    const { style, innerContainer } = this.props;
+    const {
+      style,
+      innerContainerStyle,
+      innerBackgroundColor = "red",
+    } = this.props;
     return (
       <RNBounceable
         style={[styles.container, style]}
         onPress={this.handlePress}
       >
-        <View style={[_innerStyle(this.state.isActive), innerContainer]} />
+        <View
+          style={[
+            _innerStyle(this.state.isActive, innerBackgroundColor),
+            innerContainerStyle,
+          ]}
+        />
       </RNBounceable>
     );
   }

lib/RadioButton.tsx

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