npm - fln-espranza - Versions diffs - 1.1.19 → 1.1.21 - Mend

fln-espranza 1.1.19 → 1.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/components/PageHeader.tsx +50 -71
package/components/SecondaryBaseLayout.tsx +32 -52
package/package.json +1 -1

package/components/PageHeader.tsx CHANGED Viewed

@@ -1,15 +1,11 @@
-import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
+import { View, Animated, TouchableOpacity } from "react-native";
 import React, { JSX, useEffect, useRef } from "react";
 import tw from "../lib/tailwind";
 import { useNavigation } from "@react-navigation/native";
 import EText from "./EText";
-import Constants from "expo-constants";
 import EIconArrowLeft from "./icons/EIconArrowLeft";
 import EIconMenu from "./icons/EIconMenu";
-const SCREEN_WIDTH = Dimensions.get("window").width;
-const HEADER_HEIGHT = 90;
 interface PageHeaderProps {
   title: string;
   subtitle?: string;
@@ -27,96 +23,79 @@ export default function PageHeader({
   curved,
   children,
   iconEnd,
-  border,
   menuButton,
   hideBackBtn,
 }: PageHeaderProps) {
   const navigation = useNavigation();
-  const translateX = useRef(new Animated.Value(60)).current;
+  const translateY = useRef(new Animated.Value(-20)).current;
   const opacity = useRef(new Animated.Value(0)).current;
   useEffect(() => {
-    Animated.spring(translateX, {
-      toValue: 0,
-      stiffness: 40,
-      damping: 10,
-      useNativeDriver: true,
-    }).start();
-    Animated.spring(opacity, {
-      toValue: 1,
-      delay: 250,
-      useNativeDriver: true,
-    }).start();
-  });
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        stiffness: 120,
+        damping: 14,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []); // ✅ RUN ONCE ONLY
   return (
-    // <View
-    //   style={[
-    //     tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `,
-    //     {},
-    //   ]}
-    // >
-    <View style={tw`overflow-hidden`}>
-      <View
-        style={[
-          tw`flex-row items-center px-3`,
-          {
-            paddingTop: Constants.statusBarHeight + 8,
-          },
-        ]}
-      >
+    <Animated.View
+      style={[
+        tw`bg-white`,
+        {
+          opacity,
+          transform: [{ translateY }],
+        },
+      ]}
+    >
+      <View style={tw`flex-row items-center px-4 py-3`}>
         {/* LEFT ICON */}
-        {hideBackBtn ? (
-          <></>
-        ) : (
-          <View style={[tw``]}>
+        {!hideBackBtn && (
+          <TouchableOpacity
+            activeOpacity={0.6}
+            onPress={
+              menuButton
+                ? () => navigation.openDrawer()
+                : () => navigation.goBack()
+            }
+            style={tw`p-1`}
+          >
             {menuButton ? (
-              <TouchableOpacity
-                activeOpacity={0.6}
-                onPress={() => navigation?.openDrawer()}
-              >
-                <EIconMenu size={24} style={tw`text-slate-800`} />
-              </TouchableOpacity>
+              <EIconMenu size={24} style={tw`text-slate-800`} />
             ) : (
-              <TouchableOpacity
-                activeOpacity={0.6}
-                onPress={() => navigation.goBack()}
-                style={tw`p-1`}
-              >
-                <EIconArrowLeft
-                  iconColor={curved ? "white" : "tint-slate-900"}
-                  size={24}
-                  style={tw`text-slate-800`}
-                />
-              </TouchableOpacity>
+              <EIconArrowLeft size={24} style={tw`text-slate-800`} />
             )}
-          </View>
+          </TouchableOpacity>
         )}
         {/* TITLE */}
-        <View style={tw`flex-1 items-start px-3`}>
+        <View style={tw`flex-1 px-3`}>
           <EText
             size="base"
-            style={tw.style("text-slate-700 font-bold")}
             numberOfLines={1}
+            style={tw`font-bold text-slate-800`}
           >
             {title}
           </EText>
-          {subtitle ? (
-            <EText
-              style={tw.style(
-                "text-slate-700 opacity-40 font-semibold mt-0.25"
-              )}
-            >
-              {subtitle}
-            </EText>
-          ) : null}
+          {subtitle && (
+            <EText style={tw`text-xs text-slate-400 mt-0.5`}>{subtitle}</EText>
+          )}
         </View>
         {/* RIGHT ICON */}
-        {iconEnd ? <View style={[tw``, {}]}>{iconEnd}</View> : null}
+        {iconEnd && <View>{iconEnd}</View>}
       </View>
-      {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
-    </View>
-    // </View>
+      {children && <View style={tw`pb-4`}>{children}</View>}
+    </Animated.View>
   );
 }

package/components/SecondaryBaseLayout.tsx CHANGED Viewed

@@ -1,16 +1,12 @@
-import { View, Dimensions, ScrollView, Platform } from "react-native";
 import React, { JSX } from "react";
+import { View, ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import tw from "../lib/tailwind";
 import { StatusBar } from "expo-status-bar";
+import tw from "../lib/tailwind";
 import { PageHeader } from ".";
-import Constants from "expo-constants";
-import { useNavigation } from "@react-navigation/native";
-const SCREEN_WIDTH = Dimensions.get("window").width;
-const SCREEN_HEIGHT = Dimensions.get("window").height;
-const HEADER_HEIGHT = Constants.statusBarHeight + 60;
-const SCROLL_PADDING_BOTTOM = 100;
+const HEADER_HEIGHT = 72;
+const SCROLL_PADDING_BOTTOM = 120;
 interface BaseLayoutProps {
   title: string;
@@ -23,7 +19,6 @@ interface BaseLayoutProps {
   bottomButton?: JSX.Element;
   border?: boolean;
   menuButton?: boolean;
-  paddingTop?: number;
   hideBackBtn?: boolean;
   scrollViewRef?: any;
 }
@@ -39,78 +34,63 @@ export default function SecondaryBaseLayout({
   bottomButton,
   border,
   menuButton,
-  paddingTop,
   hideBackBtn,
   scrollViewRef,
 }: BaseLayoutProps) {
   const insets = useSafeAreaInsets();
-  const navigation = useNavigation();
+  const topOffset = insets.top + HEADER_HEIGHT;
   return (
-    <View
-      style={[
-        tw`flex-1 bg-white`,
-        {
-          paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
-          paddingTop:
-            Platform.OS === "ios"
-              ? paddingTop
-                ? paddingTop
-                : 44
-              : paddingTop
-              ? paddingTop
-              : 24,
-        },
-      ]}
-    >
-      <StatusBar style="dark" animated />
+    <View style={tw`flex-1 bg-white`}>
+      <StatusBar style="dark" />
-      {/* HEADER */}
+      {/* FIXED HEADER */}
       <View
         style={[
-          tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white  ${
-            title ? "mb-1" : "pb-0"
-          }`,
+          tw`absolute top-0 left-0 right-0 z-50 bg-white`,
+          { paddingTop: insets.top },
         ]}
       >
         <PageHeader
-          border={border}
           title={title}
           subtitle={subtitle}
           curved={curved}
           iconEnd={iconEnd}
+          border={border}
           menuButton={menuButton}
           hideBackBtn={hideBackBtn}
         >
           {headerContent}
         </PageHeader>
       </View>
-      <ScrollView
-        ref={scrollViewRef}
-        style={[
-          tw`flex-1`,
-          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 58 },
-        ]}
-        showsVerticalScrollIndicator={false}
-        decelerationRate={"fast"}
-        contentContainerStyle={{
-          paddingBottom: SCROLL_PADDING_BOTTOM,
-        }}
-      >
-        {children}
-      </ScrollView>
-      {bottomButton ? (
+      {/* CONTENT */}
+      {noScroll ? (
+        <View style={{ marginTop: topOffset, flex: 1 }}>{children}</View>
+      ) : (
+        <ScrollView
+          ref={scrollViewRef}
+          contentContainerStyle={{
+            paddingTop: topOffset,
+            paddingBottom: SCROLL_PADDING_BOTTOM,
+          }}
+          showsVerticalScrollIndicator={false}
+        >
+          {children}
+        </ScrollView>
+      )}
+      {/* FIXED BOTTOM BUTTON */}
+      {bottomButton && (
         <View
           style={[
-            tw` px-4 `,
-            { paddingBottom: Platform.OS === "android" ? 8 : 0 },
+            tw`absolute left-0 right-0 bg-white px-4 pt-3`,
+            { bottom: insets.bottom },
           ]}
         >
           {bottomButton}
         </View>
-      ) : (
-        <></>
       )}
     </View>
   );

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {