feat(ui): Add modal for billing information

AppNavigator.js

@@ -4,8 +4,6 @@ import { NavigationContainer } from '@react-navigation/native';
 import NewScreen from './src/screens/HomeScreen';
 import ClientSearchScreen from './src/screens/ClientSearchScreen';
 import BillScreen from './src/screens/BillScreen'
-import { Animated, Easing } from 'react-native';
-import CascadingEffectScreen from './src/screens/CascadingEffectScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -14,7 +12,7 @@ function AppNavigator() {
     <NavigationContainer>
       <Stack.Navigator initialRouteName="NewScreen" 
         screenOptions={{
-        animationEnabled: false, // Desactivar animaciones de transición
+        animationEnabled: false,
       }}
       >
         <Stack.Screen 
@@ -32,13 +30,6 @@ function AppNavigator() {
           component={BillScreen} 
           options={{ headerShown: false }} 
         />
-        <Stack.Screen 
-            name='CascadingEffectScreen' 
-            component={CascadingEffectScreen} 
-            options={{
-                headerShown: false,
-            }} 
-        />
       </Stack.Navigator>
     </NavigationContainer>
   );

package.json

@@ -18,15 +18,16 @@
     "@react-navigation/native": "^6.1.14",
     "@react-navigation/native-stack": "^6.9.22",
     "date-fns": "^3.3.1",
+    "dotenv": "^16.4.5",
     "expo": "~50.0.7",
     "expo-app-loading": "^2.1.1",
-    "dotenv": "^16.4.5",
     "expo-config": "^1.0.0",
     "expo-dev-client": "~3.3.9",
     "expo-font": "^11.10.3",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-modal": "^13.0.1",
     "react-native-popup-menu": "^0.16.1",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-screens": "^3.29.0"

src/animation/CascadingFadeInView.js

@@ -51,12 +51,12 @@ export default CascadingFadeInView;
 // import { useFocusEffect } from '@react-navigation/native';
 
 
-// const [animationKey, setAnimationKey] = useState(Date.now());
-// useFocusEffect(
-// useCallback(() => {
-//     setAnimationKey(Date.now());
-// }, [])
-// );
+    // const [animationKey, setAnimationKey] = useState(Date.now());
+    // useFocusEffect(
+    // useCallback(() => {
+    //     setAnimationKey(Date.now());
+    // }, [])
+    // );
 
 {/* <Cascading delay={100} animationKey={animationKey}>
 </Cascading> */}

src/components/ProfileHeader.js

@@ -1,23 +1,52 @@
 // ProfileHeader.js
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { View, Text, TouchableOpacity} from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { useNavigation } from '@react-navigation/native';
 import {styles} from './styles/ProfileHeaderStyles';
-          import Cascading from '../animation/CascadingFadeInView';
-          import { useFocusEffect } from '@react-navigation/native';
-
+import Cascading from '../animation/CascadingFadeInView';
+import { useFocusEffect } from '@react-navigation/native';
+import Modal from '../modals/SimpleModal';
+import { StatusBar } from "expo-status-bar";
+import { theme } from "../../constants";
+secondary = theme.colors.secondary;
 const ProfileHeader = ({ userName }) => {
-          const [animationKey, setAnimationKey] = useState(Date.now());
-          useFocusEffect(
-            useCallback(() => {
-                setAnimationKey(Date.now());
-            }, [])
-          );
-
   const navigation = useNavigation();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [animationKey, setAnimationKey] = useState(Date.now());
+  const toggleModal = () => {
+    setModalVisible(!modalVisible);
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+        setAnimationKey(Date.now());
+    }, [])
+  );
+const [statusBarColor, setStatusBarColor] = useState('#84A1A7');
+const colorSteps = ['#B9E4EA','#AFD7DC', '#9DC1C6', '#89A8AC', '#7A969A', '#6D8689', '#647B7E', '#5F7477'];
+
+useEffect(() => {
+  let timers = [];
+
+  if (modalVisible) {
+    const interval = 30;
+    colorSteps.forEach((color, index) => {
+      let timer = setTimeout(() => {
+        setStatusBarColor(color);
+      }, interval * index);
+      timers.push(timer);
+    });
+  } else {
+    setStatusBarColor(theme.colors.secondary);
+  }
+  return () => timers.forEach(timer => clearTimeout(timer));
+}, [modalVisible, theme.colors.secondary]);
+
   return (
     <View style={styles.maxContainer}>
+    <StatusBar style="ligth" backgroundColor={statusBarColor} />
+    <Modal isVisible={modalVisible} onClose={toggleModal} />
       <Cascading delay={100} animationKey={animationKey}>
       <View style={styles.acountContainer}>
         <View style={styles.letter}>
@@ -35,7 +64,7 @@ const ProfileHeader = ({ userName }) => {
           <Icon name="money" size={40} color="black" />
           <Text style={styles.buttonText}>Cobranza</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.button}>
+        <TouchableOpacity style={styles.button} onPress={toggleModal}>
           <Icon name="list-alt" size={40} color="black" />
           <Text style={styles.buttonText}>Pedidos</Text>
         </TouchableOpacity>

src/modals/SimpleModal.js

@@ -0,0 +1,41 @@
+import React, {useState, useCallback} from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import Modal from 'react-native-modal';
+import { StatusBar } from "expo-status-bar";
+
+const SimpleModal = ({ isVisible, onClose }) => {
+  return (
+    <Modal
+      isVisible={isVisible}
+      onBackdropPress={onClose}
+      useNativeDriver={true}
+      backdropOpacity={0.5}
+      // backdropColor="#152432"
+    // animationIn="fadeIn"
+    // animationOut="fadeOut"
+      swipeDirection={['down', 'up']} // Permite deslizar hacia abajo y arriba para cerrar
+      onSwipeComplete={onClose} // Se llama cuando se completa el gesto de deslizamiento
+      propagateSwipe // Permite que los gestos de deslizamiento se propaguen a los hijos, útil para ScrollView dentro del modal
+    >
+      {/* <StatusBar style="ligth" backgroundColor='#84A1A7' /> */}
+      <View style={styles.modalContent}>
+        <Text>Contenido del modal</Text>
+        <Button title="Cerrar" onPress={onClose} />
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 4,
+    padding: 16,
+    alignItems: 'center',
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+});
+
+export default SimpleModal;

src/screens/BillScreen.js

@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: "center",
         paddingVertical: 20,
-        backgroundColor: theme.colors.primary,
+        backgroundColor: 'black',
     },
     receiptContainer: {
         flex: 1,

src/screens/HomeScreen.js

@@ -35,7 +35,7 @@ const NewScreen = () => {
 
   return (
     <SafeAreaView style={styles.safeArea}>
-      <StatusBar style="ligth" backgroundColor={secondary} />
+      {/* <StatusBar style="ligth" backgroundColor={secondary} /> */}
       <View style={styles.header}>
         <ProfileHeader userName="Jon Doe" />
         <Cascading delay={300} animationKey={animationKey}>