New storage: mmkv

android/app/src/main/java/com/worknotes/MainActivity.kt

@@ -1,12 +1,18 @@
 package com.worknotes
 
+import android.os.Bundle;
+
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
 
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

index.js

@@ -1,9 +1,21 @@
-/**
- * @format
- */
-
 import {AppRegistry} from 'react-native';
 import App from './src/App';
 import {name as appName} from './app.json';
 
-AppRegistry.registerComponent(appName, () => App);
+import getStore from './src/store';
+import {PersistGate} from 'redux-persist/integration/react';
+import {Provider} from 'react-redux';
+
+const {store, persistor} = getStore();
+
+const ReduxProvider = () => {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
+    </Provider>
+  );
+};
+
+AppRegistry.registerComponent(appName, () => ReduxProvider);

package.json

@@ -11,20 +11,23 @@
     "test": "jest"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/native": "^6.1.17",
-    "@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
     "moment": "^2.30.1",
     "react": "18.2.0",
     "react-native": "0.73.6",
     "react-native-gesture-handler": "^2.16.0",
+    "react-native-mmkv": "^2.12.2",
     "react-native-reanimated": "^3.8.1",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-screens": "^3.30.1",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-screens": "^3.34.0",
     "react-native-svg": "^15.1.0",
     "react-redux": "^9.1.0",
     "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^3.1.0",
+    "reselect": "^5.1.1",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

src/components/list.tsx

