Merge pull request #436 from shravyaramesh/tma853-tag-selection-screen

[TMA-853] Tag selection screen

1 files changed, 53 insertions, 0 deletions

diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx
new file mode 100644
index 00000000..3cc2780c
--- /dev/null
+++ b/src/components/common/TaggRadioButton.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {RADIO_BUTTON_GREY, TAGG_LIGHT_BLUE_2} from '../../constants/constants';
+
+interface TaggRadioButtonProps {
+  pressed: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+}
+const TaggRadioButton: React.FC<TaggRadioButtonProps> = ({
+  pressed,
+  onPress,
+}) => {
+  const activeOuterStyle = {
+    borderColor: pressed ? TAGG_LIGHT_BLUE_2 : RADIO_BUTTON_GREY,
+  };
+
+  const activeInnerStyle = {
+    backgroundColor: pressed ? TAGG_LIGHT_BLUE_2 : 'white',
+  };
+  return (
+    <TouchableOpacity
+      style={[styles.outer, activeOuterStyle]}
+      onPress={onPress}>
+      {pressed && <View style={[styles.inner, activeInnerStyle]} />}
+    </TouchableOpacity>
+  );
+};
+
+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,
+  },
+});
+
+export default TaggRadioButton;