fln-espranza 0.0.21 → 0.0.23

package/components/EEmptyPlaceholder.tsx

@@ -13,7 +13,7 @@ export default function EEmptyPlaceholder( { text }: IProps) {
   return (
     <View style={tw`flex justify-center items-center`}>
         <ImageBackground source={require("../assets/images/empty.png")} style={{width: 200, height: 200}} />
-        <EText size="lg" style={tw`text-center text-gray-500 mt-5`}>
+        <EText style={tw`text-center text-gray-800 mt-5`}>
             {text}
         </EText>
     </View>

package/components/EInfoBox.tsx

@@ -22,7 +22,7 @@ export default function InfoBox({
   childTextColor,
 }: InfoBoxProps) {
   return (
-    <View style={[tw.style("rounded-lg"), style]}>
+    <View style={[tw.style("rounded-lg bg-orange-500/10 p-3"), style]}>
       <View style={tw`flex-row`}>
         <View style={tw`w-5 h-5 mr-1`}>{icon}</View>
         <View style={tw`flex-1`}>
@@ -31,7 +31,7 @@ export default function InfoBox({
               {title}
             </EText>
           ) : null}
-          <EText size="xs" style={[tw`font-medium`, {color: childTextColor}]}>
+          <EText size="xs" style={[tw`opacity-60`, {color: childTextColor}]}>
             {children}
           </EText>
         </View>

package/components/PageHeader.tsx

@@ -4,7 +4,8 @@ import tw from "../lib/tailwind";
 import { useNavigation } from "@react-navigation/native";
 import EText from "./EText";
 import Constants from "expo-constants";
-import { EIconArrowLeft, EIconMenu } from "fln-espranza";
+import EIconArrowLeft from "./icons/EIconArrowLeft";
+import EIconMenu from "./icons/EIconMenu";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const HEADER_HEIGHT = 90;

package/components/ProfileHeader.tsx

@@ -0,0 +1,85 @@
+import { useNavigation } from "@react-navigation/native";
+import React, { useRef } from "react";
+import { Animated, ImageBackground, View } from "react-native";
+import EButtonIcon from "./EButtonIcon";
+import Avatar from "./Avatar";
+import EText from "./EText";
+import tw from "../../../lib/tailwind";
+import Constants from "expo-constants";
+
+interface IProps {
+  name: string;
+  titleText?: string;
+  title: string;
+}
+
+export default function ProfileHeader({ name, title, titleText }: IProps) {
+  const translateX = useRef(new Animated.Value(60)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    Animated.spring(translateX, {
+      toValue: 0,
+      stiffness: 40,
+      damping: 10,
+      useNativeDriver: true,
+    }).start();
+    Animated.spring(opacity, {
+      toValue: 1,
+      delay: 250,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  return (
+    <View style={tw`flex-1 overflow-hidden h-full`}>
+      <ImageBackground
+        style={[tw`h-full w-full`, {}]}
+        source={require("../assets/images/bg-profile.jpg")}
+      >
+        <Animated.View
+          style={[
+            tw`flex-row pr-4 pl-3 pb-3`,
+            {
+              paddingTop: Constants.statusBarHeight + 8,
+              transform: [{ translateX }],
+              opacity,
+            },
+          ]}
+        >
+          <Animated.View
+            style={[
+              tw`-mt-2 left-3 absolute `,
+              {
+                transform: [{ translateX }],
+                opacity,
+                paddingTop: Constants.statusBarHeight + 8,
+              },
+            ]}
+          >
+            <EButtonIcon
+              iconColor={"tint-white"}
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+          </Animated.View>
+        </Animated.View>
+        <View style={[tw`flex items-center mt-5 rounded-4xl `, {}]}>
+          <Avatar size="5xl" source={""} nameFirstLetter={name?.split("")[0]} />
+          <View style={tw`mt-6 mb-8 items-center`}>
+            <EText size="2xl" style={tw`font-bold text-white capitalize`}>
+              {name.toLocaleLowerCase().trim()}
+            </EText>
+            <EText
+              size="sm"
+              style={tw`mt-0.5 font-normal opacity-50 text-white`}
+            >
+              {titleText ? titleText : "Unique Code"} : {title}
+            </EText>
+          </View>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+}

package/components/ProfileScreenLayout.tsx

@@ -0,0 +1,110 @@
+import { Animated, ImageBackground, View } from "react-native";
+import tw from "../../lib/tailwind";
+import EButtonIcon from "./EButtonIcon";
+import EText from "./EText";
+import React, { useCallback, useRef } from "react";
+import Constants from "expo-constants";
+import { SCREEN_HEIGHT } from "@gorhom/bottom-sheet";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import ProfileHeader from "./ProfileHeader";
+
+
+interface IProps {
+    profileName: string;
+    titleText?: string;
+    uniqueCode: string;
+    body: JSX.Element;
+}
+
+export default function ProfileScreenLayout( { profileName, uniqueCode, body, titleText } : IProps) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const [headerScrolled, setHeaderScrolled] = React.useState(false);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    Animated.spring(scrollY, {
+      toValue: headerScrolled ? 0 : -100,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+
+    Animated.spring(opacity, {
+      toValue: headerScrolled ? 0.975 : 0,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+  }, [headerScrolled]);
+
+
+
+  return (
+    <View style={tw``}>
+      <StatusBar
+        style={"light"}
+        animated
+      />
+      <Animated.View
+        style={[
+          tw`absolute top-0 left-0 right-0 z-10`,
+          {
+            transform: [{ translateY: scrollY }],
+            opacity,
+          },
+        ]}
+      >
+        <ImageBackground
+          style={[tw`flex-1`, {}]}
+          source={require("../assets/images/bg-profile.jpg")}
+        >
+          <View
+            style={[
+              tw`flex-1 pl-3 pb-3 flex-row items-center `,
+              { paddingTop: Constants.statusBarHeight + 4 },
+            ]}
+          >
+            <EButtonIcon
+              iconColor={"white"}
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+            <EText size="lg" style={tw`text-white font-bold ml-2`}>
+              Profile
+            </EText>
+          </View>
+        </ImageBackground>
+      </Animated.View>
+
+      <Animated.ScrollView
+        onScroll={(event) => {
+          const scrolling = event.nativeEvent.contentOffset.y;
+          scrolling > 40 ? setHeaderScrolled(true) : setHeaderScrolled(false);
+        }}
+        style={[tw`flex-1 bg-white`, { minHeight: SCREEN_HEIGHT, paddingBottom: 100 }]}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: 100
+        }}
+      >
+
+        <ProfileHeader 
+          name={profileName?.trim() || ""}
+          title={uniqueCode || ""}
+          titleText={titleText ? titleText : "Unique Code"}
+        />
+
+        <View style={tw`px-4 mt-8 flex-1`}>
+            {body}
+        </View>
+
+      </Animated.ScrollView>
+    </View>
+  );
+}

package/package.json

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