Move to react-native-mmkv (#2533)

Author: M-i-k-e-l

demo/src/demoApp.js

@@ -1,8 +1,7 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Navigation} from 'react-native-navigation';
 import {Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
-
+import Storage, {DEFAULT_SCREEN} from './storage';
 
 /** Examples - uncomment when needed */
 // Typography.loadTypographies({
@@ -115,12 +114,10 @@ function startApp(defaultScreen) {
   Navigation.setRoot(rootObject);
 }
 
-async function getDefaultScreenAndStartApp() {
-  try {
-    const defaultScreen = await AsyncStorage.getItem('uilib.defaultScreen');
-    startApp(defaultScreen);
-  } catch (error) {
-    console.warn(error);
+function getDefaultScreenAndStartApp() {
+  if (Storage.contains(DEFAULT_SCREEN)) {
+    startApp(Storage.getString(DEFAULT_SCREEN));
+  } else {
     startApp();
   }
 }

demo/src/screens/MainScreen.js

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
 import {ViewPropTypes} from 'deprecated-react-native-prop-types';
@@ -21,6 +20,7 @@ import {
   Dividers
 } from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
+import Storage, {DEFAULT_SCREEN} from '../storage';
 
 const settingsIcon = require('../assets/icons/settings.png');
 const chevronIcon = require('../assets/icons/chevronRight.png');
@@ -152,7 +152,7 @@ class MainScreen extends Component {
   };
 
   setDefaultScreen = ({customValue: item}) => {
-    AsyncStorage.setItem('uilib.defaultScreen', item.screen);
+    Storage.set(DEFAULT_SCREEN, item.screen);
     this.openScreen({customValue: item});
   };
 

demo/src/screens/SettingsScreen.js

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import {StyleSheet, I18nManager} from 'react-native';
 import {Colors, View, Text, Picker, Incubator, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
+import Storage, {DEFAULT_SCREEN, IS_RTL} from '../storage';
 
 const none = {label: '[None]', value: ''};
 
@@ -28,25 +28,25 @@ class SettingsScreen extends Component {
 
     this.state = {
       showRefreshMessage: false,
+      isRTL: false,
       screens
     };
   }
 
-  async UNSAFE_componentWillMount() {
+  UNSAFE_componentWillMount() {
     const {screens} = this.state;
-    const defaultScreenId = await AsyncStorage.getItem('uilib.defaultScreen');
+    const defaultScreenId = Storage.getString(DEFAULT_SCREEN);
     const defaultScreen = _.find(screens, {value: defaultScreenId});
 
-    const isRTLString = await AsyncStorage.getItem('uilib.isRTL');
-    const isRTL = isRTLString === 'true';
+    const isRTL = Storage.getBoolean(IS_RTL);
 
     this.setState({defaultScreen, isRTL});
   }
 
   onDirectionChange = () => {
     this.setState({isRTL: !this.state.isRTL}, () => {
       I18nManager.forceRTL(this.state.isRTL);
-      AsyncStorage.setItem('uilib.isRTL', `${this.state.isRTL}`);
+      Storage.set(IS_RTL, this.state.isRTL);
       setTimeout(() => {
         this.setState({showRefreshMessage: true});
       }, 1000);
@@ -55,7 +55,7 @@ class SettingsScreen extends Component {
 
   setDefaultScreen = screen => {
     this.setState({defaultScreen: screen});
-    AsyncStorage.setItem('uilib.defaultScreen', screen.value);
+    Storage.set(DEFAULT_SCREEN, screen);
     setTimeout(() => {
       this.setState({showRefreshMessage: true});
     }, 1000);

demo/src/storage.ts

@@ -0,0 +1,7 @@
+import {MMKV} from 'react-native-mmkv';
+const Storage = new MMKV();
+
+export const DEFAULT_SCREEN = 'uilib.defaultScreen';
+export const IS_RTL = 'uilib.isRTL';
+
+export default Storage;

package.json

@@ -66,7 +66,7 @@
     "@formatjs/intl-locale": "^3.0.3",
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
-    "@react-native-async-storage/async-storage": "^1.17.11",
+    "react-native-mmkv": "2.6.1",
     "@react-native-community/blur": "4.3.0",
     "@react-native-community/datetimepicker": "^3.4.6",
     "@react-native-community/netinfo": "^5.6.2",

src/commons/Config.ts

@@ -1,15 +1,4 @@
 import {SchemeType} from '../style';
-import {AsyncStoragePackage} from 'optionalDeps';
-
-const isAsyncStorageInstalled = !!AsyncStoragePackage;
-const validateAsyncStorage = (method: 'get' | 'set') => {
-  if (isAsyncStorageInstalled) {
-    return true;
-  } else {
-    console.error(`RNUILib requires installing "@react-native-async-storage/async-storage" dependency to use ${method}LocalScheme`);
-    return false;
-  }
-};
 
 interface ConfigOptions {
   /**
@@ -36,25 +25,9 @@ class Config {
   }
 
   public async setConfig(options: ConfigOptions) {
-    const {usePlatformColors = false, appScheme = 'light', useLocalScheme = false} = options;
+    const {usePlatformColors = false, appScheme = 'light'} = options;
     this.usePlatformColors = usePlatformColors;
-    if (isAsyncStorageInstalled && useLocalScheme) {
-      this.appScheme = (await this.getLocalScheme?.()) || appScheme;
-    } else {
-      this.appScheme = appScheme;
-    }
-  }
-
-  public async setLocalScheme(scheme: SchemeType) {
-    if (validateAsyncStorage('set')) {
-      await AsyncStoragePackage.setItem?.('rnuilib.appScheme', scheme);
-    }
-  }
-
-  public async getLocalScheme() {
-    if (validateAsyncStorage('get')) {
-      return await AsyncStoragePackage.getItem?.('rnuilib.appScheme');
-    }
+    this.appScheme = appScheme;
   }
 }
 

src/optionalDependencies/AsyncStoragePackage.ts

@@ -7,4 +7,3 @@ export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
 export {default as SvgPackage} from './SvgPackage';
 export {createShimmerPlaceholder} from './ShimmerPackage';
 export {default as LinearGradientPackage} from './LinearGradientPackage';
-export {default as AsyncStoragePackage} from './AsyncStoragePackage';

src/optionalDependencies/index.ts

@@ -3,6 +3,5 @@ export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
 export {default as SvgPackage} from './SvgPackage';
 export {createShimmerPlaceholder} from './ShimmerPackage';
 export {default as LinearGradientPackage} from './LinearGradientPackage';
-export {default as AsyncStoragePackage} from './AsyncStoragePackage';
 export {default as PostCssPackage} from './PostCssPackage';