feat: 💅 added focus styles

#30
bitsongofficial · Jun 22, 2022 · 254c0e1 · 254c0e1
1 parent 0933295
commit 254c0e1
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/screens/Profile/components/atoms/Search.tsx b/screens/Profile/components/atoms/Search.tsx
@@ -8,19 +8,24 @@ type SearchProps = TextInputProps & {
   loupe?: boolean;
   bottomsheet?: boolean;
   Right?: JSX.Element;
+  isFocus?: boolean;
 };
 
 export default ({
   style,
   loupe = true,
   bottomsheet = true,
   Right,
+  isFocus,
   ...props
 }: SearchProps) => {
   const Input = bottomsheet ? BottomSheetTextInput : TextInput;
+  console.log("isFocus", isFocus);
 
   return (
-    <View style={[styles.container, style]}>
+    <View
+      style={[styles.container, isFocus && styles.container_focused, style]}
+    >
       <Input
         style={styles.input}
         placeholderTextColor={hexAlpha(COLOR.White, 50)}
@@ -49,6 +54,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     paddingLeft: 25,
   },
+  container_focused: {
+    borderWidth: 2,
+    borderColor: COLOR.Marengo,
+  },
   input: {
     flex: 1,
     color: COLOR.White,