├── .eslintrc
├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── AppNavigator.js
├── Notifications
    ├── cancelNotification.js
    ├── scheduleReminderNotification.js
    └── useNotifications.js
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── components
    ├── ActionButton.js
    ├── FolderCard.js
    ├── Modal.js
    ├── NoteCard.js
    ├── NoteCardText.js
    ├── NoteOptionsActionSheet.js
    ├── NoteReminderModal.js
    ├── Notes.js
    └── NotesPageHeader.js
├── context
    └── context.jsx
├── eas.json
├── package-lock.json
├── screens
    ├── AddNote.js
    ├── FolderNotes.js
    ├── Folders.js
    ├── Home.js
    ├── LabelsManager.js
    ├── NoteLabelsManager.js
    ├── NotesSelector.js
    ├── Trash.js
    ├── UpdateNote.js
    └── index.js
├── style
    └── theme.js
└── utils
    ├── dateformat.js
    └── storage.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "react-native"
 4 |   ],
 5 |   "extends": [
 6 |     "eslint:recommended",
 7 |     "plugin:react/recommended",
 8 |     "plugin:react-native/all",
 9 |     "plugin:react-hooks/recommended"
10 |   ],
11 |   "parser": "@babel/eslint-parser",
12 |   "env": {
13 |     "es6": true,
14 |     "react-native/react-native": true
15 |   },
16 |   "parserOptions": {
17 |     "ecmaFeatures": {
18 |       "jsx": true
19 |     },
20 |     "ecmaVersion": "latest",
21 |     "sourceType": "module"
22 |   },
23 |   "rules": {
24 |     "react-native/no-unused-styles": 0,
25 |     "react-native/sort-styles": 0,
26 |     "react-native/split-platform-components": 0,
27 |     "react-native/no-inline-styles": 0,
28 |     "react-native/no-color-literals": 0,
29 |     "react-native/no-raw-text": 2,
30 |     "react/jsx-uses-react": "warn",
31 |     "react/jsx-uses-vars": "warn",
32 |     "no-unused-vars": "warn",
33 |     "react/prop-types": 0,
34 |     "react-hooks/rules-of-hooks": "warn",
35 |     "react-hooks/exhaustive-deps": "warn"
36 |   }
37 | }


--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import { GlobalContextProvider } from './context/context';
 2 | import React from 'react'
 3 | import useNotifications from './Notifications/useNotifications';
 4 | import { Snackbar } from '@ouroboros/react-native-snackbar';
 5 | import AppNavigator from './AppNavigator';
 6 | import { View } from 'react-native';
 7 | import { StatusBar } from 'expo-status-bar';
 8 | 
 9 | export default function App() {
10 |   const navRef = useNotifications();
11 |   return (
12 |     <GlobalContextProvider>
13 |       <View style={{ flex: 1 }}>
14 |         <StatusBar style='dark' />
15 |         <AppNavigator navRef={navRef} />
16 | 
17 |         <Snackbar actionStyle={{ color: "lightgreen" }} textStyle={{ color: "#bbb" }}
18 |           messageStyle={{ paddingVertical: 15, paddingHorizontal: 10, borderRadius: 3, backgroundColor: "black" }}
19 |         />
20 |       </View>
21 |     </GlobalContextProvider >
22 |   );
23 | }


--------------------------------------------------------------------------------
/AppNavigator.js:
--------------------------------------------------------------------------------
 1 | import { NavigationContainer } from '@react-navigation/native';
 2 | import * as screens from './screens';
 3 | import React from 'react'
 4 | import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';
 5 | import { SafeAreaView } from 'react-native-safe-area-context';
 6 | import { ScrollView, Text } from 'react-native';
 7 | import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
 8 | import { CardStyleInterpolators } from '@react-navigation/stack';
 9 | 
10 | const Stack = createSharedElementStackNavigator();
11 | const Drawer = createDrawerNavigator();
12 | 
13 | const DrawerContent = (props) => {
14 |   return (
15 |     <>
16 |       <ScrollView>
17 |         <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
18 |           <Text style={{ marginBottom: 10, paddingVertical: 10, paddingTop: 25, paddingLeft: 20, fontSize: 20, borderBottomWidth: 1, borderBottomColor: "#eee" }}>Notes App</Text>
19 |           <DrawerItemList {...props} />
20 |         </SafeAreaView>
21 |       </ScrollView>
22 |     </>
23 |   );
24 | }
25 | 
26 | const AppNavigator = ({ navRef }) => {
27 |   return (
28 |     <NavigationContainer ref={navRef}>
29 |       <Stack.Navigator screenOptions={{
30 |         cardStyleInterpolator: CardStyleInterpolators.forBottomSheetAndroid,
31 |       }}>
32 |         <Stack.Screen name="Menus" options={{ headerShown: false }} component={() => (
33 |           <Drawer.Navigator drawerContent={DrawerContent}>
34 |             <Drawer.Screen name="Home" component={screens.Home} options={{ headerShown: false }} />
35 |             <Drawer.Screen name="Labels" component={screens.LabelsManager} />
36 |             <Drawer.Screen name="Folders" component={screens.Folders} />
37 |             <Drawer.Screen name="Trash" component={screens.Trash} />
38 |           </Drawer.Navigator>
39 |         )} />
40 |         <Stack.Screen name="AddNote" component={screens.AddNote} options={{ title: "New note" }} />
41 |         <Stack.Screen name="FolderNotes" component={screens.FolderNotes} options={{ title: "Folder", headerShown: false }} />
42 |         <Stack.Screen name="NoteLabels" component={screens.NoteLabelsManager} options={{ title: "Manage labels" }} />
43 |         <Stack.Screen name="NotesSelector" component={screens.NotesSelector} options={{ title: "Select notes" }} />
44 |         <Stack.Screen name="UpdateNote" component={screens.UpdateNote} options={{ title: "Note" }}
45 |         />
46 |       </Stack.Navigator>
47 |     </NavigationContainer>
48 |   )
49 | }
50 | 
51 | export default AppNavigator


--------------------------------------------------------------------------------
/Notifications/cancelNotification.js:
--------------------------------------------------------------------------------
 1 | import * as Notifications from 'expo-notifications';
 2 | import { Alert } from 'react-native';
 3 | 
 4 | export async function cancelNotification(notifId) {
 5 |   try {
 6 |     await Notifications.cancelScheduledNotificationAsync(notifId);
 7 |   }
 8 |   catch (err) {
 9 |     Alert.alert("Error!")
10 |   }
11 | }


--------------------------------------------------------------------------------
/Notifications/scheduleReminderNotification.js:
--------------------------------------------------------------------------------
 1 | import * as Notifications from 'expo-notifications';
 2 | import { Alert } from 'react-native';
 3 | 
 4 | export default async function scheduleReminderNotification({ note, dateTime }) {
 5 |   try {
 6 |     const id = await Notifications.scheduleNotificationAsync({
 7 |       content: {
 8 |         title: "Reminder",
 9 |         body: note.text.slice(0, 80) + "...",
10 |         data: { navigateTo: "UpdateNote", params: { id: note.id } }
11 |       },
12 |       trigger: dateTime
13 |     });
14 |     return id;
15 |   }
16 |   catch (err) {
17 |     console.log(err);
18 |     Alert.alert("error");
19 |   }
20 | }


--------------------------------------------------------------------------------
/Notifications/useNotifications.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from "react";
 2 | import * as Notifications from 'expo-notifications';
 3 | import { Platform } from "react-native";
 4 | 
 5 | Notifications.setNotificationHandler({
 6 |   handleNotification: async () => ({
 7 |     shouldShowAlert: true,
 8 |     shouldPlaySound: true,
 9 |     shouldSetBadge: false,
10 |   }),
11 | });
12 | 
13 | const useNotifications = () => {
14 |   // const [expoPushToken, setExpoPushToken] = useState('');
15 |   const [notification, setNotification] = useState(false);
16 |   const notificationListener = useRef();
17 |   const responseListener = useRef();
18 |   const navRef = useRef();
19 | 
20 |   useEffect(() => {
21 |     // registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
22 | 
23 |     // This listener is fired whenever a notification is received while the app is foregrounded
24 |     notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
25 |       setNotification(notification);
26 |     });
27 | 
28 |     // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
29 |     responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
30 |       const { data } = response.notification.request.content;
31 |       let { navigateTo, params } = data;
32 |       navigateTo = navigateTo || "Home";
33 |       navRef.current.navigate(navigateTo, params);
34 |     });
35 | 
36 |     return () => {
37 |       Notifications.removeNotificationSubscription(notificationListener.current);
38 |       Notifications.removeNotificationSubscription(responseListener.current);
39 |     };
40 |   }, []);
41 | 
42 |   return navRef;
43 | 
44 | }
45 | 
46 | 
47 | async function registerForPushNotificationsAsync() {
48 |   let token;
49 |   const isDevice = true;
50 |   if (isDevice) {
51 |     const { status: existingStatus } = await Notifications.getPermissionsAsync();
52 |     let finalStatus = existingStatus;
53 |     if (existingStatus !== 'granted') {
54 |       const { status } = await Notifications.requestPermissionsAsync();
55 |       finalStatus = status;
56 |     }
57 |     if (finalStatus !== 'granted') {
58 |       alert('Failed to get push token for push notification!');
59 |       return;
60 |     }
61 |     token = (await Notifications.getExpoPushTokenAsync()).data;
62 |     console.log(token);
63 |   } else {
64 |     alert('Must use physical device for Push Notifications');
65 |   }
66 | 
67 |   if (Platform.OS === 'android') {
68 |     Notifications.setNotificationChannelAsync('default', {
69 |       name: 'default',
70 |       importance: Notifications.AndroidImportance.MAX,
71 |       vibrationPattern: [0, 250, 250, 250],
72 |       lightColor: '#FF231F7C',
73 |     });
74 |   }
75 | 
76 |   return token;
77 | }
78 | 
79 | export default useNotifications;
80 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Notes app",
 4 |     "slug": "react-native-notes-app",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "updates": {
15 |       "fallbackToCacheTimeout": 0
16 |     },
17 |     "assetBundlePatterns": [
18 |       "**/*"
19 |     ],
20 |     "ios": {
21 |       "supportsTablet": true
22 |     },
23 |     "android": {
24 |       "package": "com.notes",
25 |       "versionCode": 1,
26 |       "adaptiveIcon": {
27 |         "foregroundImage": "./assets/adaptive-icon.png",
28 |         "backgroundColor": "#1d9bff"
29 |       }
30 |     },
31 |     "web": {
32 |       "favicon": "./assets/favicon.png"
33 |     }
34 |   }
35 | }


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koatane-dev/react-native-notes-app/685a0b90541dda5c84fbd8d1aac04942dc08ce2e/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koatane-dev/react-native-notes-app/685a0b90541dda5c84fbd8d1aac04942dc08ce2e/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koatane-dev/react-native-notes-app/685a0b90541dda5c84fbd8d1aac04942dc08ce2e/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koatane-dev/react-native-notes-app/685a0b90541dda5c84fbd8d1aac04942dc08ce2e/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 |   api.cache(true);
 3 |   return {
 4 |     presets: ['babel-preset-expo'],
 5 |     plugins: [
 6 |       "react-native-reanimated/plugin",
 7 |     ],
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/components/ActionButton.js:
--------------------------------------------------------------------------------
 1 | import { Pressable, StyleSheet } from 'react-native'
 2 | import React from 'react'
 3 | import theme from '../style/theme';
 4 | import Icon from 'react-native-vector-icons/Ionicons';
 5 | import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 6 | const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 7 | 
 8 | const ActionButton = ({ style = {}, onPress, iconName = "add-outline", isVisible = true }) => {
 9 |   const animatedStyles = useAnimatedStyle(() => ({
10 |     transform: [{ scale: withTiming(isVisible ? 1 : 0, { duration: 200 }) }]
11 |   }), [isVisible]);
12 | 
13 |   return (
14 |     <AnimatedPressable onPress={onPress} style={[styles.buttonStyle, style, animatedStyles]} android_ripple={{ color: "#ccc", radius: 25 }}>
15 |       <Icon name={iconName} size={30} color="white" />
16 |     </AnimatedPressable>
17 |   )
18 | }
19 | 
20 | export default ActionButton
21 | 
22 | const styles = StyleSheet.create({
23 |   buttonStyle: {
24 |     position: "absolute",
25 |     bottom: 20,
26 |     right: 20,
27 |     width: 50,
28 |     height: 50,
29 |     backgroundColor: theme.PRIMARY_COLOR,
30 |     color: 'white',
31 |     borderRadius: 50,
32 |     justifyContent: "center",
33 |     alignItems: "center",
34 |   }
35 | })
36 | 
37 | 


--------------------------------------------------------------------------------
/components/FolderCard.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, Pressable } from 'react-native'
 2 | import React from 'react'
 3 | import { convertToXTimeAgo } from '../utils/dateformat'
 4 | import Icon from 'react-native-vector-icons/Ionicons';
 5 | import theme from '../style/theme';
 6 | 
 7 | const FolderCard = ({ folder, drag, isActive, handlePress }) => {
 8 |   return (
 9 |     <View style={[{ backgroundColor: isActive ? "#e3e3e3" : "#fff" }, isActive && {
10 |       transform: [{ scale: 1.04 }],
11 |       shadowColor: "#555",
12 |       shadowOffset: {
13 |         width: -3,
14 |         height: 2
15 |       },
16 |       shadowOpacity: 0.37,
17 |       shadowRadius: 20,
18 |       elevation: 5
19 |     }]}>
20 |       <Pressable
21 |         onPress={() => handlePress(folder.id)}
22 |         onLongPress={() => drag()}
23 |         android_ripple={{ color: "#bbb", radius: 200 }}
24 |         delayLongPress={100}
25 |       >
26 |         <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 15, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#ddd" }}>
27 |           <View style={{ flex: 1 }}>
28 |             <Text style={{ color: "#555", fontSize: 17 }}>{folder.name}</Text>
29 |             <View style={{ flexDirection: "row", alignItems: "center", marginVertical: 5 }}>
30 |               <Text style={{ marginRight: 10, color: theme.PRIMARY_COLOR }}>{folder.notes.length} note{folder.notes.length != 1 && 's'}</Text>
31 |               <Text style={{ flex: 1, color: "#999" }}>{convertToXTimeAgo(folder.createdAt)}</Text>
32 |             </View>
33 |           </View>
34 |           <Icon name={"chevron-forward-outline"} size={22} color="#888" />
35 |         </View>
36 |       </Pressable>
37 |     </View>
38 |   )
39 | }
40 | 
41 | export default FolderCard


--------------------------------------------------------------------------------
/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import { View, Modal as RNModal, Pressable, StyleSheet } from 'react-native'
 2 | import React from 'react'
 3 | 
 4 | const Modal = ({ children, visible, onRequestClose, style = {} }) => {
 5 |   return (
 6 |     <RNModal animationType="fade" transparent={true} visible={visible} onRequestClose={onRequestClose}>
 7 |       <Pressable style={styles.centeredView} onPress={e => e.target == e.currentTarget && onRequestClose()}>
 8 |         <View style={[styles.modalView, style]}>
 9 |           {children}
10 |         </View>
11 |       </Pressable>
12 |     </RNModal>
13 |   )
14 | }
15 | 
16 | export default Modal
17 | 
18 | 
19 | const styles = StyleSheet.create({
20 |   centeredView: {
21 |     flex: 1,
22 |     justifyContent: "center",
23 |     alignItems: "center",
24 |     backgroundColor: "rgba(0, 0, 0, 0.2)"
25 |   },
26 |   modalView: {
27 |     backgroundColor: "white",
28 |     borderRadius: 5,
29 |     padding: 10,
30 |     width: "80%",
31 |     shadowColor: "#000",
32 |     shadowOffset: {
33 |       width: 0,
34 |       height: 2
35 |     },
36 |     shadowOpacity: 0.25,
37 |     shadowRadius: 4,
38 |     elevation: 5
39 |   }
40 | })


--------------------------------------------------------------------------------
/components/NoteCard.js:
--------------------------------------------------------------------------------
 1 | import { Pressable, StyleSheet, View, Dimensions } from 'react-native'
 2 | import React from 'react'
 3 | import { PanGestureHandler, GestureHandlerRootView } from 'react-native-gesture-handler';
 4 | import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 5 | import theme from '../style/theme';
 6 | import NoteCardText from './NoteCardText';
 7 | import { SharedElement } from 'react-navigation-shared-element';
 8 | 
 9 | // "isActive" is used in the situation of dragging the note and to check if currently it is being dragged
10 | const NoteCard = ({ note, isActive = false, onPress = () => { }, onLongPress = () => { }, moveNoteToTrash, isAddedInSelection = false }) => {
11 | 
12 |   const { width: SCREEN_WIDTH } = Dimensions.get("window");
13 |   const TRANSLATE_X_THRESHOLD = -SCREEN_WIDTH * 0.4;
14 |   const translateX = useSharedValue(0);
15 | 
16 |   const panGesture = useAnimatedGestureHandler({
17 |     onActive: e => {
18 |       translateX.value = e.translationX;
19 |     },
20 |     onEnd: () => {
21 |       const shouldBeRemoved = translateX.value < TRANSLATE_X_THRESHOLD;
22 |       if (shouldBeRemoved) {
23 |         translateX.value = withTiming(-SCREEN_WIDTH, { duration: 100 }, (isFinished) => {
24 |           if (isFinished) runOnJS(moveNoteToTrash)(note.id);
25 |         });
26 |       } else {
27 |         translateX.value = withTiming(0);
28 |       }
29 |     }
30 |   });
31 | 
32 |   const rStyle = useAnimatedStyle(() => ({
33 |     transform: [{
34 |       translateX: translateX.value,
35 |     }, {
36 |       scale: withTiming(isActive ? 1.04 : 1, { duration: 100 })
37 |     }]
38 |   }));
39 | 
40 | 
41 |   return (
42 |     <View style={{ marginBottom: 20, marginHorizontal: 10 }}>
43 |       <GestureHandlerRootView>
44 |         <PanGestureHandler onGestureEvent={panGesture} activeOffsetX={-10}>
45 |           <Animated.View style={rStyle}>
46 |             <SharedElement id={`note.${note.id}`}>
47 |               <Pressable
48 |                 onPress={onPress}
49 |                 onLongPress={onLongPress}
50 |                 android_ripple={{ color: "#bbb", radius: 200 }}
51 |                 style={styles({ isAddedInSelection }).noteCard}
52 |                 delayLongPress={100}
53 |               >
54 |                 <NoteCardText note={note} />
55 |               </Pressable>
56 |             </SharedElement>
57 |           </Animated.View>
58 |         </PanGestureHandler>
59 |       </GestureHandlerRootView>
60 |     </View>
61 |   );
62 | }
63 | 
64 | 
65 | export default NoteCard
66 | 
67 | 
68 | const styles = ({ isAddedInSelection }) => StyleSheet.create({
69 |   noteCard: [{
70 |     borderRadius: 5,
71 |     backgroundColor: "#fff",
72 |     borderWidth: 2,
73 |     borderColor: "#fff"
74 |   },
75 |   isAddedInSelection ? {
76 |     borderColor: theme.PRIMARY_COLOR,
77 |   } : {
78 |     borderBottomColor: "#e4e4e4",
79 |   }]
80 | })


--------------------------------------------------------------------------------
/components/NoteCardText.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, ScrollView } from 'react-native'
 2 | import React from 'react'
 3 | import Icon from 'react-native-vector-icons/Ionicons';
 4 | import { convertToXTimeAgo } from '../utils/dateformat';
 5 | import moment from 'moment';
 6 | 
 7 | const NoteCardText = ({ note }) => {
 8 |   const isReminderTimePassed = new Date(note.reminder?.dateTime).getTime() < new Date().getTime();
 9 | 
10 |   return (
11 |     <View style={{ paddingHorizontal: 15, paddingTop: 10, paddingBottom: 15 }}>
12 |       <View style={{ flexDirection: "row", alignItems: "center", marginTop: 5 }}>
13 |         {note.color && (
14 |           <View style={{ marginHorizontal: 5, borderRadius: 500, width: 10, height: 10, backgroundColor: note.color }}></View>
15 |         )}
16 |         <Text style={{ flex: 1, color: "#999", fontSize: 13 }}>{convertToXTimeAgo(note.updatedAt)}</Text>
17 |         {note.isBookmarked && (
18 |           <Icon name={"bookmark"} size={17} color="#888" style={{ marginHorizontal: 5 }} />
19 |         )}
20 |         {note.isPinned && (
21 |           <Icon name={"pin"} size={17} color="#888" style={{ marginHorizontal: 5 }} />
22 |         )}
23 |       </View>
24 | 
25 |       {note.labels.length > 0 && (
26 |         <ScrollView horizontal contentContainerStyle={{ flexDirection: "row", alignItems: "center", paddingTop: 5 }}>
27 |           {note.labels?.map(label => (
28 |             <Text key={label} style={{ marginRight: 10, padding: 5, backgroundColor: "#eee", color: "#666", borderRadius: 3, fontSize: 13 }}>{label}</Text>
29 |           ))}
30 |         </ScrollView>
31 |       )}
32 | 
33 |       {note.reminder?.dateTime && (
34 |         <View style={{ flexDirection: "row", alignSelf: "flex-start", marginTop: 7, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: "#eee", borderRadius: 3, }}>
35 |           <Icon name="alarm-outline" size={18} color="gray" style={{ marginRight: 10 }} />
36 |           <Text style={[{ color: "#666", fontSize: 13 }, isReminderTimePassed && { textDecorationLine: 'line-through' }]}>
37 |             {moment(note.reminder?.dateTime).format("lll")}
38 |           </Text>
39 |         </View>
40 |       )}
41 | 
42 |       <Text numberOfLines={5} style={{ color: "#555", fontSize: 15, marginTop: 10 }}> {note.text} </Text>
43 |     </View>
44 |   )
45 | }
46 | 
47 | export default NoteCardText


--------------------------------------------------------------------------------
/components/NoteOptionsActionSheet.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, StyleSheet, ScrollView, Pressable, ToastAndroid, Alert, Share } from 'react-native'
  2 | import React, { useState } from 'react'
  3 | import ActionSheet, { SheetManager } from "react-native-actions-sheet";
  4 | import Icon from 'react-native-vector-icons/Ionicons';
  5 | import { getData, storeData } from '../utils/storage';
  6 | import * as Clipboard from 'expo-clipboard';
  7 | import { useNavigation } from '@react-navigation/native';
  8 | import { useGlobalContext } from '../context/context';
  9 | import NoteReminderModal from './NoteReminderModal';
 10 | import { addMessage } from '@ouroboros/react-native-snackbar';
 11 | 
 12 | const NoteOptionsActionSheet = ({ noteId, formData }) => {
 13 |   const navigation = useNavigation();
 14 |   const { notes, setNotes } = useGlobalContext();
 15 |   const [noteReminderModal, setNoteReminderModal] = useState(false);
 16 | 
 17 |   const note = notes.find(note => note.id === noteId);
 18 |   const noteColors = ["lightseagreen", "skyblue", "lightcoral", "lightpink", "lightgreen", "lightblue", "orange", "palegreen"];
 19 |   const newOrEditMode = note.reminder?.dateTime ? "edit" : "new";
 20 | 
 21 |   const changeNoteColor = async color => {
 22 |     try {
 23 |       const newNotesArr = notes.map(note => {
 24 |         if (note.id !== noteId) return note;
 25 |         return { ...note, color };
 26 |       })
 27 |       await storeData("notes", newNotesArr);
 28 |       setNotes(newNotesArr);
 29 |     }
 30 |     catch (err) {
 31 |       Alert.alert("Error", "Some error is there!!");
 32 |     }
 33 |   }
 34 | 
 35 |   const copyToClipboard = async () => {
 36 |     await Clipboard.setStringAsync(formData.text);
 37 |     ToastAndroid.show("Note's text copied", ToastAndroid.SHORT);
 38 |   }
 39 | 
 40 |   const shareNote = async () => {
 41 |     await Share.share({ message: formData.text });
 42 |   }
 43 | 
 44 |   const restoreNote = async () => {
 45 |     try {
 46 |       const trashNotes = await getData("trashNotes");
 47 |       const note = trashNotes.find(note => note.id === noteId);
 48 |       const newNotesArr = [...notes];
 49 |       await storeData("notes", newNotesArr);
 50 | 
 51 |       const newTrashNotesArr = trashNotes.filter(trashNote => trashNote.id !== note.id);
 52 |       await storeData("trashNotes", newTrashNotesArr);
 53 |       setNotes(newNotesArr);
 54 |     }
 55 |     catch (err) {
 56 |       Alert.alert("Error", "Some error is there!!");
 57 |     }
 58 |   }
 59 | 
 60 | 
 61 |   const moveNoteToTrash = async () => {
 62 |     try {
 63 |       const trashNotes = (await getData("trashNotes")) || [];
 64 |       const newTrashNotesArr = [...trashNotes, note];
 65 |       await storeData("trashNotes", newTrashNotesArr);
 66 | 
 67 |       const newNotesArr = notes.filter(note => note.id !== noteId);
 68 |       await storeData("notes", newNotesArr);
 69 |       navigation.navigate("Home");
 70 |       setNotes(newNotesArr);
 71 | 
 72 |       addMessage({
 73 |         text: "Note moved to trash",
 74 |         duration: 5000,
 75 |         action: {
 76 |           text: "Undo",
 77 |           onPress: restoreNote
 78 |         }
 79 |       });
 80 | 
 81 |     }
 82 |     catch (err) {
 83 |       Alert.alert("Error", "Some error is there!!");
 84 |     }
 85 |   }
 86 | 
 87 | 
 88 |   const cloneNote = async () => {
 89 |     try {
 90 |       const newNote = {
 91 |         ...note,
 92 |         id: Math.floor(Math.random() * 10000),
 93 |         text: formData.text,
 94 |         createdAt: new Date(),
 95 |         updatedAt: new Date(),
 96 |       }
 97 |       const newNotesArr = [newNote, ...notes];
 98 |       await storeData("notes", newNotesArr);
 99 |       setNotes(newNotesArr);
100 |       navigation.navigate("Home");
101 |       ToastAndroid.show("Note cloned successfully", ToastAndroid.SHORT);
102 |     }
103 |     catch (err) {
104 |       Alert.alert("Error", "Some error is there!!");
105 |     }
106 |   }
107 | 
108 |   const togglePin = async () => {
109 |     try {
110 |       const newNotesArr = notes.map(note => {
111 |         if (note.id !== noteId) return note;
112 |         return { ...note, isPinned: !note.isPinned };
113 |       })
114 |       await storeData("notes", newNotesArr);
115 |       setNotes(newNotesArr);
116 |     }
117 |     catch (err) {
118 |       Alert.alert("Error", "Some error is there!!");
119 |     }
120 |   }
121 | 
122 |   const showAddReminderModal = () => {
123 |     SheetManager.hide("noteOptionsActionSheet");
124 |     setNoteReminderModal(true);
125 |   }
126 | 
127 | 
128 | 
129 |   return (
130 |     <>
131 |       <ActionSheet containerStyle={{ padding: 0 }} id="noteOptionsActionSheet" useBottomSafeAreaPadding={false} defaultOverlayOpacity={0.1} openAnimationConfig={{ friction: 20, tension: 250 }} gestureEnabled indicatorStyle={{ height: 5 }}>
132 |         <View>
133 | 
134 |           {/* Colors */}
135 |           <ScrollView horizontal contentContainerStyle={{ paddingVertical: 10, paddingHorizontal: 5 }}>
136 |             <Pressable onPress={() => changeNoteColor(null)} style={{ marginHorizontal: 5, borderRadius: 50, width: 35, height: 35, backgroundColor: "white", justifyContent: "center", alignItems: "center", borderWidth: 1, borderColor: "black" }}>
137 |               <View style={{ position: "absolute", height: "100%", width: 1, backgroundColor: "black", transform: [{ rotate: "-30deg" }] }}></View>
138 |               {!note.color && (
139 |                 <Icon name="checkmark" size={25} color="black" />
140 |               )}
141 |             </Pressable>
142 | 
143 |             {noteColors.map(color => (
144 |               <Pressable onPress={() => changeNoteColor(color)} key={color} style={{ marginHorizontal: 5, borderRadius: 50, width: 35, height: 35, backgroundColor: color, justifyContent: "center", alignItems: "center" }}>
145 |                 {note.color === color && (
146 |                   <Icon name="checkmark" size={25} color="black" />
147 |                 )}
148 |               </Pressable>
149 |             ))}
150 |           </ScrollView>
151 | 
152 |           <View style={{ borderColor: "#eee", borderBottomWidth: 1 }} />
153 | 
154 |           {/* Labels */}
155 |           <ScrollView horizontal contentContainerStyle={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 5, paddingVertical: 10 }}>
156 |             {note.labels?.map(label => (
157 |               <Text key={label} style={{ margin: 5, padding: 5, backgroundColor: "#eee", color: "#666", borderRadius: 3, fontSize: 15 }}>{label}</Text>
158 |             ))}
159 |             <Pressable onPress={() => { SheetManager.hide("noteOptionsActionSheet"); navigation.navigate("NoteLabels", { noteId }); }} style={{ marginLeft: 14, backgroundColor: "#eee", paddingVertical: 5, paddingHorizontal: 8, borderRadius: 3 }} android_ripple={{ color: "#bbb", radius: 200 }} >
160 |               <Text style={{ fontWeight: "500", color: "#666", fontSize: 15 }}>+ Manage labels</Text>
161 |             </Pressable>
162 |           </ScrollView>
163 | 
164 |           <View style={{ borderColor: "#eee", borderBottomWidth: 1 }} />
165 | 
166 |           {[
167 |             { onPress: copyToClipboard, iconName: "clipboard-outline", title: "Copy to Clipboard" },
168 |             { onPress: shareNote, iconName: "share-social-outline", title: "Share" },
169 |             { onPress: moveNoteToTrash, iconName: "trash-outline", title: "Delete" },
170 |             { onPress: cloneNote, iconName: "copy-outline", title: "Make a copy" },
171 |             { onPress: togglePin, iconName: note.isPinned ? "pin" : "pin-outline", title: note.isPinned ? "Unpin" : "Pin" },
172 |             { onPress: showAddReminderModal, iconName: "alarm-outline", title: newOrEditMode === "edit" ? "Edit reminder" : "Add a reminder" },
173 |           ]
174 |             .map(({ onPress, iconName, title }) => (
175 |               <Pressable key={title} onPress={onPress} style={styles.sheetItem} android_ripple={{ color: "#999", radius: 200 }}>
176 |                 <Icon name={iconName} size={25} color="gray" style={{ marginRight: 15 }} />
177 |                 <Text color="gray">{title}</Text>
178 |               </Pressable>
179 |             ))}
180 |         </View>
181 |       </ActionSheet>
182 | 
183 |       <NoteReminderModal {...{ noteReminderModal, setNoteReminderModal, noteId }} />
184 |     </>
185 |   )
186 | }
187 | 
188 | export default NoteOptionsActionSheet
189 | 
190 | const styles = StyleSheet.create({
191 |   sheetItem: {
192 |     flexDirection: "row",
193 |     alignItems: "center",
194 |     padding: 15,
195 |   }
196 | });
197 | 


--------------------------------------------------------------------------------
/components/NoteReminderModal.js:
--------------------------------------------------------------------------------
  1 | import { Alert, Pressable, Text, View } from 'react-native'
  2 | import React, { useEffect, useState } from 'react'
  3 | import RNDateTimePicker from '@react-native-community/datetimepicker';
  4 | import scheduleReminderNotification from '../Notifications/scheduleReminderNotification';
  5 | import moment from 'moment/moment';
  6 | import { useGlobalContext } from '../context/context';
  7 | import { storeData } from '../utils/storage';
  8 | import { cancelNotification } from '../Notifications/cancelNotification';
  9 | import Modal from './Modal';
 10 | 
 11 | const NoteReminderModal = ({ noteReminderModal, setNoteReminderModal, noteId }) => {
 12 |   const { notes, setNotes } = useGlobalContext();
 13 |   const [dateTimePickerMode, setDateTimePickerMode] = useState(null);
 14 |   const [inputDateTime, setInputDateTime] = useState(new Date());
 15 |   const note = notes.find(note => note.id === noteId);
 16 |   const newOrEditMode = note.reminder?.dateTime ? "edit" : "new";
 17 | 
 18 |   useEffect(() => {
 19 |     if (!noteReminderModal) return;
 20 |     if (newOrEditMode === "edit") {
 21 |       setInputDateTime(new Date(note.reminder?.dateTime));
 22 |     }
 23 |     else {
 24 |       setInputDateTime(new Date());
 25 |     }
 26 |   }, [noteReminderModal, note, newOrEditMode]);
 27 | 
 28 | 
 29 |   const onDateTimeInputChange = (e, selectedDate) => {
 30 |     const currentDate = selectedDate;
 31 |     setDateTimePickerMode(null);
 32 |     setInputDateTime(currentDate);
 33 |   };
 34 | 
 35 |   const setOrChangeReminderForNote = async () => {
 36 |     try {
 37 |       if (newOrEditMode === "edit") {
 38 |         await cancelNotification(note.reminder.notifId);
 39 |       }
 40 |       const notifId = await scheduleReminderNotification({ note, dateTime: inputDateTime });
 41 |       const newNotesArr = notes.map(note => {
 42 |         if (note.id !== noteId) return note;
 43 |         return { ...note, reminder: { dateTime: inputDateTime, notifId } };
 44 |       });
 45 |       await storeData("notes", newNotesArr);
 46 |       setNotes(newNotesArr);
 47 |       setNoteReminderModal(false);
 48 |     }
 49 |     catch (err) {
 50 |       Alert.alert("Error", "Some error is there!!");
 51 |     }
 52 |   }
 53 | 
 54 |   const deleteReminderForNote = async () => {
 55 |     try {
 56 |       await cancelNotification(note.reminder.notifId);
 57 |       const newNotesArr = notes.map(note => {
 58 |         if (note.id !== noteId) return note;
 59 |         return { ...note, reminder: undefined };
 60 |       });
 61 |       await storeData("notes", newNotesArr);
 62 |       setNotes(newNotesArr);
 63 |       setNoteReminderModal(false);
 64 |     }
 65 |     catch (err) {
 66 |       Alert.alert("Error", "Some error is there!!");
 67 |     }
 68 |   }
 69 | 
 70 | 
 71 |   return (
 72 |     <>
 73 |       <Modal visible={noteReminderModal} onRequestClose={() => setNoteReminderModal(false)}>
 74 |         <View style={{ alignItems: 'center' }}>
 75 |           <Text style={{ marginVertical: 10, fontSize: 20, color: "#666" }}>Set Reminder</Text>
 76 | 
 77 |           <Pressable onPress={() => setDateTimePickerMode("date")} style={{ width: "90%", paddingVertical: 15, paddingHorizontal: 10, borderBottomWidth: 1, borderBottomColor: "#ddd" }} android_ripple={{ color: "#bbb", radius: 150 }}>
 78 |             <Text>{moment(inputDateTime).format("LL")}</Text>
 79 |           </Pressable>
 80 | 
 81 |           <Pressable onPress={() => setDateTimePickerMode("time")} style={{ width: "90%", paddingVertical: 15, paddingHorizontal: 10, borderBottomWidth: 1, borderBottomColor: "#ddd" }} android_ripple={{ color: "#bbb", radius: 150 }}>
 82 |             <Text>{moment(inputDateTime).format("LT")}</Text>
 83 |           </Pressable>
 84 | 
 85 |           <View style={{ width: "100%", flexDirection: "row", justifyContent: "flex-end", marginTop: 10, marginBottom: 5, paddingRight: 20 }}>
 86 |             {newOrEditMode === "edit" && (
 87 |               <Pressable onPress={deleteReminderForNote} style={{ padding: 10 }} android_ripple={{ color: "#bbb", radius: 60 }}>
 88 |                 <Text style={{ color: "blue", fontSize: 15 }}>Delete</Text>
 89 |               </Pressable>
 90 |             )}
 91 | 
 92 |             <Pressable onPress={() => setNoteReminderModal(false)} style={{ padding: 10 }} android_ripple={{ color: "#bbb", radius: 60 }}>
 93 |               <Text style={{ color: "blue", fontSize: 15 }}>Cancel</Text>
 94 |             </Pressable>
 95 | 
 96 |             <Pressable onPress={setOrChangeReminderForNote} style={{ padding: 10 }} android_ripple={{ color: "#bbb", radius: 60 }}>
 97 |               <Text style={{ color: "blue", fontSize: 15 }}>Set</Text>
 98 |             </Pressable>
 99 |           </View>
100 |         </View>
101 |       </Modal>
102 | 
103 |       {dateTimePickerMode && (
104 |         <RNDateTimePicker
105 |           value={inputDateTime}
106 |           mode={dateTimePickerMode}
107 |           onChange={onDateTimeInputChange}
108 |         />
109 |       )}
110 |     </>
111 |   )
112 | }
113 | 
114 | export default NoteReminderModal


--------------------------------------------------------------------------------
/components/Notes.js:
--------------------------------------------------------------------------------
  1 | import { Alert, BackHandler, Text, ToastAndroid, View } from 'react-native'
  2 | import { useIsFocused, useNavigation } from '@react-navigation/native';
  3 | import { useGlobalContext } from '../context/context';
  4 | import theme from '../style/theme';
  5 | import { useEffect } from 'react';
  6 | import React from 'react';
  7 | import NoteCard from './NoteCard';
  8 | import { getData, storeData } from '../utils/storage';
  9 | import DraggableFlatList from 'react-native-draggable-flatlist'
 10 | 
 11 | 
 12 | const Notes = ({ selectedNotes, setSelectedNotes, filteredNotes, isSearchMode, setIsSearchMode }) => {
 13 |   const { notes, setNotes } = useGlobalContext();
 14 |   const navigation = useNavigation();
 15 |   const isFocussed = useIsFocused();
 16 | 
 17 |   useEffect(() => {
 18 |     const backAction = () => {
 19 |       if (!isFocussed) return;
 20 |       if (selectedNotes.length > 0) {
 21 |         setSelectedNotes([]);
 22 |         return true;
 23 |       }
 24 |       if (isSearchMode) {
 25 |         setIsSearchMode(false);
 26 |         return true;
 27 |       }
 28 |       return false;
 29 |     };
 30 |     BackHandler.addEventListener("hardwareBackPress", backAction);
 31 |     return () => BackHandler.removeEventListener("hardwareBackPress", backAction);
 32 |   }, [isFocussed, selectedNotes, setSelectedNotes, isSearchMode, setIsSearchMode]);
 33 | 
 34 | 
 35 |   const handlePress = (id) => {
 36 |     if (selectedNotes.length == 0) {
 37 |       navigation.navigate("UpdateNote", { id });
 38 |     }
 39 |     else {
 40 |       if (selectedNotes.includes(id)) {
 41 |         setSelectedNotes(selectedNotes.filter(selectedNoteId => selectedNoteId !== id));
 42 |       }
 43 |       else {
 44 |         setSelectedNotes([...selectedNotes, id]);
 45 |       }
 46 |     }
 47 |   }
 48 | 
 49 |   const handleLongPress = (id) => {
 50 |     if (selectedNotes.includes(id)) return;
 51 |     setSelectedNotes([...selectedNotes, id]);
 52 |   }
 53 | 
 54 | 
 55 |   const moveNoteToTrash = async (noteId) => {
 56 |     try {
 57 |       const note = notes.find(note => note.id === noteId);
 58 |       const trashNotes = (await getData("trashNotes")) || [];
 59 |       const newTrashNotesArr = [...trashNotes, note];
 60 |       await storeData("trashNotes", newTrashNotesArr);
 61 | 
 62 |       const newNotesArr = notes.filter(note => note.id !== noteId);
 63 |       await storeData("notes", newNotesArr);
 64 |       setNotes(newNotesArr);
 65 |       setSelectedNotes([]);
 66 |       ToastAndroid.show("Note moved to trash", ToastAndroid.SHORT);
 67 |     }
 68 |     catch (err) {
 69 |       console.log(err);
 70 |       Alert.alert("Error", "Some error is there!!");
 71 |     }
 72 |   }
 73 | 
 74 |   const changeOrderOfNotes = async ({ data }) => {
 75 |     try {
 76 |       const newNotesArr = data;
 77 |       if (newNotesArr.length === notes.length && JSON.stringify(newNotesArr) === JSON.stringify(notes)) return;
 78 |       setNotes(newNotesArr);
 79 |       await storeData("notes", newNotesArr);
 80 |     }
 81 |     catch (err) {
 82 |       console.log(err);
 83 |       Alert.alert("Error", "Some error is there!!");
 84 |     }
 85 |   }
 86 | 
 87 | 
 88 |   const getDraggableFlatList = notes => {
 89 |     const notesCopy = [...notes.filter(note => note.isPinned), ...notes.filter(note => !note.isPinned)];
 90 |     return <DraggableFlatList
 91 |       keyboardShouldPersistTaps="handled"
 92 |       contentContainerStyle={{ paddingTop: 5, paddingBottom: 60 }}
 93 |       data={notesCopy}
 94 |       keyExtractor={note => note.id}
 95 |       renderItem={({ item: note, drag, isActive }) => (
 96 |         <NoteCard {...{
 97 |           note, isActive, moveNoteToTrash,
 98 |           onPress: () => handlePress(note.id),
 99 |           onLongPress: () => { handleLongPress(note.id); drag(); },
100 |         }}
101 |           isAddedInSelection={selectedNotes.includes(note.id)}
102 |         />
103 |       )}
104 |       onDragEnd={changeOrderOfNotes}
105 |       autoscrollThreshold={100}
106 |     />
107 |   }
108 | 
109 | 
110 |   return (
111 |     <View style={{ flex: 1 }}>
112 | 
113 |       {notes.length === 0 && (
114 |         <View style={{ marginTop: 200, alignItems: "center", justifyContent: "center" }}>
115 |           <Text style={{ fontSize: 16 }}>
116 |             No note.. Tap + icon to add new note
117 |           </Text>
118 |         </View>
119 |       )}
120 | 
121 |       {notes.length > 0 && (
122 |         <>
123 |           {!isSearchMode ? (
124 |             <>
125 |               <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "600", fontSize: 15, paddingHorizontal: 10, paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: "#efefef" }}>{notes.length} note{notes.length > 1 && 's'}</Text>
126 |               <View style={{ flex: 1 }}>
127 |                 {getDraggableFlatList(notes)}
128 |               </View>
129 |             </>
130 |           ) : (
131 |             <>
132 |               {filteredNotes === null ? (
133 |                 <>
134 |                   <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "600", fontSize: 15, paddingHorizontal: 10, paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: "#efefef" }}>{notes.length} note{notes.length > 1 && 's'}</Text>
135 |                   {getDraggableFlatList(notes)}
136 |                 </>
137 |               ) : filteredNotes.length === 0 ? (
138 |                 <Text style={{ textAlign: "center", marginTop: 20, fontSize: 18, color: "#888" }}>No note found..</Text>
139 |               ) : (
140 |                 <>
141 |                   <Text style={{ color: theme.PRIMARY_COLOR, paddingHorizontal: 10, paddingVertical: 20 }}>{filteredNotes.length} note{filteredNotes.length > 1 && 's'} found</Text>
142 |                   {getDraggableFlatList(filteredNotes)}
143 |                 </>
144 |               )}
145 |             </>
146 |           )}
147 |         </>
148 |       )}
149 | 
150 |     </View>
151 |   )
152 | }
153 | 
154 | export default Notes


--------------------------------------------------------------------------------
/components/NotesPageHeader.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, Pressable, Alert, TextInput, ToastAndroid } from 'react-native'
  2 | import React, { useEffect } from 'react'
  3 | import Icon from 'react-native-vector-icons/Ionicons';
  4 | import { useGlobalContext } from '../context/context';
  5 | import { getData, storeData } from '../utils/storage';
  6 | import { getDefaultHeaderHeight } from '@react-navigation/elements';
  7 | import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
  8 | import { useNavigation } from '@react-navigation/native';
  9 | 
 10 | const NotesPageHeader = ({ selectedNotes, setSelectedNotes, setFilteredNotes, isSearchMode, setIsSearchMode, searchValue, setSearchValue }) => {
 11 | 
 12 |   const frame = useSafeAreaFrame();
 13 |   const insets = useSafeAreaInsets();
 14 |   const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);
 15 |   const { notes, setNotes } = useGlobalContext();
 16 |   const navigation = useNavigation();
 17 | 
 18 |   // useFocusEffect(useCallback(() => {
 19 |   //   return () => setIsSearchMode(false);
 20 |   // }, [setIsSearchMode]));
 21 | 
 22 |   useEffect(() => {
 23 |     if (searchValue === "") setFilteredNotes(null);
 24 |     else setFilteredNotes(notes.filter(note => note.text.toLowerCase().includes(searchValue.toLowerCase())));
 25 |   }, [searchValue, notes, setFilteredNotes]);
 26 | 
 27 |   const handleDeleteMany = async () => {
 28 |     try {
 29 |       const notesToTrash = selectedNotes.map(selectedId => notes.find(note => note.id === selectedId));
 30 |       const trashNotes = (await getData("trashNotes")) || [];
 31 |       const newTrashNotesArr = [...trashNotes, ...notesToTrash];
 32 |       await storeData("trashNotes", newTrashNotesArr);
 33 | 
 34 |       const newNotesArr = notes.filter(note => !selectedNotes.includes(note.id));
 35 |       await storeData("notes", newNotesArr);
 36 |       setNotes(newNotesArr);
 37 |       ToastAndroid.show("Note moved to trash", ToastAndroid.SHORT);
 38 |     }
 39 |     catch (err) {
 40 |       Alert.alert("Error", "Some error is there!!");
 41 |     }
 42 |   }
 43 | 
 44 |   const handleCloseSelection = () => {
 45 |     setSelectedNotes([]);
 46 |   }
 47 | 
 48 |   const handleSearchBtnClick = () => {
 49 |     setIsSearchMode(true);
 50 |   }
 51 | 
 52 |   const handleCloseSearch = () => {
 53 |     setIsSearchMode(false);
 54 |   }
 55 | 
 56 |   const handleTextChange = (text) => {
 57 |     setSearchValue(text);
 58 |   }
 59 | 
 60 | 
 61 |   return (
 62 |     <View style={{ height: headerHeight, paddingTop: insets.top, justifyContent: "center", backgroundColor: "white", borderBottomWidth: 2, borderBottomColor: "#eee" }}>
 63 | 
 64 |       {!isSearchMode ? (
 65 |         <>
 66 |           {selectedNotes.length == 0 ? (
 67 |             <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 5 }}>
 68 |               <Pressable style={{ padding: 5, marginRight: 5 }} onPress={() => navigation.openDrawer()}>
 69 |                 <Icon name="menu-outline" size={24} />
 70 |               </Pressable>
 71 |               <Text style={{ fontSize: 20, color: "#333" }}>Notes</Text>
 72 |               <Pressable style={{ margin: 10, marginRight: 0, width: 40, height: 40, padding: 5, marginLeft: "auto", justifyContent: "center", alignItems: "center" }} onPress={handleSearchBtnClick} android_ripple={{ color: "#ccc", radius: 20 }}>
 73 |                 <Icon name="search" size={20} color="#888" />
 74 |               </Pressable>
 75 |             </View>
 76 |           ) : (
 77 |             <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 10, paddingVertical: 5 }}>
 78 |               <Pressable style={{ padding: 5 }} onPress={handleCloseSelection} android_ripple={{ color: "#ccc", radius: 15 }}>
 79 |                 <Icon name="chevron-back" size={20} color="#888" />
 80 |               </Pressable>
 81 |               <Text style={{ marginLeft: 5, color: "#333", fontSize: 18 }}>{selectedNotes.length} selected</Text>
 82 |               <Pressable style={{ marginLeft: "auto", padding: 5 }} onPress={handleDeleteMany} android_ripple={{ color: "#ccc", radius: 15 }}>
 83 |                 <Icon name="trash" size={20} color="#888" />
 84 |               </Pressable>
 85 |             </View>
 86 |           )}
 87 |         </>
 88 |       ) : (
 89 |         <View style={{ height: "100%", flexDirection: "row", alignItems: "center", paddingTop: 5, borderBottomColor: "#ddd", borderBottomWidth: 0.5 }}>
 90 |           <Pressable style={{ margin: 10, width: 40, height: 40, justifyContent: "center", alignItems: "center" }} onPress={handleCloseSearch} android_ripple={{ color: "#ccc", radius: 20 }}>
 91 |             <Icon name="arrow-back" size={22} color="#888" />
 92 |           </Pressable>
 93 |           <TextInput value={searchValue} onChangeText={handleTextChange} autoFocus style={{ flex: 1, height: "100%", fontSize: 16 }} placeholder="Search..." />
 94 |           <Pressable style={{ margin: 10, width: 40, height: 40, justifyContent: "center", alignItems: "center" }} onPress={() => setSearchValue("")} android_ripple={{ color: "#ccc", radius: 20 }}>
 95 |             <Icon name="close" size={22} color="#888" />
 96 |           </Pressable>
 97 |         </View>
 98 |       )}
 99 | 
100 |     </View>
101 |   )
102 | }
103 | 
104 | export default NotesPageHeader


--------------------------------------------------------------------------------
/context/context.jsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useEffect, useState } from "react";
 2 | import { getData } from "../utils/storage";
 3 | import React from 'react'
 4 | 
 5 | const GlobalContext = createContext();
 6 | export const GlobalContextProvider = ({ children }) => {
 7 |   const [notes, setNotes] = useState([]);
 8 |   const [labels, setLabels] = useState([]);
 9 | 
10 |   useEffect(() => {
11 |     const fetchLocalStorageData = async () => {
12 |       const notes = await getData("notes");
13 |       if (notes) setNotes(notes);
14 |       const labels = await getData("labels");
15 |       if (labels) setLabels(labels);
16 |     }
17 |     fetchLocalStorageData();
18 |   }, []);
19 | 
20 |   return <GlobalContext.Provider value={{ notes, setNotes, labels, setLabels }}>{children}</GlobalContext.Provider>
21 | }
22 | 
23 | export const useGlobalContext = () => {
24 |   return useContext(GlobalContext);
25 | }


--------------------------------------------------------------------------------
/eas.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "cli": {
 3 |     "version": ">= 0.60.0"
 4 |   },
 5 |   "build": {
 6 |     "development": {
 7 |       "developmentClient": true,
 8 |       "distribution": "internal"
 9 |     },
10 |     "preview": {
11 |       "android": {
12 |         "buildType": "apk"
13 |       }
14 |     },
15 |     "preview2": {
16 |       "android": {
17 |         "gradleCommand": ":app:assembleRelease"
18 |       }
19 |     },
20 |     "preview3": {
21 |       "developmentClient": true
22 |     },
23 |     "production": {}
24 |   },
25 |   "submit": {
26 |     "production": {}
27 |   }
28 | }


--------------------------------------------------------------------------------
/screens/AddNote.js:
--------------------------------------------------------------------------------
 1 | import { Alert, BackHandler, TextInput, View } from 'react-native'
 2 | import React, { useCallback, useEffect, useState } from 'react'
 3 | import { useNavigation } from '@react-navigation/native';
 4 | import { storeData } from '../utils/storage';
 5 | import { useGlobalContext } from '../context/context';
 6 | import ActionButton from '../components/ActionButton';
 7 | 
 8 | const AddNote = () => {
 9 |   const navigation = useNavigation();
10 |   const { notes, setNotes } = useGlobalContext();
11 | 
12 |   const [formData, setFormData] = useState({
13 |     text: ""
14 |   });
15 | 
16 | 
17 |   useEffect(() => {
18 |     const backAction = () => {
19 |       if (formData.text === "") return false;
20 |       Alert.alert("Your note has not been saved.", "Do you want to save it?", [{ text: "Yes", onPress: saveNote }, { text: "No", onPress: navigation.goBack }], { cancelable: true });
21 |       return true;
22 |     }
23 |     BackHandler.addEventListener("hardwareBackPress", backAction);
24 |     return () => BackHandler.removeEventListener("hardwareBackPress", backAction);
25 |   }, [formData, navigation, saveNote]);
26 | 
27 | 
28 | 
29 |   const handleChange = (name, value) => {
30 |     setFormData({ ...formData, [name]: value });
31 |   }
32 | 
33 |   const saveNote = useCallback(async () => {
34 |     try {
35 |       if (formData.text === "") return;
36 |       const newNote = {
37 |         id: Math.floor(Math.random() * 10000),
38 |         text: formData.text,
39 |         createdAt: new Date(),
40 |         updatedAt: new Date(),
41 |         labels: []
42 |       }
43 |       const newNotesArr = [newNote, ...notes];
44 |       await storeData("notes", newNotesArr);
45 |       setNotes(newNotesArr);
46 |       navigation.navigate("Home");
47 |     }
48 |     catch (err) {
49 |       Alert.alert("Error", "Some error is there!!");
50 |     }
51 |   }, [formData, navigation, notes, setNotes]);
52 | 
53 | 
54 |   return (
55 |     <View style={{ flex: 1 }}>
56 |       <View style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
57 |         <TextInput value={formData.text} onChangeText={text => handleChange("text", text)} multiline={true} style={{ padding: 20, fontSize: 16, color: "#555" }} placeholder="Your note" autoFocus />
58 |       </View>
59 | 
60 |       <ActionButton iconName='checkmark' onPress={saveNote} isVisible={formData.text !== ""} />
61 |     </View>
62 |   )
63 | }
64 | 
65 | export default AddNote


