Add new radio button

1 files changed, 51 insertions, 0 deletions

diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx
new file mode 100644
index 00000000..bd48bd5c
--- /dev/null
+++ b/src/components/common/TaggRadioButton.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+
+interface TaggRadioButtonProps {
+  pressed: boolean;
+  setPressed: Function;
+  onPress: Function;
+}
+const TaggRadioButton: React.FC<TaggRadioButtonProps> = ({
+  pressed,
+  setPressed,
+  onPress,
+}) => {
+  const activeOuterStyle = {
+    borderColor: pressed ? '#6EE7E7' : '#BEBEBE',
+  };
+
+  const activeInnerStyle = {
+    backgroundColor: pressed ? '#6EE7E7' : 'white',
+  };
+  return (
+    <TouchableOpacity
+      style={[styles.outer, activeOuterStyle]}
+      onPress={() => {
+        setPressed(!pressed);
+        onPress();
+      }}>
+      {pressed && <View style={[styles.inner, activeInnerStyle]} />}
+    </TouchableOpacity>
+  );
+};
+
+export default TaggRadioButton;
+const styles = StyleSheet.create({
+  outer: {
+    width: 20,
+    height: 20,
+    borderWidth: 1.5,
+    borderRadius: 20,
+
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: 14,
+    height: 14,
+    borderRadius: 8,
+  },
+});