feat: add notebook adding dialog

apps/mobile/src/common/common.js

@@ -35,6 +35,12 @@ export const COLOR_SCHEME = {
   accent: '#0560FF',
   normal: 'black',
   icon: 'gray',
+  errorBg: '#FFD2D2',
+  errorText: '#D8000C',
+  successBg: '#DFF2BF',
+  successText: '#4F8A10',
+  warningBg: '#FEEFB3',
+  warningText: '#9F6000',
 };
 
 //FONT FAMILY

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

@@ -0,0 +1,304 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+  Modal,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Feather';
+
+import {getElevation, h, w, timeSince} from '../../utils/utils';
+import {FlatList, TextInput} from 'react-native-gesture-handler';
+import {useForceUpdate} from '../../views/ListsEditor';
+
+const refs = [];
+
+export const AddNotebookDialog = ({visible}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const [topicsToAdd, setTopicsToAdd] = useState(['']);
+  const forceUpdate = useForceUpdate();
+  let prevItem = null;
+  let prevIndex = null;
+  let currentSelectedItem = null;
+
+  const onSubmit = (text, index, willFocus = true) => {
+    let oldData = topicsToAdd;
+    oldData[index] = text;
+
+    if (
+      oldData.length === index + 1 &&
+      prevIndex !== null &&
+      prevItem !== null
+    ) {
+      oldData.push('');
+    }
+
+    setTopicsToAdd(oldData);
+    forceUpdate();
+    currentSelectedItem = null;
+
+    if (!willFocus) return;
+    if (!refs[index + 1]) {
+      setTimeout(() => {
+        refs[index + 1].focus();
+      }, 400);
+    } else {
+      refs[index + 1].focus();
+    }
+  };
+  const onFocus = index => {
+    currentSelectedItem = index;
+    if (currentSelectedItem) {
+      let oldData = topicsToAdd;
+      oldData[prevIndex] = prevItem;
+      if (oldData.length === prevIndex + 1) {
+        oldData.push('');
+      }
+      prevIndex = null;
+      prevItem = null;
+      setTopicsToAdd(oldData);
+      console.log(oldData);
+      forceUpdate();
+    }
+  };
+  const onChange = (text, index) => {
+    prevIndex = index;
+    prevItem = text;
+  };
+  const onDelete = index => {
+    let listData = topicsToAdd;
+    listData.splice(index, 1);
+    setTopicsToAdd(listData);
+    forceUpdate();
+  };
+
+  return (
+    <SafeAreaView>
+      <Modal visible={visible} transparent={true}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(255,255,255,0.3)',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <View
+            style={{
+              width: '80%',
+              maxHeight: '80%',
+              elevation: 5,
+              borderRadius: 5,
+              backgroundColor: colors.bg,
+              paddingHorizontal: ph,
+              paddingVertical: pv,
+            }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
+              <Text
+                style={{
+                  color: colors.accent,
+                  fontFamily: WEIGHT.medium,
+                  marginLeft: 10,
+                  fontSize: SIZE.lg,
+                  marginTop: -5,
+                }}>
+                New Notebook
+              </Text>
+            </View>
+
+            <TextInput
+              style={{
+                padding: pv - 5,
+                borderWidth: 1.5,
+                borderColor: '#f0f0f0',
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+                marginTop: 20,
+                marginBottom: 10,
+              }}
+              placeholder="Enter title of notebook"
+              placeholderTextColor={colors.icon}
+            />
+
+            <Text
+              style={{
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.semibold,
+              }}>
+              Topics
+            </Text>
+
+            <FlatList
+              data={topicsToAdd}
+              renderItem={({item, index}) => (
+                <TopicItem
+                  item={item}
+                  index={index}
+                  colors={colors}
+                  onSubmit={onSubmit}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  onDelete={onDelete}
+                />
+              )}
+            />
+
+            <View
+              style={{
+                justifyContent: 'space-around',
+                alignItems: 'center',
+                flexDirection: 'row',
+                marginTop: 20,
+              }}>
+              <TouchableOpacity
+                activeOpacity={opacity}
+                style={{
+                  paddingVertical: pv,
+                  paddingHorizontal: ph,
+                  borderRadius: 5,
+                  width: '45%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderColor: colors.accent,
+                  backgroundColor: colors.accent,
+                  borderWidth: 1,
+                }}>
+                <Text
+                  style={{
+                    fontFamily: WEIGHT.medium,
+                    color: 'white',
+                    fontSize: SIZE.sm,
+                  }}>
+                  Add
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                activeOpacity={opacity}
+                style={{
+                  paddingVertical: pv,
+                  paddingHorizontal: ph,
+                  borderRadius: 5,
+                  width: '45%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  backgroundColor: '#f0f0f0',
+                }}>
+                <Text
+                  style={{
+                    fontFamily: WEIGHT.medium,
+                    color: colors.icon,
+                    fontSize: SIZE.sm,
+                  }}>
+                  Cancel
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </SafeAreaView>
+  );
+};
+
+const TopicItem = ({
+  item,
+  index,
+  onFocus,
+  onSubmit,
+  onDelete,
+  onChange,
+  colors,
+}) => {
+  const [focus, setFocus] = useState(true);
+  const topicRef = ref => (refs[index] = ref);
+
+  let text = item;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: 5,
+        borderWidth: 1.5,
+        borderColor: '#f0f0f0',
+        paddingHorizontal: ph,
+        marginTop: 10,
+      }}>
+      <TextInput
+        ref={topicRef}
+        onFocus={() => {
+          onFocus(index);
+
+          setFocus(true);
+        }}
+        onBlur={() => {
+          onSubmit(text, index, false);
+          setFocus(false);
+        }}
+        onChangeText={value => {
+          onChange(value, index);
+
+          text = value;
+        }}
+        onSubmit={() => onSubmit(text, index, true)}
+        blurOnSubmit
+        style={{
+          padding: pv - 5,
+          paddingHorizontal: 0,
+          fontSize: SIZE.sm,
+          fontFamily: WEIGHT.regular,
+          width: '90%',
+          maxWidth: '90%',
+        }}
+        placeholder="Add a topic"
+        placeholderTextColor={colors.icon}
+      />
+
+      {index == 0 && !focus ? (
+        <TouchableOpacity
+          onPress={() =>
+            !focus && index !== 0
+              ? onDelete(index)
+              : onSubmit(text, index, true)
+          }
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <Icon
+            name={!focus && index !== 0 ? 'minus' : 'plus'}
+            size={SIZE.lg}
+            color={colors.accent}
+          />
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};

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

@@ -51,7 +51,7 @@ let blockdata = [
   },
 ];
 