--------------------------------------------------------------------------------
/screens/FolderNotes.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, Alert, ActivityIndicator, FlatList, Pressable, TextInput } from 'react-native'
  2 | import React, { useCallback, useEffect, useRef, useState } from 'react'
  3 | import { useNavigation, useRoute } from '@react-navigation/native'
  4 | import { getData, storeData } from '../utils/storage';
  5 | import theme from '../style/theme';
  6 | import NoteCard from '../components/NoteCard';
  7 | import ActionButton from '../components/ActionButton';
  8 | import { useGlobalContext } from '../context/context';
  9 | import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 10 | import { getDefaultHeaderHeight } from '@react-navigation/elements';
 11 | import Icon from 'react-native-vector-icons/Ionicons';
 12 | 
 13 | const FolderNotes = () => {
 14 |   const [folder, setFolder] = useState({});
 15 |   const navigation = useNavigation();
 16 |   const route = useRoute();
 17 |   const { folderId } = route.params;
 18 |   const [loading, setLoading] = useState(true);
 19 |   const { notes } = useGlobalContext();
 20 |   const [folderNameEditMode, setFolderNameEditMode] = useState(false);
 21 |   const [folderNameEditInput, setFolderNameEditInput] = useState('');
 22 |   const folderNameRef = useRef(null);
 23 | 
 24 |   useEffect(() => {
 25 |     setFolderNameEditInput(folder.name);
 26 |   }, [folder]);
 27 | 
 28 |   const fetchFolderWithNotes = useCallback(async () => {
 29 |     try {
 30 |       const folders = await getData("folders");
 31 |       const folder = folders.find(folder => folder.id === folderId);
 32 |       folder.notes = folder.notes.map(noteId => notes.find(note => note.id === noteId));
 33 |       setFolder(folder);
 34 |       setFolderNameEditInput(folder.name);
 35 |       setLoading(false);
 36 |     }
 37 |     catch (err) {
 38 |       console.log(err);
 39 |       Alert.alert("Error", "Folder couldn't be fetched");
 40 |     }
 41 |   }, [folderId, notes]);
 42 | 
 43 | 
 44 |   useEffect(() => {
 45 |     fetchFolderWithNotes();
 46 |   }, [fetchFolderWithNotes]);
 47 | 
 48 |   const handlePress = (noteId) => {
 49 |     navigation.navigate("UpdateNote", { id: noteId });
 50 |   }
 51 | 
 52 | 
 53 |   const getFlatList = folderNotes => {
 54 |     return <FlatList
 55 |       keyboardShouldPersistTaps="handled"
 56 |       contentContainerStyle={{ paddingTop: 5, paddingBottom: 200 }}
 57 |       data={folderNotes}
 58 |       keyExtractor={note => note.id}
 59 |       renderItem={({ item: note }) => <NoteCard {...{ note, onPress: () => handlePress(note.id) }} />}
 60 |     />
 61 |   }
 62 | 
 63 |   const onNotesSelected = async selectedNotes => {
 64 |     try {
 65 |       setLoading(true);
 66 |       const folders = await getData("folders");
 67 |       const newFoldersArr = folders.map(folder => {
 68 |         if (folder.id !== folderId) return folder;
 69 |         return { ...folder, notes: selectedNotes };
 70 |       });
 71 |       await storeData("folders", newFoldersArr);
 72 |       fetchFolderWithNotes();
 73 |       setLoading(false);
 74 |     }
 75 |     catch (err) {
 76 |       console.log(err);
 77 |       Alert.alert("Error", "Notes couldn't be added into folder");
 78 |     }
 79 |   }
 80 | 
 81 | 
 82 |   const frame = useSafeAreaFrame();
 83 |   const insets = useSafeAreaInsets();
 84 |   const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);
 85 | 
 86 |   const handleFolderNameFocus = () => {
 87 |     setFolderNameEditMode(true);
 88 |   }
 89 | 
 90 |   const handleBackClick = () => {
 91 |     if (folderNameEditMode) {
 92 |       setFolderNameEditInput(folder.name);
 93 |       setFolderNameEditMode(false);
 94 |     }
 95 |     else {
 96 |       navigation.goBack();
 97 |     }
 98 |   }
 99 | 
100 |   const changeFolderName = async () => {
101 |     try {
102 |       if (folderNameEditInput === folder.name) return;
103 |       const folders = await getData("folders");
104 |       const newFoldersArr = folders.map(folder => {
105 |         if (folder.id !== folderId) return folder;
106 |         return { ...folder, name: folderNameEditInput };
107 |       });
108 |       await storeData("folders", newFoldersArr);
109 |       setFolderNameEditMode(false);
110 |       setFolder({ ...folder, name: folderNameEditInput });
111 |     }
112 |     catch (err) {
113 |       console.log(err);
114 |       Alert.alert("Error", "Couldn't change folder name");
115 |     }
116 |   }
117 | 
118 |   useEffect(() => {
119 |     if (folderNameEditMode === false) folderNameRef?.current?.blur();
120 |   }, [folderNameEditMode]);
121 | 
122 | 
123 |   if (loading) {
124 |     return (
125 |       <View style={{ flex: 1, justifyContent: "center" }}>
126 |         <ActivityIndicator size="large" />
127 |       </View>
128 |     );
129 |   }
130 | 
131 |   return (
132 |     <View style={{ flex: 1 }}>
133 | 
134 |       {/* Header */}
135 |       <View style={{ height: headerHeight, paddingTop: insets.top, flexDirection: "row", alignItems: "center", backgroundColor: "white", borderBottomWidth: 2, borderBottomColor: "#eee" }}>
136 |         <Pressable style={{ margin: 10, width: 40, height: 40, justifyContent: "center", alignItems: "center" }} onPress={handleBackClick} android_ripple={{ color: "#ccc", radius: 20 }}>
137 |           <Icon name="arrow-back" size={22} color="#888" />
138 |         </Pressable>
139 | 
140 |         <TextInput
141 |           ref={folderNameRef}
142 |           style={{ flex: 1, fontSize: 17, color: "#666" }}
143 |           placeholder='Folder name...'
144 |           value={folderNameEditInput}
145 |           onChangeText={value => setFolderNameEditInput(value)}
146 |           onFocus={handleFolderNameFocus}
147 |           onSubmitEditing={changeFolderName}
148 |         />
149 |         {folderNameEditMode && (
150 |           <Pressable style={{ margin: 10, width: 40, height: 40, justifyContent: "center", alignItems: "center" }} disabled={folderNameEditInput === ""} onPress={changeFolderName} android_ripple={{ color: "#ccc", radius: 20 }}>
151 |             <Icon name="checkmark-outline" size={22} color="#555" />
152 |           </Pressable>
153 |         )}
154 |       </View>
155 | 
156 | 
157 |       {/* Body */}
158 |       <View style={{ flex: 1 }}>
159 | 
160 |         {folder.notes.length === 0 && (
161 |           <View style={{ marginTop: 200, alignItems: "center", justifyContent: "center" }}>
162 |             <Text style={{ fontSize: 16, color: "#555", paddingHorizontal: 20, textAlign: "center" }}>
163 |               No notes in this folder.. {"\n\n"} Tap + icon to add notes in this folder
164 |             </Text>
165 |           </View>
166 |         )}
167 | 
168 |         {folder.notes.length > 0 && (
169 |           <>
170 |             <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "600", fontSize: 15, paddingHorizontal: 10, paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: "#efefef" }}>{folder.notes.length} note{folder.notes.length > 1 && 's'}</Text>
171 |             {getFlatList(folder.notes)}
172 |           </>
173 |         )}
174 | 
175 |         <ActionButton onPress={() => navigation.navigate("NotesSelector", { onNotesSelected, unSelectableNotes: folder.notes.map(note => note.id) })} />
176 |       </View>
177 |     </View>
178 |   )
179 | }
180 | 
181 | export default FolderNotes


--------------------------------------------------------------------------------
/screens/Folders.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, TextInput, Pressable, Alert, ToastAndroid, ActivityIndicator } from 'react-native'
  2 | import React, { useCallback, useState } from 'react'
  3 | import ActionButton from '../components/ActionButton';
  4 | import Modal from '../components/Modal';
  5 | import { getData, storeData } from '../utils/storage';
  6 | import DraggableFlatList from 'react-native-draggable-flatlist';
  7 | import theme from '../style/theme';
  8 | import FolderCard from '../components/FolderCard';
  9 | import { useFocusEffect, useNavigation } from '@react-navigation/native';
 10 | 
 11 | const Folders = () => {
 12 |   const [folders, setFolders] = useState([]);
 13 |   const [createFolderModal, setCreateFolderModal] = useState(false);
 14 |   const [FolderNameInput, setFolderNameInput] = useState("");
 15 |   const navigation = useNavigation();
 16 |   const [loading, setLoading] = useState(true);
 17 | 
 18 |   useFocusEffect(useCallback(() => {
 19 |     const fetchFolders = async () => {
 20 |       try {
 21 |         const folders = (await getData("folders")) || [];
 22 |         setFolders(folders);
 23 |         setLoading(false);
 24 |       }
 25 |       catch (err) {
 26 |         console.log(err);
 27 |         Alert.alert("Error", "Folders couldn't be fetched");
 28 |       }
 29 |     }
 30 |     fetchFolders();
 31 |   }, []));
 32 | 
 33 |   const closeModal = () => {
 34 |     setCreateFolderModal(false);
 35 |     setFolderNameInput("");
 36 |   }
 37 | 
 38 |   const createFolder = async () => {
 39 |     try {
 40 |       if (FolderNameInput === "") return;
 41 |       const newFolder = {
 42 |         id: Math.floor(Math.random() * 10000),
 43 |         name: FolderNameInput,
 44 |         notes: [],
 45 |         createdAt: new Date(),
 46 |       };
 47 | 
 48 |       const newFoldersArr = [newFolder, ...folders];
 49 |       await storeData("folders", newFoldersArr);
 50 |       setFolders(newFoldersArr);
 51 |       ToastAndroid.show("Folder created", ToastAndroid.SHORT);
 52 |       closeModal();
 53 |     }
 54 |     catch (err) {
 55 |       console.log(err);
 56 |       Alert.alert("Error", "Some error is there!!");
 57 |     }
 58 |   }
 59 | 
 60 |   const changeOrderOfFolders = async ({ data }) => {
 61 |     try {
 62 |       const newFoldersArr = data;
 63 |       if (newFoldersArr.length === folders.length && JSON.stringify(newFoldersArr.map(folder => folder.id)) === JSON.stringify(folders.map(folder => folder.id))) return;
 64 |       setFolders(newFoldersArr);
 65 |       await storeData("folders", newFoldersArr);
 66 |     }
 67 |     catch (err) {
 68 |       console.log(err);
 69 |       Alert.alert("Error", "Some error is there!!");
 70 |     }
 71 |   }
 72 | 
 73 |   const handlePress = folderId => {
 74 |     navigation.navigate("FolderNotes", { folderId });
 75 |   }
 76 | 
 77 |   const getDraggableFlatList = folders => {
 78 |     return <DraggableFlatList
 79 |       keyboardShouldPersistTaps="handled"
 80 |       contentContainerStyle={{ paddingTop: 5, paddingBottom: 60 }}
 81 |       containerStyle={{ flex: 1 }}
 82 |       data={folders}
 83 |       keyExtractor={folder => folder.id}
 84 |       renderItem={({ item: folder, drag, isActive }) => <FolderCard {...{ folder, drag, isActive, handlePress, }} />}
 85 |       onDragEnd={changeOrderOfFolders}
 86 |       autoscrollThreshold={100}
 87 |     />
 88 |   }
 89 | 
 90 | 
 91 | 
 92 |   if (loading) {
 93 |     return (
 94 |       <View style={{ flex: 1, justifyContent: "center" }}>
 95 |         <ActivityIndicator size="large" />
 96 |       </View>
 97 |     );
 98 |   }
 99 | 
100 |   return (
101 |     <View style={{ flex: 1 }}>
102 | 
103 |       {folders.length === 0 && (
104 |         <View style={{ marginTop: 200, alignItems: "center", justifyContent: "center" }}>
105 |           <Text style={{ fontSize: 16, textAlign: "center", lineHeight: 30 }}>
106 |             No folders present.. Tap + icon to create new folder
107 |           </Text>
108 |         </View>
109 |       )}
110 | 
111 |       {folders.length > 0 && (
112 |         <>
113 |           <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "600", fontSize: 15, paddingHorizontal: 10, paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: "#efefef" }}>{folders.length} folder{folders.length > 1 && 's'}</Text>
114 |           {getDraggableFlatList(folders)}
115 |         </>
116 |       )}
117 | 
118 | 
119 | 
120 |       <ActionButton onPress={() => setCreateFolderModal(true)} />
121 |       <Modal visible={createFolderModal} onRequestClose={closeModal}>
122 |         <View>
123 |           <Text style={{ marginVertical: 10, fontWeight: '500', fontSize: 18, textAlign: 'center' }}>New folder</Text>
124 |           <TextInput
125 |             value={FolderNameInput}
126 |             onChangeText={text => setFolderNameInput(text)}
127 |             placeholder='Folder name'
128 |             style={{ backgroundColor: "#eee", paddingHorizontal: 15, paddingVertical: 5, borderRadius: 2 }}
129 |           />
130 | 
131 |           <View style={{ flexDirection: "row", justifyContent: "space-around", marginTop: 25, marginBottom: 10, paddingHorizontal: 8 }}>
132 |             <Pressable
133 |               onPress={createFolder}
134 |               disabled={!FolderNameInput}
135 |               style={{ backgroundColor: "#ddd", paddingHorizontal: 10, paddingVertical: 7, borderRadius: 3 }}
136 |               android_ripple={{ color: "#bbb", radius: 200 }}
137 |             >
138 |               <Text style={{ fontWeight: "500", color: "#444" }}>Create</Text>
139 |             </Pressable>
140 | 
141 |             <Pressable
142 |               onPress={closeModal}
143 |               style={{ backgroundColor: "#d46262", paddingHorizontal: 10, paddingVertical: 7, borderRadius: 3 }}
144 |               android_ripple={{ color: "#bbb", radius: 200 }}
145 |             >
146 |               <Text style={{ fontWeight: "500", color: "#fff" }}>Cancel</Text>
147 |             </Pressable>
148 |           </View>
149 |         </View>
150 |       </Modal>
151 |     </View>
152 |   )
153 | }
154 | 
155 | export default Folders


