fln-espranza 1.1.15 → 1.1.17

package/components/MenuItems.tsx

@@ -1,41 +1,46 @@
-import React from 'react'
-import { TouchableOpacity, View } from 'react-native'
-import { HomeIcon } from 'react-native-heroicons/solid'
-import tw from '../lib/tailwind'
-import { Colors } from '../utils/Color'
-import EText from './EText'
-
-interface IProps {
-    title?: string
-    icon?: JSX.Element
-    onPress?: () => void
-}
-
-export default function MenuItems( { title, icon, onPress }: IProps ) {
-    return (
-        <TouchableOpacity style={tw`flex-row items-center` } onPress={onPress}>
-            {/* <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> */}
-            {
-                icon ? 
-                icon
-                :
-                <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> 
-            }
-            <View style={[tw`py-4 ml-4 mr-8 w-[80%]`, {
-                borderBottomWidth: 1,
-                borderBottomColor: Colors.border,
-            }]}>
-                <EText size="sm" style={[tw`font-medium `, {
-                    color: Colors["text-primary"]
-                }]}>
-                    {
-                        title ?
-                        title
-                        :
-                        "Dashboard"
-                    }
-                    </EText>
-            </View>
-        </TouchableOpacity>
-    )
-}
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { HomeIcon } from "react-native-heroicons/solid";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
+
+interface IProps {
+  title?: string;
+  icon?: JSX.Element;
+  onPress?: () => void;
+}
+
+export default function MenuItems({ title, icon, onPress }: IProps) {
+  return (
+    <TouchableOpacity style={tw`flex-row items-center`} onPress={onPress}>
+      {/* <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> */}
+      {icon ? (
+        icon
+      ) : (
+        <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />
+      )}
+      <View
+        style={[
+          tw`py-4 ml-4 mr-8 w-[80%]`,
+          {
+            borderBottomWidth: 1,
+            borderBottomColor: Colors.border,
+          },
+        ]}
+      >
+        <EText
+          size="base"
+          style={[
+            tw`font-medium `,
+            {
+              color: Colors["text-primary"],
+            },
+          ]}
+        >
+          {title ? title : "Dashboard"}
+        </EText>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/components/PageHeader.tsx

@@ -50,16 +50,6 @@ export default function PageHeader({
   return (
     <View style={[tw`${curved ? "-mb-2" : ""} ${border ? "border-b border-slate-300" : ""} `, {}]}>
       <View style={tw`overflow-hidden`}>
-        {/* curved ? (
-          <Image
-            resizeMode="cover"
-            // source={require("../assets/images/bg-header.jpg")}
-            style={[
-              tw`absolute w-full h-full`,
-              { width: SCREEN_WIDTH, borderBottomRightRadius: 32 },
-            ]}
-          />
-          ) : null */}
         <Animated.View
           style={[
             tw`flex-row pr-4 pl-3 pb-3`,

package/components/ProgressBar.tsx

@@ -1,33 +1,33 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Animated,StyleSheet, View } from 'react-native';
-import tw from "../lib/tailwind";
-import { Colors } from "../utils/Color";
-
-interface IProps{
-    progress: number;
-}
-
-export default function ProgressBar( {progress}: IProps) {
-
-
-    const barWidth = useRef(new Animated.Value(0)).current;
-
-    useEffect(() => {
-        Animated.spring(barWidth, {
-            toValue: progress,
-            bounciness: 0,
-            speed: 7,
-            useNativeDriver: false,
-        }).start();
-    }, [progress]);
-    return (
-        <View style={[tw`h-2 w-14 bg-[${Colors['primary-light']}] overflow-hidden mr-2`, {
-            borderRadius: 40,
-        }]}>
-            <Animated.View
-                style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
-
-            />
-        </View>
-    )
-}
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated,StyleSheet, View } from 'react-native';
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+
+interface IProps{
+    progress: number;
+}
+
+export default function ProgressBar( {progress}: IProps) {
+
+
+    const barWidth = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.spring(barWidth, {
+            toValue: progress,
+            bounciness: 0,
+            speed: 7,
+            useNativeDriver: false,
+        }).start();
+    }, [progress]);
+    return (
+        <View style={[tw`h-2 w-14 bg-[${Colors['primary-light']}] overflow-hidden mr-2`, {
+            borderRadius: 40,
+        }]}>
+            <Animated.View
+                style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
+
+            />
+        </View>
+    )
+}

package/components/SecondaryBaseLayout.tsx

@@ -1,101 +1,120 @@
-import {
-  View,
-  ImageBackground,
-  Dimensions,
-  Animated,
-  ScrollView,
-  Platform,
-} from "react-native";
-import React, { useEffect, useRef, useState } from "react";
-import {
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import tw from "../lib/tailwind";
-import EText from "./EText";
-import { StatusBar } from "expo-status-bar";
-import { Container, EButton, EButtonIcon, PageHeader, PageHeaderSecondary } 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;
-
-interface BaseLayoutProps {
-  title: string;
-  subtitle?: string;
-  curved?: boolean;
-  headerContent?: JSX.Element;
-  children?: JSX.Element;
-  iconEnd?: JSX.Element;
-  noScroll?: boolean;
-  bottomButton?: JSX.Element;
-  border?: boolean;
-  menuButton?: boolean;
-}
-
-export default function SecondaryBaseLayout({
-  title,
-  subtitle,
-  curved,
-  headerContent,
-  children,
-  noScroll, iconEnd,
-  bottomButton,
-  border,
-  menuButton
-}: BaseLayoutProps) {
-  const insets = useSafeAreaInsets();
-
-  const navigation = useNavigation();
-
-  return (
-      <View style={[tw`flex-1 bg-white`, {}]}>
-      <StatusBar
-        style={Platform.OS === "android" ? "dark" : "light"}
-        animated
-      />
-
-      {/* HEADER */}
-      <View
-        style={[
-          tw`absolute top-0 right-0 left-0 pt-2 z-10 w-full bg-white  ${title ? 'mb-1' : 'pb-0'}`,
-          // {height: 64},
-        ]}
-      >
-        {/* <PageHeaderSecondary
-          title={title}
-          subtitle={subtitle}
-          button={
-            <EButtonIcon
-              type="close"
-              iconColor="slate-800"
-              onPress={() => navigation.goBack()}
-            />
-          }
-        /> */}
-         <PageHeader border={border} title={title} subtitle={subtitle} curved={curved} iconEnd={iconEnd} menuButton={menuButton}>
-          {headerContent}
-        </PageHeader>
-      </View>
-      <ScrollView
-        style={[
-          tw`flex-1`,
-          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 80 },
-        ]}
-        showsVerticalScrollIndicator={false}
-        decelerationRate={"fast"}
-        contentContainerStyle={{
-          paddingBottom: SCROLL_PADDING_BOTTOM,
-        }}
-      >
-        {children}
-      </ScrollView>
-      {bottomButton ? <View style={tw` px-4 mb-6 `}>
-        {bottomButton}
-      </View> : <></>}
-    </View>
-  );
-}
+import {
+  View,
+  ImageBackground,
+  Dimensions,
+  Animated,
+  ScrollView,
+  Platform,
+} from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { StatusBar } from "expo-status-bar";
+import {
+  Container,
+  EButton,
+  EButtonIcon,
+  PageHeader,
+  PageHeaderSecondary,
+} 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;
+
+interface BaseLayoutProps {
+  title: string;
+  subtitle?: string;
+  curved?: boolean;
+  headerContent?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+  iconEnd?: JSX.Element;
+  noScroll?: boolean;
+  bottomButton?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function SecondaryBaseLayout({
+  title,
+  subtitle,
+  curved,
+  headerContent,
+  children,
+  noScroll,
+  iconEnd,
+  bottomButton,
+  border,
+  menuButton,
+}: BaseLayoutProps) {
+  const insets = useSafeAreaInsets();
+
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={[
+        tw`flex-1 bg-white`,
+        {
+          paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
+          paddingTop: Platform.OS === "ios" ? 20 : 0,
+        },
+      ]}
+    >
+      <StatusBar style="dark" animated />
+
+      {/* HEADER */}
+      <View
+        style={[
+          tw`absolute top-0 right-0 left-0 pt-2 z-10 w-full bg-white  ${
+            title ? "mb-1" : "pb-0"
+          }`,
+        ]}
+      >
+        {/* <PageHeaderSecondary
+          title={title}
+          subtitle={subtitle}
+          button={
+            <EButtonIcon
+              type="close"
+              iconColor="slate-800"
+              onPress={() => navigation.goBack()}
+            />
+          }
+        /> */}
+        <PageHeader
+          border={border}
+          title={title}
+          subtitle={subtitle}
+          curved={curved}
+          iconEnd={iconEnd}
+          menuButton={menuButton}
+        >
+          {headerContent}
+        </PageHeader>
+      </View>
+      <ScrollView
+        style={[
+          tw`flex-1`,
+          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 80 },
+        ]}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: SCROLL_PADDING_BOTTOM,
+        }}
+      >
+        {children}
+      </ScrollView>
+      {bottomButton ? (
+        <View style={tw` px-4 mb-6 `}>{bottomButton}</View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}

package/components/Timer.tsx

@@ -1,57 +1,57 @@
-import React from "react";
-import { useState } from "react";
-import { TouchableOpacity } from "react-native";
-import tw from "../lib/tailwind";
-import { Colors } from "../utils/Color";
-import EText from "./EText";
-
-interface IProps {
-    time: number;
-    text: string;
-    subtext: string;
-    handleGetOTP: () => void;
-    sendOtp: boolean;
-    email: string;
-  }
-
-export default function Timer({ time, text, subtext, sendOtp, handleGetOTP,email }: IProps) {
-
-    const [timer, setTimer] = useState(time);
-    React.useEffect(() => {
-      setTimer(30);
-      return () => {
-        setTimer(0);
-      }
-    }, [sendOtp]);
-  
-    React.useEffect(() => {
-      timer > 0 &&
-        setTimeout(() => {
-          setTimer(timer - 1);
-        }, 1000);
-
-        return () => {
-          clearTimeout();
-        }
-    }, [timer]);
-
-    return(
-
-        <>
-       {timer > 0 ? <TouchableOpacity style={[tw`mt-2`, {}]}>
-            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
-            {timer > 0 && `${text}${timer >= 10 ? timer : "0" + timer}`}
-            </EText>
-        </TouchableOpacity> : 
-        <TouchableOpacity style={[tw`mt-2`, {}]} 
-            onPress={() =>  handleGetOTP()}
-        >
-            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
-            {subtext}
-            </EText>
-        </TouchableOpacity>
-        }
-        </>
-        
-    )
+import React from "react";
+import { useState } from "react";
+import { TouchableOpacity } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
+
+interface IProps {
+    time: number;
+    text: string;
+    subtext: string;
+    handleGetOTP: () => void;
+    sendOtp: boolean;
+    email: string;
+  }
+
+export default function Timer({ time, text, subtext, sendOtp, handleGetOTP,email }: IProps) {
+
+    const [timer, setTimer] = useState(time);
+    React.useEffect(() => {
+      setTimer(30);
+      return () => {
+        setTimer(0);
+      }
+    }, [sendOtp]);
+  
+    React.useEffect(() => {
+      timer > 0 &&
+        setTimeout(() => {
+          setTimer(timer - 1);
+        }, 1000);
+
+        return () => {
+          clearTimeout();
+        }
+    }, [timer]);
+
+    return(
+
+        <>
+       {timer > 0 ? <TouchableOpacity style={[tw`mt-2`, {}]}>
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {timer > 0 && `${text}${timer >= 10 ? timer : "0" + timer}`}
+            </EText>
+        </TouchableOpacity> : 
+        <TouchableOpacity style={[tw`mt-2`, {}]} 
+            onPress={() =>  handleGetOTP()}
+        >
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {subtext}
+            </EText>
+        </TouchableOpacity>
+        }
+        </>
+        
+    )
 }

package/package.json

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

package/utils/Color.ts

@@ -1,15 +1,15 @@
-export const Colors = {
-    "primary-base": '#218C74',
-    "primary-light": '#F4F9F8',
-    "secondary-base": '#3F3D84',
-    "secondary-light": '#F5F5F9',
-    "blue": '#0993BF',
-    "border": '#E0E6EC',
-    "warning": '#FFCB66',
-    "success": '#00BE9B',
-    "text-primary": '#2D3A5D',
-    "text-body": '#64748B',
-    "text-placeholder": '#CBD5E1',
-    "text-secondary": "#585F68",
-    "white": '#FFFFFF',
+export const Colors = {
+    "primary-base": '#218C74',
+    "primary-light": '#F4F9F8',
+    "secondary-base": '#3F3D84',
+    "secondary-light": '#F5F5F9',
+    "blue": '#0993BF',
+    "border": '#E0E6EC',
+    "warning": '#FFCB66',
+    "success": '#00BE9B',
+    "text-primary": '#2D3A5D',
+    "text-body": '#64748B',
+    "text-placeholder": '#CBD5E1',
+    "text-secondary": "#585F68",
+    "white": '#FFFFFF',
   };