Using RN's animated to create animation

mCodex · Sep 26, 2020 · 971a343 · 971a343
1 parent c1fb63b
commit 971a343
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/example/yalc.lock b/example/yalc.lock
@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "react-native-rooster": {
-      "signature": "d88fd51dd4a08cf35f2c7733a5a201d9",
+      "signature": "77004ccfec48a41c2ab01f3788dd35b5",
       "file": true
     }
   }

diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
-import { Platform } from 'react-native';
+import React, { useCallback, useLayoutEffect, useMemo } from 'react';
+import { Animated, Platform } from 'react-native';
 
 import useToast from 'hooks/useToast';
 
@@ -14,12 +14,22 @@ interface IToastComponent {
 const Toast: React.FC<IToastComponent> = (props) => {
   const { removeToast } = useToast();
 
+  const fadeInAnimation = useMemo(() => new Animated.Value(0), []);
+
   const {
     keyboardHeight,
     message: { id, message, title, type },
     toastConfig: { font, bgColor },
   } = props;
 
+  useLayoutEffect(() => {
+    Animated.timing(fadeInAnimation, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  }, [fadeInAnimation]);
+
   /**
    * @TODO find a better way to handle Toast's visibility when keyboard is opened.
    * On Android KeyboardAvoidingView works perfectly, but not on iOS.
@@ -41,6 +51,7 @@ const Toast: React.FC<IToastComponent> = (props) => {
       type={type}
       bgColor={bgColor}
       onPress={handleTapToDismiss}
+      style={{ opacity: fadeInAnimation }}
     >
       {title && <Title fontFamilyBold={font?.fontFamilyBold}>{title}</Title>}
       <Message fontFamilyRegular={font?.fontFamilyRegular}>{message}</Message>

diff --git a/src/components/Toast/styles.ts b/src/components/Toast/styles.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native';
+import { Animated, Platform, TouchableOpacity } from 'react-native';
 import styled, { css } from 'styled-components/native';
 
 interface IContainer {
@@ -17,7 +17,9 @@ interface IMessageAndTitle {
   fontFamilyRegular?: string | null | undefined;
 }
 
-export const Container = styled.TouchableOpacity<IContainer>`
+const AnimatedButton = Animated.createAnimatedComponent(TouchableOpacity);
+
+export const Container = styled(AnimatedButton)<IContainer>`
   align-self: center;
   position: absolute;
 

diff --git a/src/providers/ToastProvider.tsx b/src/providers/ToastProvider.tsx
@@ -13,7 +13,7 @@ const ToastProvider: React.FC = ({ children }) => {
       warning: '#ff9100',
       info: '#7890f0',
     },
-    timeToDismiss: 1500,
+    timeToDismiss: 3000,
   });
 
   const addToast = useCallback(