--------------------------------------------------------------------------------
/screens/Home.js:
--------------------------------------------------------------------------------
 1 | import { View } from 'react-native'
 2 | import React, { useEffect, useState } from 'react'
 3 | import Notes from '../components/Notes'
 4 | import ActionButton from '../components/ActionButton'
 5 | import NotesPageHeader from '../components/NotesPageHeader'
 6 | import { useNavigation } from '@react-navigation/native'
 7 | 
 8 | const Home = () => {
 9 | 
10 |   const [selectedNotes, setSelectedNotes] = useState([]);
11 |   const [isSearchMode, setIsSearchMode] = useState(false);
12 |   const [searchValue, setSearchValue] = useState("");
13 |   const [filteredNotes, setFilteredNotes] = useState(null);
14 |   const navigation = useNavigation();
15 |   useEffect(() => {
16 |     if (!isSearchMode) setSearchValue("");
17 |   }, [isSearchMode]);
18 | 
19 |   return (
20 |     <>
21 |       <NotesPageHeader {...{ selectedNotes, setSelectedNotes, setFilteredNotes, isSearchMode, setIsSearchMode, searchValue, setSearchValue }} />
22 |       <View style={{ flex: 1 }}>
23 |         <Notes {...{ selectedNotes, setSelectedNotes, filteredNotes, isSearchMode, setIsSearchMode, searchValue }} />
24 |         <ActionButton onPress={() => navigation.navigate("AddNote")} />
25 |       </View>
26 |     </>
27 |   )
28 | }
29 | 
30 | export default Home


--------------------------------------------------------------------------------
/screens/LabelsManager.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, TextInput, Pressable, ToastAndroid, Alert, ScrollView } from 'react-native'
  2 | import React, { useEffect, useState } from 'react'
  3 | import { useGlobalContext } from '../context/context';
  4 | import theme from '../style/theme';
  5 | import { storeData } from '../utils/storage';
  6 | import Modal from '../components/Modal';
  7 | 
  8 | const LabelsManager = () => {
  9 |   const [labelSearchInput, setlabelSearchInput] = useState("");
 10 |   const { notes, setNotes, labels, setLabels } = useGlobalContext();
 11 | 
 12 |   const [modalLabel, setModalLabel] = useState(null);
 13 |   const [editLabelInput, setEditLabelInput] = useState("");
 14 | 
 15 |   useEffect(() => {
 16 |     if (modalLabel) setEditLabelInput(modalLabel);
 17 |   }, [modalLabel]);
 18 | 
 19 |   const filteredLabels = labelSearchInput === "" ? labels : labels.filter(label => label.includes(labelSearchInput));
 20 | 
 21 |   const createLabel = async () => {
 22 |     try {
 23 |       if (labelSearchInput === "") return;
 24 |       const newLabelsArr = [...labels, labelSearchInput];
 25 |       await storeData("labels", newLabelsArr);
 26 |       setLabels(newLabelsArr);
 27 |       ToastAndroid.show("Label added", ToastAndroid.SHORT);
 28 |       setlabelSearchInput("");
 29 |     }
 30 |     catch (err) {
 31 |       console.log(err);
 32 |       Alert.alert("Error", "Some error is there!!");
 33 |     }
 34 |   }
 35 | 
 36 |   const saveLabel = async () => {
 37 |     try {
 38 |       if (!editLabelInput) return;
 39 |       if (modalLabel === editLabelInput) {
 40 |         setModalLabel(null);
 41 |         return;
 42 |       }
 43 | 
 44 |       const newLabelsArr = labels.map(label => {
 45 |         if (label !== modalLabel) return label;
 46 |         return editLabelInput;
 47 |       });
 48 |       await storeData("labels", newLabelsArr);
 49 |       setLabels(newLabelsArr);
 50 | 
 51 |       const newNotesArr = notes.map(note => {
 52 |         if (!note.labels) return note;
 53 |         note.labels = note.labels.map(label => {
 54 |           if (label !== modalLabel) return label;
 55 |           return editLabelInput;
 56 |         });
 57 |         return note;
 58 |       });
 59 |       await storeData("notes", newNotesArr);
 60 |       setNotes(newNotesArr);
 61 | 
 62 |       ToastAndroid.show("Label changed", ToastAndroid.SHORT);
 63 |       setModalLabel(null);
 64 |     }
 65 |     catch (err) {
 66 |       console.log(err);
 67 |       Alert.alert("Error", "Some error is there!!");
 68 |     }
 69 |   }
 70 | 
 71 |   const deleteLabel = async () => {
 72 |     try {
 73 |       const newLabelsArr = labels.filter(label => label !== modalLabel);
 74 |       await storeData("labels", newLabelsArr);
 75 |       setLabels(newLabelsArr);
 76 | 
 77 |       const newNotesArr = notes.map(note => {
 78 |         if (!note.labels) return note;
 79 |         note.labels = note.labels.filter(label => label !== modalLabel);
 80 |         return note;
 81 |       });
 82 |       await storeData("notes", newNotesArr);
 83 |       setNotes(newNotesArr);
 84 | 
 85 |       ToastAndroid.show("Label deleted from all such notes", ToastAndroid.SHORT);
 86 |       setModalLabel(null);
 87 |     }
 88 |     catch (err) {
 89 |       console.log(err);
 90 |       Alert.alert("Error", "Some error is there!!");
 91 |     }
 92 |   }
 93 | 
 94 |   return (
 95 |     <View style={{ height: '100%' }}>
 96 |       <TextInput autoFocus
 97 |         value={labelSearchInput}
 98 |         onChangeText={text => setlabelSearchInput(text)}
 99 |         placeholder='Search or create label...'
100 |         style={{ color: "#666", fontWeight: "500", fontSize: 17, backgroundColor: "white", paddingVertical: 10, paddingHorizontal: 15, borderBottomWidth: 1, borderBottomColor: '#ddd', borderTopColor: "#ddd", borderTopWidth: 1 }}
101 |       />
102 | 
103 |       <Text style={{ color: "#666", margin: 10 }}>{labels.length} total</Text>
104 | 
105 |       {labelSearchInput !== "" && !labels.includes(labelSearchInput) && (
106 |         <Pressable onPress={createLabel} style={{ margin: 20 }}>
107 |           <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "500" }}>+ Create label `{labelSearchInput}`</Text>
108 |         </Pressable>
109 |       )}
110 | 
111 |       <ScrollView contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap", paddingBottom: 65, }} keyboardShouldPersistTaps="always">
112 |         {filteredLabels.map(label => (
113 |           <Pressable key={label}
114 |             onPress={() => setModalLabel(label)}
115 |             style={{ margin: 10, paddingVertical: 5, paddingHorizontal: 10, borderRadius: 3, backgroundColor: "#0193fe" }}
116 |             android_ripple={{ color: theme.PRIMARY_COLOR, radius: 200 }}
117 |           >
118 |             <Text style={{ color: "white", fontSize: 17 }}> {label} </Text>
119 |           </Pressable>
120 |         ))}
121 |       </ScrollView>
122 | 
123 | 
124 | 
125 |       <Modal visible={modalLabel !== null} onRequestClose={() => setModalLabel(null)}>
126 |         <View style={{ paddingHorizontal: 10, paddingTop: 15, paddingBottom: 10, }}>
127 | 
128 |           <TextInput
129 |             style={{ marginBottom: 10, paddingHorizontal: 5, borderBottomWidth: 1, borderBottomColor: "#ddd", fontSize: 17, color: "#555" }}
130 |             placeholder='Label..'
131 |             value={editLabelInput}
132 |             onChangeText={text => setEditLabelInput(text)} />
133 | 
134 |           <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
135 |             <Pressable
136 |               disabled={!editLabelInput}
137 |               onPress={saveLabel}
138 |               style={{ paddingHorizontal: 15, paddingVertical: 10 }}
139 |               android_ripple={{ color: "#bbb", radius: 200 }}
140 |             >
141 |               <Text style={{ textAlign: "center", fontSize: 16 }}>Save</Text>
142 |             </Pressable>
143 | 
144 |             <Pressable
145 |               onPress={deleteLabel}
146 |               style={{ paddingHorizontal: 15, paddingVertical: 10 }}
147 |               android_ripple={{ color: "#bbb", radius: 200 }}
148 |             >
149 |               <Text style={{ textAlign: "center", color: "red", fontSize: 16 }}>Delete</Text>
150 |             </Pressable>
151 |           </View>
152 |         </View>
153 |       </Modal>
154 |     </View>
155 |   )
156 | }
157 | 
158 | export default LabelsManager
159 | 


