animate float action button

milon27 · Jul 24, 2021 · 0f16a3e · 0f16a3e
1 parent e642b7f
commit 0f16a3e
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 15 deletions.
diff --git a/src/components/layouts/modal/PasswordModal.js b/src/components/layouts/modal/PasswordModal.js
@@ -19,6 +19,7 @@ export default function PasswordModal({ open, setOpen, item }) {
     const [pass, setPass] = useState("")
 
     useEffect(() => {
+        let mounted = true
         const load = async () => {
             try {
                 const password = await Helper.decryptPass(item?.password)
@@ -27,9 +28,12 @@ export default function PasswordModal({ open, setOpen, item }) {
                 console.log("model: ", e);
             }
         }
-        if (isFocused) {
+        if (isFocused && mounted) {
             load()
         }
+        return () => {
+            mounted = false
+        }
 
     }, [isFocused])
 

diff --git a/src/components/screens/auth/SignIn.js b/src/components/screens/auth/SignIn.js
@@ -43,6 +43,8 @@ export default function SignIn() {
 
     //use e
     useEffect(() => {
+        let mounted = true
+
         axios.get('auth/is-loggedin').catch(e => {
             console.log("ck :", e);
         })
@@ -51,10 +53,14 @@ export default function SignIn() {
             const ue = await Helper.getUserEmail()
             setInput({ ...input, [N_EMAIL]: ue })
         }
-        if (isFocused) {
+        if (isFocused && mounted) {
             setUserLoggedInEmail()
         }
 
+        return () => {
+            mounted = false
+        }
+
     }, [isFocused])
     //local method
 

diff --git a/src/components/screens/dashboard/CreatePassword.js b/src/components/screens/dashboard/CreatePassword.js
@@ -94,7 +94,6 @@ export default function CreatePassword({ route: { params }, navigation }) {
                     })
                     const pass = await Helper.decryptPass(item[N_PASSWORD])
                     setInput({ ...input, [N_PASSWORD]: pass })
-                    //setInput({ ...input, [N_PASSWORD]: pass })
                     setValue(item[N_CAT]);
                 }
 
@@ -247,9 +246,7 @@ export default function CreatePassword({ route: { params }, navigation }) {
 
                     theme={Theme.STATUS_BAR_ALT.toUpperCase()}
 
-                    multiple={true}
-                    min={0}
-                    max={3}
+
                     open={open}
                     setOpen={setOpen}
                     value={value}

diff --git a/src/components/screens/dashboard/HomeScreen.js b/src/components/screens/dashboard/HomeScreen.js
@@ -1,5 +1,5 @@
-import React, { useContext, useState, useEffect } from 'react'
-import { ActivityIndicator, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useContext, useState, useEffect, useRef } from 'react'
+import { ActivityIndicator, FlatList, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native';
 import Container from '../../layouts/Container';
 import Theme from '../../../utils/helpers/Theme';
 import SingleRow from './SingleRow';
@@ -14,15 +14,26 @@ import DefineIcon from './../../layouts/icon/DefineIcon';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import URL from './../../../utils/helpers/URL';
 import { StatusBar } from 'expo-status-bar';
+
 export default function HomeScreen() {
+
+    const scrollY = new Animated.Value(0)
+    // const diffClamp=Diff
+    const translateY = scrollY.interpolate({
+        inputRange: [0, 60],
+        outputRange: [0, 70]
+    })
+
     const nav = useNavigation()
     const isFocused = useIsFocused();
+    const addIcon = useRef(null)
 
     const [cat, setCat] = useState([])
     const [select, setSelect] = useState(cat[0]?._id)
     const { app, pass } = useContext(StateContext)
     const { appDispatch, passDispatch } = useContext(DispatchContext)
 
+
     //load category at once
 
     useEffect(() => {
@@ -117,29 +128,56 @@ export default function HomeScreen() {
                 /> : <></>}
 
                 <FlatList
-                    style={{ paddingTop: 12 }}
+                    style={{ paddingTop: 12, marginBottom: 60 }}
                     data={pass}
                     renderItem={renderItem}
                     ListEmptyComponent={<Text style={{ color: Theme.COLOR_BLACK, padding: 10, textAlign: "center" }}>No Password Found In this Category!</Text>}
                     keyExtractor={item => (String(item._id))}
                     showsVerticalScrollIndicator={false}
                     showsHorizontalScrollIndicator={false}
+                    // onScrollEndDrag={() => {
+                    //     // addIcon.current.hide = true
+                    //     console.log("end...");
+                    // }}
+                    // onScrollBeginDrag={() => {
+                    //     console.log("top...");
+                    // }}
+                    onScroll={(e) => {
+                        let yvalue = e.nativeEvent.contentOffset.y
+                        scrollY.setValue(yvalue)
+                        // if (yvalue > 20) {
+                        //     //hide
+
+                        // } else {
+                        //     //show
+                        // }
+                    }}
+
                 />
             </Container>
 
-            <TouchableOpacity onPress={async () => {
-                nav.navigate(URL.CREATE_PASSWORD)
-            }} style={styles.buttonCallout} >
-                <Icon size={65} style={styles.icon} name="add-circle" type={DefineIcon.Ionicon} />
-            </TouchableOpacity>
+            <Animated.View style={{
+                transform: [
+                    { translateX: translateY }
+                ]
+            }}>
+                <TouchableOpacity ref={addIcon} onPress={async () => {
+                    nav.navigate(URL.CREATE_PASSWORD)
+                }} style={styles.buttonCallout} >
+                    <Icon size={65} style={styles.icon} name="add-circle" type={DefineIcon.Ionicon} />
+                </TouchableOpacity>
+            </Animated.View>
+
+
+
         </>
     )
 }
 
 const styles = StyleSheet.create({
     buttonCallout: {
         position: 'absolute',
-        bottom: 20,
+        bottom: 10,
         right: 25
     },
     icon: {