-export const RecentList = () => {
+export const RecentList = ({update}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [notes, setNotes] = useState([]);
   const fetchNotes = async () => {
@@ -63,7 +63,7 @@ export const RecentList = () => {
   };
   useEffect(() => {
     fetchNotes();
-  }, []);
+  }, [update]);
 
   return (
     <>

apps/mobile/src/services/NavigationService.js

@@ -14,6 +14,7 @@ import ForgotPassword from '../views/ForgotPassword';
 import Settings from '../views/Settings';
 import Trash from '../views/Trash';
 import Notes from '../views/Notes';
+import Tags from '../views/Tags';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -59,6 +60,9 @@ const TopLevelNavigator = createStackNavigator(
     Notes: {
       screen: Notes,
     },
+    Tags: {
+      screen: Tags,
+    },
   },
   {
     initialRouteName: 'Home',

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

@@ -8,6 +8,7 @@ import {
   Image,
   SafeAreaView,
   Platform,
+  Modal,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -20,17 +21,22 @@ import {
   FONT,
   WEIGHT,
 } from '../../common/common';
-import Icon from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
-import {getElevation, h, w} from '../../utils/utils';
+import {getElevation, h, w, timeSince} from '../../utils/utils';
-import {FlatList} from 'react-native-gesture-handler';
+import {FlatList, TextInput} from 'react-native-gesture-handler';
+import {useForceUpdate} from '../ListsEditor';
+import {AddNotebookDialog} from '../../components/AddNotebookDialog';
+
+const refs = [];
 
 export const Folders = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
-
+  const [addNotebook, setAddNotebook] = useState(false);
   return (
     <SafeAreaView>
+      <AddNotebookDialog visible={addNotebook} />
       <View
         style={{
           flexDirection: 'row',
@@ -48,19 +54,13 @@ export const Folders = ({navigation}) => {
           }}>
           Notebooks
         </Text>
-        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+        <Icon name="more-vertical" color={colors.icon} size={SIZE.xxl} />
       </View>
 
       <FlatList
-        numColumns={2}
         style={{
           width: '100%',
         }}
-        columnWrapperStyle={{
-          paddingHorizontal: '5%',
-          justifyContent: 'space-between',
-          width: '100%',
-        }}
         data={[
           {
             name: 'Class Notes',
@@ -75,38 +75,77 @@ export const Folders = ({navigation}) => {
             Qty: '3',
           },
         ]}
-        renderItem={({item, index}) => (
+        ListHeaderComponent={
-          <View>
+          <TouchableOpacity
-            <View
+            activeOpacity={opacity}
+            onPress={() => {
+              setAddNotebook(true);
+            }}
+            style={{
+              borderWidth: 1,
+              borderRadius: 5,
+              width: '90%',
+              marginHorizontal: '5%',
+              paddingHorizontal: ph,
+              borderColor: '#f0f0f0',
+              paddingVertical: pv + 5,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 15,
+              backgroundColor: colors.accent,
+            }}>
+            <Text
               style={{
-                ...getElevation(5),
+                fontSize: SIZE.md,
-                width: w * 0.7 * 0.4,
+                fontFamily: WEIGHT.bold,
-                height: w * 0.7 * 0.3,
+                color: 'white',
-                borderRadius: 5,
-                backgroundColor: colors.accent,
-                alignItems: 'flex-end',
-                justifyContent: 'flex-end',
-                padding: 5,
               }}>
-              <Text
+              Create new notebook
-                style={{
+            </Text>
-                  fontFamily: WEIGHT.regular,
+            <Icon name="plus" color="white" size={SIZE.lg} />
-                  fontSize: SIZE.md,
+          </TouchableOpacity>
-                  color: 'white',
+        }
-                  opacity: 0.5,
+        renderItem={({item, index}) => (
-                }}>
+          <View
-                {item.Qty} Notes
+            style={{
-              </Text>
+              paddingHorizontal: ph,
-            </View>
+              marginHorizontal: '5%',
+              borderBottomWidth: 1,
+              borderBottomColor: '#f0f0f0',
+              paddingVertical: pv + 5,
+            }}>
             <Text
               style={{
                 fontFamily: WEIGHT.bold,
                 fontSize: SIZE.md,
                 color: colors.pri,
-                maxWidth: w * 0.7 * 0.4,
+                maxWidth: '100%',
               }}>
               {item.name}
             </Text>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                paddingTop: pv,
+              }}>
+              <Text
+                style={{
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.xs,
+                  color: colors.accent,
+                }}>
+                June 21
+              </Text>
+              <Text
+                style={{
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.xs,
+                }}>
+                15 notes
+              </Text>
+            </View>
           </View>
         )}
       />

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

@@ -43,6 +43,7 @@ export const Home = ({navigation}) => {
   const [hidden, setHidden] = useState(false);
   const [text, setText] = useState('');
   const [searchResults, setSearchResults] = useState([]);
+  const [update, setUpdate] = useState(0);
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
@@ -82,6 +83,7 @@ export const Home = ({navigation}) => {
       <NavigationEvents
         onWillFocus={() => {
           DeviceEventEmitter.emit('openSidebar');
+          setUpdate(update + 1);
         }}
       />
       <Header colors={colors} heading="Home" canGoBack={false} />
@@ -110,6 +112,12 @@ export const Home = ({navigation}) => {
       menu={<RenderSideMenu colors={colors} close={() => setOpen(false)} />}
       openMenuOffset={w / 1.5}>
       <SafeAreaView style={styles.container}>
+        <NavigationEvents
+          onWillFocus={() => {
+            setUpdate(update + 1);
+          }}
+        />
+
         <Header
           colors={colors}
           heading="Home"
@@ -129,7 +137,7 @@ export const Home = ({navigation}) => {
         {hidden ? (
           <NotesList searchResults={searchResults} keyword={text} />
         ) : (
-          <RecentList />
+          <RecentList update={update} />
         )}
       </SafeAreaView>
     </SideMenu>
@@ -152,93 +160,9 @@ export const RenderSideMenu = ({colors, close}) => (
     <ScrollView
       contentContainerStyle={{
         justifyContent: 'space-between',
+        height: '100%',
       }}>
       <View>
-        <View
-          style={{
-            width: '100%',
-            justifyContent: 'space-between',
-            paddingHorizontal: '5%',
-            alignItems: 'center',
-            alignSelf: 'center',
-            marginBottom: 10,
-            marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.05,
-            flexDirection: 'row',
-          }}>
-          <Image
-            style={{
-              width: 35,
-              height: 35,
-              borderRadius: 100,
-              marginRight: 10,
-            }}
-            source={require('../../assets/images/img.png')}
-          />
-
-          <TouchableOpacity
-            onPress={() => {
-              close();
-
-              NavigationService.navigate('Login');
-            }}
-            activeOpacity={opacity}
-            style={{
-              paddingVertical: pv - 5,
-              paddingHorizontal: ph,
-              borderRadius: 5,
-              justifyContent: 'center',
-              alignItems: 'center',
-              borderColor: colors.accent,
-              backgroundColor: colors.accent,
-              borderWidth: 1,
-            }}>
-            <Text
-              style={{
-                fontFamily: WEIGHT.medium,
-                color: 'white',
-              }}>
-              Login
-            </Text>
-          </TouchableOpacity>
-
-          {/* <Text
-        style={{
-          fontFamily: WEIGHT.semibold,
-          color: colors.accent,
-          fontSize: SIZE.md,
-          marginTop: 10,
-        }}>
-        Hi, Ammar!
-      </Text>
-
-      <Text
-        style={{
-          fontFamily: WEIGHT.regular,
-          color: colors.accent,
-          fontSize: SIZE.xs,
-          marginTop: 10,
-        }}>
-        80.45/100 MB
-      </Text> */}
-
-          {/*  <View
-        style={{
-          borderRadius: 2.5,
-          backgroundColor: colors.accent,
-          marginTop: 10,
-          paddingHorizontal: 5,
-          paddingVertical: 2,
-        }}>
-        <Text
-          style={{
-            fontFamily: WEIGHT.bold,
-            fontSize: SIZE.xxs,
-            color: 'white',
-          }}>
-          Basic User
-        </Text>
-      </View> */}
-        </View>
         <View
           style={{
             borderWidth: 1,
@@ -247,6 +171,7 @@ export const RenderSideMenu = ({colors, close}) => (
             backgroundColor: colors.navbg,
             width: '100%',
             marginBottom: 5,
+            marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
           }}
         />
         <FlatList
@@ -340,10 +265,12 @@ export const RenderSideMenu = ({colors, close}) => (
             </TouchableOpacity>
           )}
         />
-      </View>
 
-      <View>
+        <TouchableOpacity
-        <View
+          onPress={() => {
+            close();
+            NavigationService.navigate('Tags');
+          }}
           style={{
             width: '100%',
             alignSelf: 'center',
@@ -351,7 +278,7 @@ export const RenderSideMenu = ({colors, close}) => (
             justifyContent: 'flex-start',
             alignItems: 'center',
             paddingHorizontal: ph,
-            marginTop: 20,
+            marginTop: 15,
           }}>
           <Icon
             style={{
@@ -365,11 +292,10 @@ export const RenderSideMenu = ({colors, close}) => (
             style={{
               fontFamily: WEIGHT.medium,
               fontSize: SIZE.sm - 1,
-              marginTop: -5,
             }}>
             Tags
           </Text>
-        </View>
+        </TouchableOpacity>
 
         <View
           style={{
@@ -386,7 +312,7 @@ export const RenderSideMenu = ({colors, close}) => (
             flexDirection: 'row',
             flexWrap: 'wrap',
             paddingHorizontal: '5%',
-            marginBottom: 20,
+            marginBottom: 0,
           }}>
           {[
             'home',
@@ -422,33 +348,6 @@ export const RenderSideMenu = ({colors, close}) => (
           ))}
         </ScrollView>
 
-        <View
-          style={{
-            width: '100%',
-            alignSelf: 'center',
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            paddingHorizontal: ph,
-            marginTop: 20,
-          }}>
-          <Icon
-            style={{
-              width: 30,
-            }}
-            name="circle"
-            color={colors.icon}
-            size={SIZE.md}
-          />
-          <Text
-            style={{
-              fontFamily: WEIGHT.medium,
-              fontSize: SIZE.sm - 1,
-              marginTop: -5,
-            }}>
-            Colors
-          </Text>
-        </View>
         <View
           style={{
             borderWidth: 1,
@@ -464,7 +363,7 @@ export const RenderSideMenu = ({colors, close}) => (
             flexDirection: 'row',
             flexWrap: 'wrap',
             paddingHorizontal: '5%',
-            marginBottom: 40,
+            marginBottom: 15,
           }}>
           {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
             item => (
@@ -477,18 +376,19 @@ export const RenderSideMenu = ({colors, close}) => (
                 }}>
                 <View
                   style={{
-                    width: 40,
+                    width: 25,
                     height: 25,
                     backgroundColor: item,
-                    borderRadius: 5,
+                    borderRadius: 100,
                   }}
                 />
               </TouchableOpacity>
             ),
           )}
         </ScrollView>
+      </View>
 
-        <View
+      {/*  <View
           style={{
             backgroundColor: '#F3A712',
             width: '90%',
@@ -519,7 +419,83 @@ export const RenderSideMenu = ({colors, close}) => (
             }}>
             <Icon name="star" color="#FCBA04" size={SIZE.lg} />
           </View>
-        </View>
+        </View> */}
+
+      <View
+        style={{
+          width: '100%',
+          justifyContent: 'space-between',
+          paddingHorizontal: '5%',
+          alignItems: 'center',
+          alignSelf: 'center',
+          marginBottom: 20,
+          flexDirection: 'row',
+        }}>
+        <TouchableOpacity
+          onPress={() => {
+            close();
+
+            NavigationService.navigate('Login');
+          }}
+          activeOpacity={opacity}
+          style={{
+            paddingVertical: pv,
+            paddingHorizontal: ph,
+            borderRadius: 5,
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderColor: colors.accent,
+            backgroundColor: colors.accent,
+            borderWidth: 1,
+          }}>
+          <Text
+            style={{
+              fontFamily: WEIGHT.medium,
+              color: 'white',
+              fontSize: SIZE.sm,
+            }}>
+            Login to Sync
+          </Text>
+        </TouchableOpacity>
+
+        {/* <Text
+        style={{
+          fontFamily: WEIGHT.semibold,
+          color: colors.accent,
+          fontSize: SIZE.md,
+          marginTop: 10,
+        }}>
+        Hi, Ammar!
+      </Text>
+
+      <Text
+        style={{
+          fontFamily: WEIGHT.regular,
+          color: colors.accent,
+          fontSize: SIZE.xs,
+          marginTop: 10,
+        }}>
+        80.45/100 MB
+      </Text> */}
+
+        {/*  <View
+        style={{
+          borderRadius: 2.5,
+          backgroundColor: colors.accent,
+          marginTop: 10,
+          paddingHorizontal: 5,
+          paddingVertical: 2,
+        }}>
+        <Text
+          style={{
+            fontFamily: WEIGHT.bold,
+            fontSize: SIZE.xxs,
+            color: 'white',
+          }}>
+          Basic User
+        </Text>
+      </View> */}
       </View>
     </ScrollView>
   </SafeAreaView>

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

@@ -20,10 +20,11 @@ import {
   FONT,
   WEIGHT,
 } from '../../common/common';
-import Icon from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
+import {FlatList} from 'react-native-gesture-handler';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -34,6 +35,65 @@ export const Settings = ({navigation}) => {
   return (
     <SafeAreaView>
       <Header colors={colors} heading="Settings" canGoBack={false} />
+
+      <FlatList
+        data={['Sync']}
+        ListHeaderComponent={
+          <FlatList
+            data={['My Account']}
+            ListHeaderComponent={<FlatList />}
+            renderItem={({item, index}) => (
+              <TouchableOpacity
+                activeOpacity={opacity}
+                style={{
+                  borderWidth: 1,
+                  borderRadius: 5,
+                  width: '90%',
+                  marginHorizontal: '5%',
+                  paddingHorizontal: ph,
+                  borderColor: '#f0f0f0',
+                  paddingVertical: pv + 5,
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginBottom: 15,
+                }}>
+                <Text
+                  style={{
+                    fontSize: SIZE.md,
+                    fontFamily: WEIGHT.regular,
+                  }}>
+                  {item}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
+        }
+        renderItem={({item, index}) => (
+          <TouchableOpacity
+            activeOpacity={opacity}
+            style={{
+              borderBottomWidth: 1,
+              width: '90%',
+              marginHorizontal: '5%',
+              borderBottomColor: '#f0f0f0',
+              paddingVertical: pv + 5,
+              flexDirection: 'row',
+              paddingHorizontal: ph,
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Text
+              style={{
+                fontSize: SIZE.md,
+                fontFamily: WEIGHT.regular,
+              }}>
+              {item}
+            </Text>
+            <Icon size={SIZE.lg} color={colors.icon} name="toggle-left" />
+          </TouchableOpacity>
+        )}
+      />
     </SafeAreaView>
   );
 };

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

@@ -0,0 +1,162 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+  FlatList,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+import {Header} from '../../components/header';
+import NoteItem from '../../components/NoteItem';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Tags = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView
+      style={{
+        height: '100%',
+        justifyContent: 'center',
+      }}>
+      <View
+        style={{
+          height: '100%',
+          marginTop: h * 0.1,
+          width: '100%',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
+        <ScrollView
+          contentContainerStyle={{
+            width: '90%',
+
+            alignSelf: 'center',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+          }}>
+          {[
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+            '#home',
+            '#school',
+            '#water',
+            '#love',
+            '#hope',
+            '#music',
+            '#notesforbook',
+            '#hate',
+            '#worldofwonders',
+          ].map(item => (
+            <TouchableOpacity
+              onPress={() => {
+                NavigationService.navigate('Notes', {
+                  heading: item,
+                });
+              }}
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                margin: 5,
+                backgroundColor: colors.accent,
+                paddingVertical: pv - 5,
+                paddingHorizontal: ph + 10,
+                borderRadius: 30,
+              }}>
+              <Text
+                style={{
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.md,
+                  color: 'white',
+                }}>
+                {item}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+Tags.navigationOptions = {
+  header: null,
+};
+
+export default Tags;

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

@@ -8,6 +8,7 @@ import {
   Image,
   SafeAreaView,
   Platform,
+  FlatList,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -24,6 +25,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
+import NoteItem from '../../components/NoteItem';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -34,6 +36,25 @@ export const Trash = ({navigation}) => {
   return (
     <SafeAreaView>
       <Header colors={colors} heading="Trash" canGoBack={false} />
+      <FlatList
+        numColumns={2}
+        columnWrapperStyle={{
+          width: '45%',
+        }}
+        data={[
+          {
+            title: 'my note',
+            headline: 'my simple not that i just deleted. please restore.',
+            dateCreated: Date.now(),
+          },
+          {
+            title: 'my note',
+            headline: 'my simple not that i just deleted. please restore.',
+            dateCreated: Date.now(),
+          },
+        ]}
+        renderItem={({item, index}) => <NoteItem item={item} />}
+      />
     </SafeAreaView>
   );
 };