--------------------------------------------------------------------------------
/screens/NoteLabelsManager.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, TextInput, Pressable, Alert, ToastAndroid, BackHandler, ScrollView } from 'react-native'
  2 | import React, { useEffect, useState } from 'react'
  3 | import theme from '../style/theme';
  4 | import { useGlobalContext } from '../context/context';
  5 | import { storeData } from '../utils/storage';
  6 | import { useNavigation, useRoute } from '@react-navigation/native';
  7 | import ActionButton from '../components/ActionButton';
  8 | 
  9 | const NoteLabelsManager = () => {
 10 | 
 11 |   const navigation = useNavigation();
 12 |   const route = useRoute();
 13 |   const { notes, setNotes, labels, setLabels } = useGlobalContext();
 14 |   const [labelInput, setlabelInput] = useState("");
 15 | 
 16 |   const noteId = route.params.noteId;
 17 |   const note = notes.find(note => note.id === noteId);
 18 |   const [tempMarkedLabels, setTempMarkedLabels] = useState(note.labels);
 19 | 
 20 |   useEffect(() => {
 21 |     setTempMarkedLabels(note.labels);
 22 |   }, [note.labels]);
 23 | 
 24 |   const filteredLabels = labelInput === "" ? labels : labels.filter(label => label.includes(labelInput));
 25 |   const reorderedLabels = [...filteredLabels.filter(label => note.labels.includes(label)), ...filteredLabels.filter(label => !note.labels.includes(label))];
 26 | 
 27 | 
 28 |   const areLabelsModified = (() => {
 29 |     if (tempMarkedLabels.length !== note.labels.length) return true;
 30 |     return tempMarkedLabels.some(tempMarkedLabel => !note.labels.includes(tempMarkedLabel));
 31 |   })();
 32 | 
 33 | 
 34 |   useEffect(() => {
 35 |     const backAction = () => {
 36 |       if (!areLabelsModified) return false;
 37 |       Alert.alert("Discard changes", "", [{ text: "Cancel" }, { text: "Discard", onPress: navigation.goBack }], { cancelable: true });
 38 |       return true;
 39 |     }
 40 |     BackHandler.addEventListener("hardwareBackPress", backAction);
 41 |     return () => BackHandler.removeEventListener("hardwareBackPress", backAction);
 42 |   }, [areLabelsModified, navigation]);
 43 | 
 44 | 
 45 | 
 46 |   const handleLabelInputChange = (text) => {
 47 |     setlabelInput(text);
 48 |   }
 49 | 
 50 | 
 51 |   const createAndAddLabel = async () => {
 52 |     try {
 53 |       if (labelInput === "") return;
 54 |       const newLabelsArr = [...labels, labelInput];
 55 |       await storeData("labels", newLabelsArr);
 56 |       setLabels(newLabelsArr);
 57 | 
 58 |       const newNotesArr = notes.map(note => {
 59 |         if (note.id !== noteId) return note;
 60 |         return { ...note, labels: [...(note.labels || []), labelInput] };
 61 |       });
 62 |       await storeData("notes", newNotesArr);
 63 |       setNotes(newNotesArr);
 64 |       ToastAndroid.show("Label added", ToastAndroid.SHORT);
 65 |       setlabelInput("");
 66 |     }
 67 |     catch (err) {
 68 |       console.log(err);
 69 |       Alert.alert("Error", "Some error is there!!");
 70 |     }
 71 |   }
 72 | 
 73 | 
 74 |   const changeLabelsOfNote = async () => {
 75 |     try {
 76 |       const newNotesArr = notes.map(note => {
 77 |         if (note.id !== noteId) return note;
 78 |         return { ...note, labels: tempMarkedLabels };
 79 |       });
 80 |       await storeData("notes", newNotesArr);
 81 |       setNotes(newNotesArr);
 82 |       setlabelInput("");
 83 |       navigation.goBack();
 84 |     }
 85 |     catch (err) {
 86 |       console.log(err);
 87 |       Alert.alert("Error", "Some error is there!!");
 88 |     }
 89 |   }
 90 | 
 91 | 
 92 |   const toggleTempLabelForNote = label => {
 93 |     if (tempMarkedLabels.includes(label)) setTempMarkedLabels(tempMarkedLabels.filter(tempLabel => tempLabel !== label));
 94 |     else setTempMarkedLabels([...tempMarkedLabels, label]);
 95 |   }
 96 | 
 97 | 
 98 |   return (
 99 |     <View style={{ height: '100%' }}>
100 |       <TextInput autoFocus value={labelInput} onChangeText={handleLabelInputChange} placeholder='Search or create label...' style={{ color: "#666", fontWeight: "500", fontSize: 17, backgroundColor: "white", paddingVertical: 10, paddingHorizontal: 15, borderBottomWidth: 1, borderBottomColor: '#ddd', }} />
101 | 
102 |       <Text style={{ color: "#666", margin: 10 }}>{labels.length} total, {tempMarkedLabels.length} selected</Text>
103 | 
104 |       {labelInput !== "" && !labels.includes(labelInput) && (
105 |         <Pressable onPress={createAndAddLabel} style={{ margin: 20 }}>
106 |           <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "500" }}>+ Create and add label `{labelInput}`</Text>
107 |         </Pressable>
108 |       )}
109 | 
110 |       <ScrollView contentContainerStyle={{ paddingBottom: 65, flexDirection: "row", flexWrap: "wrap" }} keyboardShouldPersistTaps="always">
111 |         {reorderedLabels.map(label => (
112 |           <Pressable key={label}
113 |             onPress={() => toggleTempLabelForNote(label)}
114 |             style={{ margin: 10, paddingVertical: 5, paddingHorizontal: 10, borderRadius: 3, backgroundColor: tempMarkedLabels.includes(label) ? "#0193fe" : "#dff6ff" }}
115 |             android_ripple={{ color: theme.PRIMARY_COLOR, radius: 200 }}
116 |           >
117 |             <Text style={{ color: tempMarkedLabels.includes(label) ? "white" : theme.PRIMARY_COLOR, fontSize: 17 }}>
118 |               {label}
119 |             </Text>
120 |           </Pressable>
121 |         ))}
122 |       </ScrollView>
123 | 
124 |       <ActionButton iconName="checkmark-circle" onPress={changeLabelsOfNote} isVisible={areLabelsModified} />
125 |     </View>
126 |   )
127 | }
128 | 
129 | export default NoteLabelsManager
130 | 


--------------------------------------------------------------------------------
/screens/NotesSelector.js:
--------------------------------------------------------------------------------
 1 | import { View, Text, FlatList, Pressable } from 'react-native'
 2 | import React, { useState } from 'react'
 3 | import ActionButton from '../components/ActionButton'
 4 | import { useGlobalContext } from '../context/context';
 5 | import NoteCardText from '../components/NoteCardText';
 6 | import { useNavigation, useRoute } from '@react-navigation/native';
 7 | import theme from '../style/theme';
 8 | import Icon from 'react-native-vector-icons/Ionicons';
 9 | 
10 | 
11 | const NoteSelectorCard = ({ note, onPress, isAddedInSelection }) => {
12 |   return (
13 |     <Pressable
14 |       onPress={onPress}
15 |       onLongPress={onPress}
16 |       style={{
17 |         marginBottom: 20, marginHorizontal: 10, borderRadius: 5, backgroundColor: "#fff", borderWidth: 2,
18 |         borderColor: isAddedInSelection ? theme.PRIMARY_COLOR : "#fff"
19 |       }}
20 |       android_ripple={{ color: "#bbb", radius: 200 }}
21 |     >
22 |       {isAddedInSelection && (
23 |         <View style={{ position: "absolute", top: -10, left: -10, width: 20, height: 20, borderRadius: 50, backgroundColor: theme.PRIMARY_COLOR, justifyContent: "center", alignItems: "center" }} >
24 |           <Icon name="checkmark-outline" size={15} color="#fff" style={{ fontWeight: "600" }} />
25 |         </View>
26 |       )}
27 |       <NoteCardText note={note} />
28 |     </Pressable>
29 |   );
30 | }
31 | 
32 | 
33 | const NotesSelector = () => {
34 |   const [selectedNotes, setSelectedNotes] = useState([]);
35 |   const { notes } = useGlobalContext();
36 |   const navigation = useNavigation();
37 |   const route = useRoute();
38 |   const { unSelectableNotes = [], onNotesSelected } = route.params;
39 |   const selectableNotes = notes.filter(note => !unSelectableNotes.includes(note.id));
40 | 
41 |   const handlePress = (id) => {
42 |     if (selectedNotes.includes(id)) {
43 |       setSelectedNotes(selectedNotes.filter(selectedNoteId => selectedNoteId !== id));
44 |     }
45 |     else {
46 |       setSelectedNotes([...selectedNotes, id]);
47 |     }
48 |   }
49 | 
50 |   const getFlatList = notes => {
51 |     return <FlatList
52 |       keyboardShouldPersistTaps="handled"
53 |       contentContainerStyle={{ paddingTop: 15, paddingBottom: 200 }}
54 |       data={notes}
55 |       keyExtractor={note => note.id}
56 |       renderItem={({ item: note }) => (
57 |         <NoteSelectorCard
58 |           note={note}
59 |           onPress={() => handlePress(note.id)}
60 |           isAddedInSelection={selectedNotes.includes(note.id)}
61 |         />
62 |       )}
63 |     />
64 |   }
65 | 
66 |   const onDone = () => {
67 |     onNotesSelected(selectedNotes);
68 |     navigation.goBack();
69 |   }
70 | 
71 | 
72 | 
73 |   return (
74 |     <View style={{ flex: 1 }}>
75 |       <Text style={{ margin: 15, fontSize: 17, fontWeight: '500', color: theme.PRIMARY_COLOR }}>{selectedNotes.length} selected</Text>
76 |       {getFlatList(selectableNotes)}
77 | 
78 |       <ActionButton iconName="checkmark-outline" onPress={onDone} isVisible={selectedNotes.length > 0} />
79 |     </View>
80 |   )
81 | }
82 | 
83 | export default NotesSelector


--------------------------------------------------------------------------------
/screens/Trash.js:
--------------------------------------------------------------------------------
  1 | import { View, Text, Alert, ToastAndroid, ScrollView, StyleSheet, Pressable } from 'react-native'
  2 | import React, { useCallback, useState } from 'react'
  3 | import { getData, storeData } from '../utils/storage';
  4 | import { useFocusEffect } from '@react-navigation/native';
  5 | import theme from '../style/theme';
  6 | import { FlatList } from 'react-native-gesture-handler';
  7 | import Icon from 'react-native-vector-icons/Ionicons';
  8 | import { convertToXTimeAgo } from '../utils/dateformat';
  9 | import { useGlobalContext } from '../context/context';
 10 | import Modal from '../components/Modal';
 11 | 
 12 | 
 13 | const TrashNoteCard = ({ note, setNoteModalId }) => {
 14 |   return (
 15 |     <Pressable
 16 |       onPress={() => setNoteModalId(note.id)}
 17 |       android_ripple={{ color: "#bbb", radius: 200 }}
 18 |       style={styles.noteCard}
 19 |       delayLongPress={100}
 20 |     >
 21 |       <View>
 22 |         <View style={{ flexDirection: "row", alignItems: "center", marginTop: 5 }}>
 23 |           {note.color && (
 24 |             <View style={{ marginHorizontal: 5, borderRadius: 500, width: 10, height: 10, backgroundColor: note.color }}></View>
 25 |           )}
 26 |           <Text style={{ flex: 1, color: "#999", fontSize: 13 }}>{convertToXTimeAgo(note.updatedAt)}</Text>
 27 |           {note.isBookmarked && (
 28 |             <Icon name={"bookmark"} size={17} color="#888" style={{ marginHorizontal: 5 }} />
 29 |           )}
 30 |           {note.isPinned && (
 31 |             <Icon name={"pin"} size={17} color="#888" style={{ marginHorizontal: 5 }} />
 32 |           )}
 33 |         </View>
 34 | 
 35 |         {note.labels.length > 0 && (
 36 |           <ScrollView horizontal contentContainerStyle={{ flexDirection: "row", alignItems: "center", paddingTop: 5 }}>
 37 |             {note.labels?.map(label => (
 38 |               <Text key={label} style={{ marginRight: 10, padding: 5, backgroundColor: "#eee", color: "#666", borderRadius: 3, fontSize: 13 }}>{label}</Text>
 39 |             ))}
 40 |           </ScrollView>
 41 |         )}
 42 | 
 43 |         {note.reminder?.dateTime && (
 44 |           <Text>+ Reminder</Text>
 45 |         )}
 46 | 
 47 |         <Text numberOfLines={5} style={{ color: "#555", fontSize: 15, marginTop: 10 }}> {note.text} </Text>
 48 |       </View>
 49 |     </Pressable>
 50 |   );
 51 | }
 52 | 
 53 | 
 54 | const Trash = () => {
 55 |   const [trashNotes, setTrashNotes] = useState([]);
 56 |   const { notes, setNotes } = useGlobalContext();
 57 |   const [noteModalId, setNoteModalId] = useState(null);
 58 | 
 59 |   useFocusEffect(useCallback(() => {
 60 |     const fetchTrash = async () => {
 61 |       try {
 62 |         const trashNotes = (await getData("trashNotes")) || [];
 63 |         setTrashNotes(trashNotes);
 64 |       }
 65 |       catch (err) {
 66 |         Alert.alert("Error", "Some error is there!!");
 67 |       }
 68 |     }
 69 |     fetchTrash();
 70 |   }, []));
 71 | 
 72 |   const deleteNotePermanently = async noteId => {
 73 |     try {
 74 |       const newTrashNotesArr = trashNotes.filter(trashNote => trashNote.id !== noteId);
 75 |       await storeData("trashNotes", newTrashNotesArr);
 76 |       setTrashNotes(newTrashNotesArr);
 77 |       setNoteModalId(null);
 78 |       ToastAndroid.show("Note permanently deleted", ToastAndroid.SHORT);
 79 |     }
 80 |     catch (err) {
 81 |       Alert.alert("Error", "Some error is there!!");
 82 |     }
 83 |   }
 84 | 
 85 |   const emptyTrash = async () => {
 86 |     try {
 87 |       await storeData("trashNotes", []);
 88 |       setTrashNotes([]);
 89 |       ToastAndroid.show("Trash is empty now", ToastAndroid.SHORT);
 90 |     }
 91 |     catch (err) {
 92 |       Alert.alert("Error", "Some error is there!!");
 93 |     }
 94 |   }
 95 | 
 96 |   const handleEmptyTrashRequest = () => {
 97 |     Alert.alert(
 98 |       "Are you sure you want to empty the trash?", "You won't be able to restore these notes later.",
 99 |       [{ text: "Cancel" }, { text: "OK", onPress: emptyTrash }],
100 |       { cancelable: true }
101 |     );
102 |   }
103 | 
104 | 
105 |   const restoreNote = async noteId => {
106 |     try {
107 |       const note = trashNotes.find(note => note.id === noteId);
108 |       const newNotesArr = [...notes, note];
109 |       await storeData("notes", newNotesArr);
110 |       setNotes(newNotesArr);
111 | 
112 |       const newTrashNotesArr = trashNotes.filter(trashNote => trashNote.id !== noteId);
113 |       await storeData("trashNotes", newTrashNotesArr);
114 |       setTrashNotes(newTrashNotesArr);
115 |       setNoteModalId(null);
116 |       ToastAndroid.show("Note restored", ToastAndroid.SHORT);
117 |     }
118 |     catch (err) {
119 |       Alert.alert("Error", "Some error is there!!");
120 |     }
121 |   }
122 | 
123 |   const restoreAllNotes = async () => {
124 |     try {
125 |       const newNotesArr = [...notes, ...trashNotes];
126 |       await storeData("notes", newNotesArr);
127 |       setNotes(newNotesArr);
128 |       await storeData("trashNotes", []);
129 |       setTrashNotes([]);
130 |       ToastAndroid.show("All notes restored", ToastAndroid.SHORT);
131 |     }
132 |     catch (err) {
133 |       Alert.alert("Error", "Some error is there!!");
134 |     }
135 |   }
136 | 
137 |   const handleRestoreRequest = () => {
138 |     Alert.alert(
139 |       "Restore all notes", null,
140 |       [{ text: "Cancel" }, { text: "OK", onPress: restoreAllNotes }],
141 |       { cancelable: true }
142 |     );
143 |   }
144 | 
145 | 
146 |   return (
147 |     <View>
148 |       {trashNotes.length === 0 && (
149 |         <View style={{ marginTop: 200, alignItems: "center", justifyContent: "center" }}>
150 |           <Text style={{ fontSize: 16 }}>
151 |             Trash is empty
152 |           </Text>
153 |         </View>
154 |       )}
155 | 
156 |       {trashNotes.length > 0 && (
157 |         <>
158 |           <View style={{ flexDirection: "row", alignItems: "center", marginVertical: 20, marginHorizontal: 20 }}>
159 |             <Text style={{ color: theme.PRIMARY_COLOR, fontWeight: "600", fontSize: 15 }}>{trashNotes.length} note{trashNotes.length > 1 && 's'} in trash</Text>
160 |             <Pressable
161 |               onPress={handleRestoreRequest}
162 |               style={{ marginLeft: "auto", backgroundColor: "#ddd", paddingHorizontal: 10, paddingVertical: 7, borderRadius: 3 }}
163 |               android_ripple={{ color: "#bbb", radius: 200 }}
164 |             >
165 |               <Text>Restore</Text>
166 |             </Pressable>
167 |             <Pressable
168 |               onPress={handleEmptyTrashRequest}
169 |               style={{ marginLeft: 5, backgroundColor: "#cc0000", paddingHorizontal: 10, paddingVertical: 7, borderRadius: 3 }}
170 |               android_ripple={{ color: "#ff0000", radius: 200 }}
171 |             >
172 |               <Text style={{ color: "white" }}>Empty</Text>
173 |             </Pressable>
174 |           </View>
175 | 
176 |           <FlatList
177 |             contentContainerStyle={{ paddingBottom: 200 }}
178 |             data={trashNotes}
179 |             keyExtractor={note => note.id}
180 |             renderItem={({ item: note }) => <TrashNoteCard {...{ note, setNoteModalId }} />}
181 |           />
182 |         </>
183 | 
184 |       )}
185 | 
186 |       <Modal visible={noteModalId !== null} onRequestClose={() => setNoteModalId(null)}>
187 |         <View>
188 |           <Pressable
189 |             onPress={() => restoreNote(noteModalId)}
190 |             style={{ paddingVertical: 10 }}
191 |             android_ripple={{ color: "#bbb", radius: 200 }}>
192 |             <Text style={{ color: "blue", textAlign: "center" }}>Restore</Text>
193 |           </Pressable>
194 | 
195 |           <Pressable
196 |             onPress={() => deleteNotePermanently(noteModalId)}
197 |             style={{ paddingVertical: 10 }}
198 |             android_ripple={{ color: "#bbb", radius: 200 }}>
199 |             <Text style={{ color: "red", textAlign: "center" }}>Delete permanently</Text>
200 |           </Pressable>
201 |         </View>
202 |       </Modal>
203 |     </View>
204 |   )
205 | }
206 | 
207 | export default Trash
208 | 
209 | const styles = StyleSheet.create({
210 |   noteCard: {
211 |     marginBottom: 20,
212 |     marginHorizontal: 10,
213 |     borderRadius: 3,
214 |     paddingHorizontal: 15,
215 |     paddingTop: 10,
216 |     paddingBottom: 15,
217 |     backgroundColor: "white",
218 |     borderBottomWidth: 2,
219 |     borderBottomColor: "#e4e4e4",
220 |   }
221 | })


