add some basic animations

apps/mobile/App.js

@@ -68,7 +68,6 @@ const App = () => {
   };
 
   useEffect(() => {
-    console.log(colors);
     _recieveEvent('openSidebar', openSidebar);
     _recieveEvent('closeSidebar', closeSidebar);
 
@@ -154,6 +153,7 @@ const App = () => {
   }
   return (
     <>
+      <Animatable.View animation="fadeIn" useNativeDriver={true} duration={600}>
         <Animatable.View
           transition="backgroundColor"
           duration={300}
@@ -170,7 +170,11 @@ const App = () => {
             <>
               <ModalMenu colors={colors} />
 
-            <View
+              <Animatable.View
+                animation="fadeIn"
+                useNativeDriver={true}
+                duration={300}
+                delay={450}
                 style={{
                   width: '4%',
                 }}>
@@ -182,7 +186,7 @@ const App = () => {
                     //setSidebar('0%');
                   }}
                 />
-            </View>
+              </Animatable.View>
 
               <Animatable.View
                 transition="backgroundColor"
@@ -245,6 +249,7 @@ const App = () => {
           <Toast />
           <DialogManager colors={colors} />
         </Animatable.View>
+      </Animatable.View>
     </>
   );
 };

apps/mobile/src/components/NotesList/index.js

@@ -24,6 +24,7 @@ export const NotesList = ({
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper
+      index={index}
       currentEditingNote={
         currentEditingNote === item.dateCreated ? currentEditingNote : null
       }

apps/mobile/src/components/SelectionWrapper/index.js

@@ -5,13 +5,17 @@ import Icon from 'react-native-vector-icons/Feather';
 import {w} from '../../utils/utils';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
-
-const SelectionWrapper = ({children, item, currentEditingNote}) => {
+import * as Animatable from 'react-native-animatable';
+const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
 
   return (
-    <View
+    <Animatable.View
+      animation="fadeIn"
+      useNativeDriver={true}
+      duration={300 * index + 1}
+      delay={index * 300}
       style={{
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -56,7 +60,7 @@ const SelectionWrapper = ({children, item, currentEditingNote}) => {
       </View>
 
       {children}
-    </View>
+    </Animatable.View>
   );
 };
 

apps/mobile/src/views/Home/index.js

@@ -23,12 +23,11 @@ export const Home = ({navigation}) => {
   // State
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, notes} = state;
-  const [refreshing, setRefreshing] = useState(false);
   const [text, setText] = useState('');
   const [hideHeader, setHideHeader] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [searchResults, setSearchResults] = useState([]);
-
+  const [loading, setLoading] = useState([]);
   const isFocused = useIsFocused();
   // Variables
 
@@ -40,7 +39,10 @@ export const Home = ({navigation}) => {
   // Effects
 
   useEffect(() => {
-    dispatch({type: ACTIONS.NOTES, payload: 'hello there'});
+    dispatch({type: ACTIONS.NOTES});
+    setTimeout(() => {
+      setLoading(false);
+    }, 2500);
   }, [isFocused]);
 
   // Functions