update

src/components/NavigateHeader.js

@@ -2,14 +2,16 @@ import { Image, Pressable, View } from "react-native";
 import { Motion } from "@legendapp/motion";
 
 import { icons } from "../assets";
-import { Fonts, gutters, Style } from "../styles";
+import { Fonts, gutters, Palette, Style } from "../styles";
 import { goBack } from "../navigation/NavigationService";
+import { FONT_FAMILY } from "../styles/Fonts";
 
 export default ({
   title = "",
   rightComponent = null,
   onBackPressed = null,
   containerStyle = {},
+  headerTitleStyle = {},
 }) => {
   return (
     <View
@@ -18,47 +20,50 @@ export default ({
         {
           alignItems: "flex-start",
           marginBottom: gutters / 2,
+          paddingTop: 10,
           ...containerStyle,
         },
       ]}
     >
-      <Pressable onPress={() => onBackPressed?.() || goBack()}>
-        <Image
-          source={icons.arrowRight}
-          style={[Style.iconDefault, Style.mirrorHorizontal]}
-        />
-      </Pressable>
+      <View style={{ flex: 1 }}>
+        <Pressable onPress={() => onBackPressed?.() || goBack()}>
+          <Image
+            source={icons.chevronDown}
+            style={[
+              Style.iconSmall,
+              Style.mirrorHorizontal,
+              { transform: [{ rotate: "90deg" }] },
+            ]}
+            resizeMode="contain"
+          />
+        </Pressable>
+      </View>
 
-      {typeof title === "function" ? (
-        title()
-      ) : title?.length > 0 ? (
-        <Motion.Text
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0.2 }}
-          transition={{
-            default: {
-              type: "spring",
-            },
-            opacity: {
-              type: "timing",
-            },
-          }}
-          style={Fonts({
-            type: "navigationTitle",
-            style: {
-              fontSize:
-                title.length > 15
-                  ? Fonts({ type: "section" }).fontSize
-                  : Fonts({ type: "navigationTitle" }).fontSize,
-            },
-          })}
-        >
-          {title}
-        </Motion.Text>
-      ) : null}
+      <Motion.Text
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0.2 }}
+        transition={{
+          default: {
+            type: "spring",
+          },
+          opacity: {
+            type: "timing",
+          },
+        }}
+        style={{
+          fontSize: 16,
+          color: Palette.white,
+          fontFamily: FONT_FAMILY.InterRegular,
+          ...headerTitleStyle,
+        }}
+      >
+        {title}
+      </Motion.Text>
 
-      <View>{rightComponent?.() || null}</View>
+      <View style={{ flex: 1, alignItems: "flex-end" }}>
+        {rightComponent?.() || null}
+      </View>
     </View>
   );
 };

src/components/SearchBar.js

@@ -6,7 +6,10 @@ import Style, { size } from "../styles/Style";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
-const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
+const SearchBar = ({
+  placeholder = "Que souhaites-tu écouter?",
+  textInputProps = {},
+}) => {
   return (
     <View style={{ borderRadius: 12, overflow: "hidden" }}>
       <BlurView
@@ -28,6 +31,7 @@ const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
             fontFamily: FONT_FAMILY.HelveticaNeueRegular,
             flex: 1,
           }}
+          {...textInputProps}
         />
       </BlurView>
     </View>