--------------------------------------------------------------------------------
/screens/UpdateNote.js:
--------------------------------------------------------------------------------
  1 | import { Alert, Pressable, Text, TextInput, View, ToastAndroid, BackHandler } from 'react-native'
  2 | import React, { useCallback, useEffect, useState } from 'react'
  3 | import { useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
  4 | import { storeData } from '../utils/storage';
  5 | import { useGlobalContext } from '../context/context';
  6 | import Icon from 'react-native-vector-icons/Ionicons';
  7 | import { convertToXTimeAgo } from '../utils/dateformat';
  8 | import { SheetManager } from "react-native-actions-sheet";
  9 | import NoteOptionsActionSheet from '../components/NoteOptionsActionSheet';
 10 | import moment from 'moment';
 11 | import NoteReminderModal from '../components/NoteReminderModal';
 12 | import ActionButton from '../components/ActionButton';
 13 | import { SharedElement } from 'react-navigation-shared-element';
 14 | 
 15 | const UpdateNote = () => {
 16 |   const navigation = useNavigation();
 17 |   const route = useRoute();
 18 |   const isFocussed = useIsFocused();
 19 |   const { notes, setNotes } = useGlobalContext();
 20 |   const [noteReminderModal, setNoteReminderModal] = useState(false);
 21 | 
 22 |   const noteId = route.params.id;
 23 |   const note = notes.find(note => note.id === noteId);
 24 |   const [formData, setFormData] = useState({ text: note.text });
 25 | 
 26 |   useEffect(() => {
 27 |     const backAction = () => {
 28 |       if (!isFocussed) return false;
 29 |       if (formData.text === "" || formData.text === note?.text) return false;
 30 |       Alert.alert("Your changes have not been saved.", "Do you want to save it?", [{ text: "Yes", onPress: updateNote }, { text: "No", onPress: navigation.goBack }], { cancelable: true });
 31 |       return true;
 32 |     }
 33 |     BackHandler.addEventListener("hardwareBackPress", backAction);
 34 |     return () => BackHandler.removeEventListener("hardwareBackPress", backAction);
 35 |   }, [isFocussed, formData, navigation, updateNote, note?.text]);
 36 | 
 37 | 
 38 |   const handleChange = (name, value) => {
 39 |     setFormData({ ...formData, [name]: value });
 40 |   }
 41 | 
 42 |   const updateNote = useCallback(async () => {
 43 |     try {
 44 |       if (formData.text === "") return;
 45 |       const newNotesArr = notes.map(note => {
 46 |         if (note.id !== noteId) return note;
 47 |         return { ...note, text: formData.text, updatedAt: new Date() };
 48 |       })
 49 |       await storeData("notes", newNotesArr);
 50 |       setNotes(newNotesArr);
 51 |       navigation.navigate("Home");
 52 |       ToastAndroid.show("Note saved", ToastAndroid.SHORT);
 53 |     }
 54 |     catch (err) {
 55 |       Alert.alert("Error", "Some error is there!!");
 56 |     }
 57 |   }, [formData, notes, setNotes, navigation, noteId]);
 58 | 
 59 | 
 60 |   const toggleBookmark = async () => {
 61 |     try {
 62 |       const newNotesArr = notes.map(note => {
 63 |         if (note.id !== noteId) return note;
 64 |         return { ...note, isBookmarked: !note.isBookmarked };
 65 |       })
 66 |       await storeData("notes", newNotesArr);
 67 |       setNotes(newNotesArr);
 68 |     }
 69 |     catch (err) {
 70 |       Alert.alert("Error", "Some error is there!!");
 71 |     }
 72 |   }
 73 | 
 74 |   const updatedAt = convertToXTimeAgo(note.updatedAt);
 75 |   const isReminderTimePassed = new Date(note.reminder?.dateTime).getTime() < new Date().getTime();
 76 | 
 77 | 
 78 |   return (
 79 |     <View style={{ flex: 1 }}>
 80 |       <SharedElement id={`note.${note.id}`} style={{ flex: 1 }}>
 81 |         <View style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
 82 |           <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", paddingHorizontal: 15, paddingVertical: 10 }}>
 83 |             {note.labels?.map(label => (
 84 |               <Text key={label} style={{ margin: 5, padding: 5, backgroundColor: "#eee", color: "#666", borderRadius: 3, fontSize: 15 }}>{label}</Text>
 85 |             ))}
 86 |           </View>
 87 | 
 88 |           {note.reminder?.dateTime && (
 89 |             <Pressable onPress={() => setNoteReminderModal(true)} style={{ flexDirection: "row", alignSelf: "flex-start", margin: 10, marginTop: 0, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: "#eee", borderRadius: 3, }} android_ripple={{ color: "#bbb", radius: 200 }}>
 90 |               <Icon name="alarm-outline" size={20} color="gray" style={{ marginRight: 10 }} />
 91 |               <Text style={[{ color: "#666", fontSize: 15 }, isReminderTimePassed && { textDecorationLine: 'line-through' }]}>
 92 |                 {moment(note.reminder.dateTime).format("lll")}
 93 |               </Text>
 94 |             </Pressable>
 95 |           )}
 96 | 
 97 |           <TextInput
 98 |             value={formData.text}
 99 |             onChangeText={text => handleChange("text", text)}
100 |             multiline={true}
101 |             style={{ paddingHorizontal: 20, paddingBottom: 100, fontSize: 16, color: "#555" }}
102 |             placeholder="Your note"
103 |           />
104 |         </View>
105 |       </SharedElement>
106 | 
107 | 
108 |       <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ddd", paddingVertical: 4, paddingHorizontal: 15 }}>
109 |         <Text style={{ color: "#444" }}>Edited {updatedAt}</Text>
110 |         <Pressable onPress={toggleBookmark} android_ripple={{ color: "#ccc", radius: 30 }}>
111 |           <Icon name={note.isBookmarked ? "bookmark" : "bookmark-outline"} size={25} color="#444" style={{ padding: 5 }} />
112 |         </Pressable>
113 |         <Pressable onPress={() => SheetManager.show("noteOptionsActionSheet")} android_ripple={{ color: "#ccc", radius: 30 }}>
114 |           <Icon name="ellipsis-vertical" size={25} color="#444" style={{ padding: 5 }} />
115 |         </Pressable>
116 |       </View>
117 | 
118 |       <ActionButton iconName='checkmark' onPress={updateNote} style={{ bottom: 50 }} isVisible={formData.text !== note?.text} />
119 |       <NoteOptionsActionSheet {...{ noteId, formData }} />
120 | 
121 |       {note.reminder?.dateTime && (
122 |         <NoteReminderModal {...{ noteReminderModal, setNoteReminderModal, noteId }} />
123 |       )}
124 |     </View>
125 |   )
126 | }
127 | 
128 | 
129 | UpdateNote.sharedElements = route => {
130 |   return [
131 |     {
132 |       id: `note.${route.params.id}`,
133 |       animation: "fade"
134 |     }
135 |   ];
136 | }
137 | 
138 | export default UpdateNote


--------------------------------------------------------------------------------
/screens/index.js:
--------------------------------------------------------------------------------
1 | export { default as AddNote } from "./AddNote"
2 | export { default as Folders } from "./Folders"
3 | export { default as FolderNotes } from "./FolderNotes"
4 | export { default as Home } from "./Home"
5 | export { default as LabelsManager } from "./LabelsManager"
6 | export { default as NoteLabelsManager } from "./NoteLabelsManager"
7 | export { default as NotesSelector } from "./NotesSelector"
8 | export { default as Trash } from "./Trash"
9 | export { default as UpdateNote } from "./UpdateNote"


--------------------------------------------------------------------------------
/style/theme.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   PRIMARY_COLOR: '#1d9bff'
3 | };


--------------------------------------------------------------------------------
/utils/dateformat.js:
--------------------------------------------------------------------------------
 1 | const convertToFullDate = (dateString) => {
 2 |   return new Date(dateString).toLocaleString("en-IN", { day: "numeric", month: "short", year: "numeric", hour: "numeric", minute: "numeric" });
 3 | }
 4 | 
 5 | const convertToXTimeAgo = (dateString) => {
 6 |   const seconds = Math.floor((new Date() - new Date(dateString)) / 1000);
 7 |   const mins = Math.floor(seconds / 60);
 8 |   const hours = Math.floor(mins / 60);
 9 |   const days = Math.floor(hours / 24);
10 |   const months = Math.floor(days / 30);
11 |   const years = Math.floor(days / 365);
12 | 
13 |   if (years > 0) {
14 |     return `${years} ${years === 1 ? "yr" : "yrs"} ago`;
15 |   }
16 |   if (months > 0) {
17 |     return `${months} ${months === 1 ? "month" : "months"} ago`;
18 |   }
19 |   if (days > 0) {
20 |     return `${days} ${days === 1 ? "day" : "days"} ago`;
21 |   }
22 |   if (hours > 0) {
23 |     return `${hours} ${hours === 1 ? "hr" : "hrs"} ago`;
24 |   }
25 |   if (mins > 0) {
26 |     return `${mins} ${mins === 1 ? "min" : "mins"} ago`;
27 |   }
28 |   return "just now";
29 | }
30 | 
31 | export { convertToFullDate as convertToAbsoluteDate, convertToXTimeAgo }


--------------------------------------------------------------------------------
/utils/storage.js:
--------------------------------------------------------------------------------
 1 | import AsyncStorage from '@react-native-async-storage/async-storage';
 2 | 
 3 | const storeData = async (key, value) => {
 4 |   try {
 5 |     const jsonValue = JSON.stringify(value);
 6 |     await AsyncStorage.setItem(key, jsonValue);
 7 |     return Promise.resolve();
 8 |   } catch (e) {
 9 |     return Promise.reject(e);
10 |   }
11 | }
12 | 
13 | const getData = async (key) => {
14 |   try {
15 |     const jsonValue = await AsyncStorage.getItem(key)
16 |     return jsonValue != null ? JSON.parse(jsonValue) : null;
17 |   } catch (e) {
18 |     return Promise.reject(e);
19 |   }
20 | }
21 | 
22 | export { storeData, getData };


--------------------------------------------------------------------------------