new: isActive and initial props are here. isActive is able to use for disable the built-in state

Author: kuraydev

README.md

@@ -74,13 +74,14 @@ You can check the example out 😏
 
 # Configuration - Props
 
-| 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      |
-| isActive             | boolean  |  false  | set the initial activation of the radio button  |
-| 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         |
+| initial              | boolean  | undefined | set the initial activation of the radio button     |
+| isActive             | boolean  | undefined | this will disable the built-in state of activation |
+| onPress              | function |  default  | set your own function when onPress is triggered    |
 
 ## Future Plans
 

example/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StatusBar, SafeAreaView, useColorScheme } from "react-native";
-import RadioButton from "react-native-animated-radio-button";
+// import RadioButton from "react-native-animated-radio-button";
+import RadioButton from "./lib/RadioButton";
 
 const App = () => {
   const isDarkMode = useColorScheme() === "dark";
@@ -32,6 +33,7 @@ const App = () => {
           borderWidth: 3,
           borderColor: "#328da8",
         }}
+        isActive={false}
         innerBackgroundColor="#328da8"
         innerContainerStyle={{ height: 35, width: 35, borderRadius: 10 }}
         onPress={(isActive: boolean) => console.log("isActive: ", isActive)}

example/lib/RadioButton.style.ts

@@ -0,0 +1,27 @@
+import { ViewStyle, StyleSheet } from "react-native";
+
+interface Style {
+  container: ViewStyle;
+}
+
+export const _innerStyle = (
+  isActive: boolean,
+  innerBackgroundColor: string,
+): ViewStyle => ({
+  width: 30,
+  height: 30,
+  borderRadius: 25,
+  backgroundColor: isActive ? innerBackgroundColor : "transparent",
+});
+
+export default StyleSheet.create<Style>({
+  container: {
+    width: 50,
+    height: 50,
+    borderWidth: 6,
+    borderRadius: 25,
+    borderColor: "red",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

example/lib/RadioButton.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { View, StyleProp, ViewStyle, Alert } from "react-native";
+import RNBounceable from "@freakycoder/react-native-bounceable";
+/**
+ * ? Local Imports
+ */
+import styles, { _innerStyle } from "./RadioButton.style";
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+
+export interface IRadioButtonProps {
+  style?: CustomStyleProp;
+  innerContainerStyle?: CustomStyleProp;
+  isActive?: boolean;
+  initial?: boolean;
+  innerBackgroundColor?: string;
+  onPress: (isActive: boolean) => void;
+}
+
+interface IState {
+  isActive: boolean;
+}
+
+export default class RadioButton extends React.Component<
+  IRadioButtonProps,
+  IState
+> {
+  constructor(props: IRadioButtonProps) {
+    super(props);
+    this.state = {
+      isActive: props.initial || false,
+    };
+  }
+
+  handlePress = () => {
+    const { isActive = undefined } = this.props;
+    if (isActive !== undefined && isActive !== null) {
+      this.props.onPress && this.props.onPress(isActive!);
+    } else {
+      this.setState({ isActive: !this.state.isActive }, () => {
+        this.props.onPress && this.props.onPress(this.state.isActive);
+      });
+    }
+  };
+
+  render() {
+    const {
+      style,
+      isActive = undefined,
+      innerContainerStyle,
+      innerBackgroundColor = "red",
+    } = this.props;
+    return (
+      <RNBounceable
+        style={[styles.container, style]}
+        onPress={this.handlePress}
+      >
+        <View
+          style={[
+            _innerStyle(isActive || this.state.isActive, innerBackgroundColor),
+            innerContainerStyle,
+          ]}
+        />
+      </RNBounceable>
+    );
+  }
+}

lib/RadioButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle, Alert } from "react-native";
 import RNBounceable from "@freakycoder/react-native-bounceable";
 /**
  * ? Local Imports
@@ -12,6 +12,7 @@ export interface IRadioButtonProps {
   style?: CustomStyleProp;
   innerContainerStyle?: CustomStyleProp;
   isActive?: boolean;
+  initial?: boolean;
   innerBackgroundColor?: string;
   onPress: (isActive: boolean) => void;
 }
@@ -27,19 +28,25 @@ export default class RadioButton extends React.Component<
   constructor(props: IRadioButtonProps) {
     super(props);
     this.state = {
-      isActive: props.isActive || false,
+      isActive: props.initial || false,
     };
   }
 
   handlePress = () => {
-    this.setState({ isActive: !this.state.isActive }, () => {
-      this.props.onPress && this.props.onPress(this.state.isActive);
-    });
+    const { isActive = undefined } = this.props;
+    if (isActive !== undefined && isActive !== null) {
+      this.props.onPress && this.props.onPress(isActive!);
+    } else {
+      this.setState({ isActive: !this.state.isActive }, () => {
+        this.props.onPress && this.props.onPress(this.state.isActive);
+      });
+    }
   };
 
   render() {
     const {
       style,
+      isActive = undefined,
       innerContainerStyle,
       innerBackgroundColor = "red",
     } = this.props;
@@ -50,7 +57,7 @@ export default class RadioButton extends React.Component<
       >
         <View
           style={[
-            _innerStyle(this.state.isActive, innerBackgroundColor),
+            _innerStyle(isActive || this.state.isActive, innerBackgroundColor),
             innerContainerStyle,
           ]}
         />

package.json

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