Adicionando moti

README.md

@@ -0,0 +1,36 @@
+![Top Language](https://img.shields.io/github/languages/top/Gusttavo-Larios/eFornecedores)
+![Repo Size](https://img.shields.io/github/repo-size/Gusttavo-Larios/eFornecedores)
+![GitHub Last Commit](https://img.shields.io/github/last-commit/Gusttavo-Larios/eFornecedores)
+
+# eFornecedores - APP
+
+![github](https://user-images.githubusercontent.com/72306241/166609047-00cbf9e7-c728-4ca5-9a98-613434feb67a.png)
+
+## 🎯Objetivo do Projeto
+
+Este projeto tem como objetivo praticar conhecimentos de desenvolvimento mobile desenvolvendo a interface de um CRUD de fornecedores.
+
+## 👨‍💻Tecnologias
+
+- Expo
+- React
+- Styled Components
+- Redux Toolkit
+
+## 💪Como Executar
+
+- Clone o repositório
+
+      git clone https://github.com/Gusttavo-Larios/eFornecedores.git
+
+- Instale as dependência
+
+      yarn
+
+- Crie um arquivo .env na raiz do projeto e sete a url da sua api
+
+      API_URL=url
+
+- Execute a aplicação
+
+      expo start

app.json

@@ -19,9 +19,6 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
       }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
     }
   }
 }

babel.config.js

@@ -16,6 +16,7 @@ module.exports = function (api) {
           path: ".env",
         },
       ],
+      "react-native-reanimated/plugin",
     ],
   };
 };

package.json

@@ -22,13 +22,16 @@
     "expo-app-loading": "~1.3.0",
     "expo-font": "~10.0.4",
     "expo-status-bar": "~1.2.0",
+    "expo-updates": "~0.11.7",
     "lottie-react-native": "5.0.1",
+    "moti": "^0.17.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-dotenv": "^3.3.1",
     "react-native-masked-text": "^1.13.0",
     "react-native-modal": "^13.0.1",
+    "react-native-reanimated": "~2.3.1",
     "react-native-responsive-dimensions": "^3.1.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",

source/components/AddButton/index.tsx

@@ -1,17 +1,23 @@
 import * as React from "react";
 import { Ionicons } from "@expo/vector-icons";
 import { responsiveFontSize } from "react-native-responsive-dimensions";
-import { Container } from "./styles";
+import { Button, Container } from "./styles";
 import { useNavigation } from "@react-navigation/native";
 
 function AddButton() {
   const navigation = useNavigation();
   return (
     <Container
-      activeOpacity={0.7}
-      onPress={() => navigation.navigate("Register" as never)}
+      from={{ translateY: 1000, opacity: 0 }}
+      animate={{ translateY: 0, opacity: 1 }}
+      transition={{ type: "timing", duration: 200, delay: 800 }}
     >
-      <Ionicons name="add-sharp" size={responsiveFontSize(7)} color="white" />
+      <Button
+        activeOpacity={0.7}
+        onPress={() => navigation.navigate("Register" as never)}
+      >
+        <Ionicons name="add-sharp" size={responsiveFontSize(7)} color="white" />
+      </Button>
     </Container>
   );
 }

source/components/AddButton/styles.ts

@@ -1,17 +1,21 @@
+import { MotiView } from "moti";
 import {
   responsiveFontSize,
   responsiveHeight,
   responsiveWidth,
 } from "react-native-responsive-dimensions";
 import styled from "styled-components/native";
 
-export const Container = styled.TouchableOpacity`
-  width: ${responsiveFontSize(8)}px;
-  height: ${responsiveFontSize(8)}px;
-  border-radius: ${responsiveFontSize(4)}px;
+export const Container = styled(MotiView)`
   position: absolute;
   right: ${responsiveWidth(4)}px;
   bottom: ${responsiveHeight(8)}px;
+`;
+
+export const Button = styled.TouchableOpacity`
+  width: ${responsiveFontSize(8)}px;
+  height: ${responsiveFontSize(8)}px;
+  border-radius: ${responsiveFontSize(4)}px;
   background-color: ${(props) => props.theme.COLORS.BLUE};
   align-items: center;
   justify-content: center;

source/components/Body/index.tsx

@@ -6,7 +6,26 @@ type BodyType = {
 };
 
 function Body({ children }: BodyType) {
-  return <Container>{children}</Container>;
+  const animation_configuration = {
+    start: {
+      opacity: 0,
+    },
+    end: {
+      opacity: 1,
+    },
+  };
+  return (
+    <Container
+      from={animation_configuration.start}
+      animate={animation_configuration.end}
+      transition={{
+        type: "timing",
+        duration: 500,
+      }}
+    >
+      {children}
+    </Container>
+  );
 }
 
 export default Body;

source/components/Body/styles.ts

@@ -1,6 +1,7 @@
 import styled from "styled-components/native";
+import { MotiSafeAreaView } from "moti";
 
-export const Container = styled.SafeAreaView`
+export const Container = styled(MotiSafeAreaView)`
   flex: 1;
   align-items: center;
   background-color: ${(props) => props.theme.COLORS.WHITE_100};

source/components/Supplier/index.tsx

@@ -3,7 +3,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useDispatch } from "react-redux";
 import SupplierInterface from "~/interfaces/supplier.interface";
 import { setSupplierReference } from "~/redux/reducers/supplier.slice";
-import { CnpjNumber, CompanyName, Container } from "./styles";
+import { Button, CnpjNumber, CompanyName, Container } from "./styles";
 import { cnpjMask } from "~/functions/masks";
 import { useLoading } from "~/hooks/useLoading";
 
@@ -25,9 +25,15 @@ function Supplier({ provider }: ProviderType) {
   }
 
   return (
-    <Container activeOpacity={0.5} onPress={() => navigator("Details")}>
-      <CompanyName>{company_name}</CompanyName>
-      <CnpjNumber>{cnpjMask(cnpj_number)}</CnpjNumber>
+    <Container
+      from={{ translateY: 1000, opacity: 0 }}
+      animate={{ translateY: 0, opacity: 1 }}
+      transition={{ type: "timing", duration: 500 }}
+    >
+      <Button activeOpacity={0.5} onPress={() => navigator("Details")}>
+        <CompanyName>{company_name}</CompanyName>
+        <CnpjNumber>{cnpjMask(cnpj_number)}</CnpjNumber>
+      </Button>
     </Container>
   );
 }

source/components/Supplier/styles.ts

@@ -1,11 +1,14 @@
+import { MotiView } from "moti";
 import {
   responsiveFontSize,
   responsiveHeight,
   responsiveWidth,
 } from "react-native-responsive-dimensions";
 import styled from "styled-components/native";
 
-export const Container = styled.TouchableOpacity`
+export const Container = styled(MotiView)``;
+
+export const Button = styled.TouchableOpacity`
   width: ${responsiveWidth(85)}px;
   height: ${responsiveHeight(13)}px;
   border-radius: ${responsiveFontSize(1)}px;