@@ -21,8 +21,8 @@ const List = ({notes, navigation}: Props) => {
           style={[styles.noteContainer, {backgroundColor: colors.card}]}
           onPress={() => {
             navigation.push('ViewNote', {
-              notes: notes,
-              note: item.note,
+              id: item.id,
+              text: item.text,
               date: item.date,
             });
           }}>
@@ -31,7 +31,7 @@ const List = ({notes, navigation}: Props) => {
               {moment(item.date).format('dddd, MMMM Do YYYY')}
             </Text>
             <Text style={[styles.noteContent, {color: colors.text}]}>
-              {item.note}
+              {item.text}
             </Text>
             <Text style={[styles.noteDate, {color: colors.text}]}>
               {moment(item.date).fromNow()}

src/screens/add.tsx

@@ -9,19 +9,29 @@ import {
 } from 'react-native';
 import {useTheme} from '@react-navigation/native';
 
-import {storeData} from '../services/storage';
+import {useAppDispatch} from '../store';
+import {createNote} from '../store/app';
 import styles from '../styles';
 
-const AddNote = ({route, navigation}) => {
+const getUniqueId = () => {
+  return Math.random().toString(36).substr(2, 9);
+};
+
+const AddNote = ({navigation}) => {
+  const dispatch = useAppDispatch();
   const {colors} = useTheme();
   const scheme = useColorScheme();
-  let {notes} = route.params ? route.params.notes : {notes: []};
   const [textAreaValue, setTextAreaValue] = useState('');
   const today = Date.now();
 
   const addNote = (text: string) => {
-    notes.push({note: text, date: today});
-    storeData(notes);
+    dispatch(
+      createNote({
+        id: getUniqueId(),
+        text: text,
+        date: Date.now(),
+      }),
+    );
   };
 
   return (

src/screens/home.tsx

@@ -7,40 +7,28 @@ import {
 } from 'react-native';
 import {useTheme} from '@react-navigation/native';
 
-import {getData} from '../services/storage';
+import {useAppDispatch, useAppSelector, RootState} from '../store';
+import {notesInitialize} from '../store/app';
+import {NoteObject} from '../store/app/app.types';
 
 import Welcome from '../components/welcome';
 import List from '../components/list';
 import Error from '../components/error';
 import styles from '../styles';
 
 const Home = ({navigation}) => {
+  const dispatch = useAppDispatch();
   const {colors} = useTheme();
-  const [notes, setNotes] = useState([]);
+  const _notes = useAppSelector(({APP}: RootState) => APP.notes);
+  const [notes, setNotes] = useState<NoteObject[]>(_notes);
 
   const [error, setError] = useState(false);
   const [loaded, setLoaded] = useState(false);
 
-  const readNotesFromStorage = async () => {
-    const data = (await getData()) || [];
-    setNotes(data);
-  };
-
-  useEffect(() => {
-    readNotesFromStorage()
-      .catch(() => {
-        setError(true);
-      })
-      .finally(() => {
-        setLoaded(true);
-      });
-  }, [notes]);
-
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity
-          onPress={() => navigation.navigate('AddNote', {notes: {notes}})}>
+        <TouchableOpacity onPress={() => navigation.navigate('AddNote')}>
           <Text style={{color: colors.text}}>New Note</Text>
         </TouchableOpacity>
       ),
@@ -50,16 +38,8 @@ const Home = ({navigation}) => {
   return (
     <SafeAreaView
       style={[styles.globalContainer, {backgroundColor: colors.background}]}>
-      {notes.length === 0 && loaded ? (
-        <Welcome navigation={navigation} />
-      ) : null}
-      {loaded && !error && <List notes={notes} navigation={navigation} />}
-      {!loaded ? (
-        <ActivityIndicator size="large" style={styles.welcomeContainer} />
-      ) : null}
-      {error && (
-        <Error errorText1={'Error'} errorText2={'Could not load the page'} />
-      )}
+      {notes.length === 0 ? <Welcome navigation={navigation} /> : null}
+      {!error && <List notes={notes} navigation={navigation} />}
     </SafeAreaView>
   );
 };

src/screens/view.tsx

@@ -2,22 +2,23 @@ import React, {useLayoutEffect} from 'react';
 import moment from 'moment';
 import {View, Text, TouchableOpacity} from 'react-native';
 import {useTheme} from '@react-navigation/native';
-import {storeData} from '../services/storage';
+import {useAppDispatch} from '../store';
+import {deleteNote} from '../store/app';
 
 import styles from '../styles';
 
 const ViewNote = ({route, navigation}) => {
+  const dispatch = useAppDispatch();
   const {colors} = useTheme();
-  let {notes, note, date} = route.params;
-  const deleteNote = () => {
-    notes.splice(notes.indexOf(date), 1);
-    storeData(notes);
+  let {id, text, date} = route.params;
+  const _delete = () => {
+    dispatch(deleteNote(id));
     navigation.goBack();
   };
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity onPress={() => deleteNote()}>
+        <TouchableOpacity onPress={() => _delete()}>
           <Text style={{color: colors.notification}}>Delete</Text>
         </TouchableOpacity>
       ),
@@ -28,7 +29,7 @@ const ViewNote = ({route, navigation}) => {
       <Text style={[styles.title, {color: colors.text}]}>
         {moment(date).format('dddd, MMMM Do YYYY')}
       </Text>
-      <Text style={[styles.noteMainContent, {color: colors.text}]}>{note}</Text>
+      <Text style={[styles.noteMainContent, {color: colors.text}]}>{text}</Text>
     </View>
   );
 };

src/store/app/app.actions.ts

@@ -0,0 +1,29 @@
+import {AppActionType, AppActionTypes, NoteObject} from './app.types';
+
+export const notesPending = (): AppActionType => ({
+  type: AppActionTypes.NOTES_PENDING,
+});
+
+export const notesSuccess = (notes: NoteObject[]): AppActionType => ({
+  type: AppActionTypes.NOTES_SUCCESS,
+  payload: notes,
+});
+
+export const notesFailed = (): AppActionType => ({
+  type: AppActionTypes.NOTES_FAILED,
+});
+
+export const createNote = (note: NoteObject): AppActionType => ({
+  type: AppActionTypes.CREATE,
+  payload: note,
+});
+
+export const deleteNote = (id: string): AppActionType => ({
+  type: AppActionTypes.DELETE,
+  payload: id,
+});
+
+export const updateNote = (note: NoteObject): AppActionType => ({
+  type: AppActionTypes.UPDATE,
+  payload: note,
+});

src/store/app/app.effects.ts

@@ -0,0 +1,41 @@
+import {Effect} from '../index';
+import {
+  notesFailed,
+  notesSuccess,
+  notesPending,
+  createNote,
+  deleteNote,
+  updateNote,
+} from './index';
+
+import {NoteObject} from './app.types';
+
+export const initialize =
+  (): Effect<Promise<any>> => async (dispatch, getState) => {
+    const {APP} = getState();
+    dispatch(notesPending());
+    try {
+      const notes = APP.notes;
+      dispatch(notesSuccess(notes));
+    } catch (error: any) {
+      dispatch(notesFailed());
+    }
+  };
+
+export const create =
+  (note: NoteObject): Effect<void> =>
+  async (dispatch, getState) => {
+    dispatch(createNote(note));
+  };
+
+export const remove =
+  (id: string): Effect<void> =>
+  async (dispatch, getState) => {
+    dispatch(deleteNote(id));
+  };
+
+export const update =
+  (note: NoteObject): Effect<void> =>
+  async (dispatch, getState) => {
+    dispatch(updateNote(note));
+  };