u

code/app/app-rn4/src/components/layout/navbar.tsx

@@ -4,10 +4,12 @@ import { cn } from "@/utils/cn";
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
 import { Shadow } from "react-native-shadow-2";
 import { ChevronLeft, SlidersHorizontal, CirclePower, LucideIcon } from "lucide-react-native";
+import { ReactNode } from "react";
 
 interface NavbarProps {
   title?: string;
   titleIcon?: LucideIcon;
+  renderTitle?: () => ReactNode;
 
   showBack?: boolean;
   onBack?: () => void;
@@ -23,6 +25,7 @@ const AnimatedView = Animated.View;
 export default function Navbar({
   title,
   titleIcon,
+  renderTitle,
   showBack = true,
   onBack,
   onClose,
@@ -87,48 +90,31 @@ export default function Navbar({
           </Pressable>
         )}
 
-        {title && (
-          <Shadow
-            distance={20}
-            startColor="rgba(248,248,248,1)"
-            endColor="rgba(248,248,248,0)"
-            offset={[0, 0]}
-            paintInside={false}
-            safeRender
-            style={{
-              ...styles.titleShadown,
-              alignContent: "center",
-              justifyContent: "center",
-              maxWidth: 180,
-              gap: 4,
-            }}
-          >
-            {TitleIcon && <TitleIcon size={18} color="#000" />}
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={{
-                fontSize: 18,
-                fontWeight: "600",
-                color: "#111",
-              }}
-            >
-              {title}
-            </Text>
-          </Shadow>
+        {(renderTitle || title) && (
+          <View className="gap-2 shadow-2xl " style={styles.titleShadown}>
+            {renderTitle ? (
+              renderTitle()
+            ) : (
+              <>
+                {TitleIcon && <TitleIcon size={18} color="#000" />}
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={{
+                    fontSize: 18,
+                    fontWeight: "600",
+                    color: "#111",
+                  }}
+                >
+                  {title}
+                </Text>
+              </>
+            )}
+          </View>
         )}
       </View>
 
-      <Shadow
-        distance={20}
-        startColor="rgba(248,248,248,1)"
-        endColor="rgba(248,248,248,0)"
-        offset={[0, 0]}
-        paintInside={false}
-        safeRender
-        style={styles.groupShadow}
-      >
-        
+      <View style={styles.groupShadow} className="shadow-2xl">
         <Pressable
           onPressIn={() => {
             leftScale.value = withSpring(0.8);
@@ -143,7 +129,7 @@ export default function Navbar({
         </Pressable>
 
         <View className="w-px h-4 bg-black/10" />
-        
+
         <Pressable
           onPress={onClose}
           onPressIn={() => {
@@ -157,7 +143,7 @@ export default function Navbar({
             <CirclePower size={20} />
           </AnimatedView>
         </Pressable>
-      </Shadow>
+      </View>
     </View>
   );
 }