react-native-mmkv

1// AsyncStorage
2 // storing data const storeUser = async (value) => { try { await AsynStorage.setItem("user", JSON.stringify(value)); } catch (error) { console.log(error); } }; storeUser("Chimezie") // getting data const getUser = async () => { try { const userData = await AsynStorage.getItem("user") const user = JSON.parse(userData) } catch (error) { console.log(error); } };

1// react-native-mmkv storage.set('username', 'Chimezie'); const username = storage.getString('username')

1const storeUser = async () => { 
2try { 
3const userData = { name: "Chimezie", location: "Nigeria" } const serializedUser = JSON.stringify(userData) await AsynStorage.setItem("user", serializedUser); } catch (error) { console.log(error); } };

1const getUser = async () => { try { const userData = await AsynStorage.getItem("user") const userObject = JSON.parse(userData) } catch (error) { console.log(error); } };

1storage.set('username', 'Innocent') // string storage.set('age', 25) // number storage.set('is-mmkv-fast-asf', true) // boolean

1// npm npm install react-native-mmkv //yarn yarn add react-native-mmkv

1// Storage.js import { MMKV } from 'react-native-mmkv' export const storage = new MMKV({ id: `user-storage`, path: `${USER_DIRECTORY}/storage`, encryptionKey: 'encryptionkey' })

1const passwordStorage = new MMKV({ id: `password-storage`, }) const themeStorage = new MMKV({ id: `theme-storage`, })

1//App.js import { storage } from './Storage'

1storage.set('username', 'Innocent') // string storage.set('age', 25) // number storage.set('is-mmkv-fast-asf', true) // boolean

1// objects const user = { name: "Chimezie", location: "Nigeria", email: 'chimezieinnocent39@gmail.com', } storage.set("userDetails", JSON.stringify(user)) // arrays const numberArray = [1, 2, 3, 4, 5]; const serializedArray = JSON.stringify(numberArray); storage.set('numbers', serializedArray);

1const username = storage.getString('username') // 'Innocent' const age = storage.getNumber('age') // 25 const isMmkvFastAsf = storage.getBoolean('is-mmkv-fast-asf') // true

1// objects const serializedUser = storage.getString('userDetails'); const userObject = JSON.parse(serializedUser); console.log(userObject); /* output: const user = { name: "Chimezie", location: "Nigeria", email: 'chimezieinnocent39@gmail.com', } */ // arrays const serializedArray = storage.getString('numbers'); const numberArray = JSON.parse(serializedArray); console.log(numberArray); // Output: [1, 2, 3, 4, 5]

1// Set some key-value pairs storage.set('name', 'Innocent'); storage.set('age', 25); const allKeys = storage.getAllKeys(); console.log(allKeys); // Output: ['name', 'age']

1// delete a key storage.delete('username') // delete all keys storage.clearAll()

1// Storage.js import { MMKV } from 'react-native-mmkv' export const storage = new MMKV({ id: `user-storage`, encryptionKey: 'EncrypTedKey123' })

1// App.js storage.set('userPassword', 'This is a secret user password'); // Retrieving data from the encrypted storage const password = storage.getString('userPassword'); console.log(password); // Output: 'This is a secret user passwor

1// App.tsx import React, {useState, useEffect} from 'react'; import {Colors} from 'react-native/Libraries/NewAppScreen'; import { Text, View, Button, StatusBar, StyleSheet, SafeAreaView, } from 'react-native'; import {storage} from './Storage'; function App(): JSX.Element { const [isDarkMode, setIsDarkMode] = useState<boolean>(false); const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; useEffect(() => { const listener = storage.addOnValueChangedListener(changedKey => { if (changedKey === 'isDarkMode') { const newValue = storage.getBoolean(changedKey); console.log('theme:', newValue); } }); return () => { listener.remove(); }; }, []); const toggleTheme = () => { const newMode = !isDarkMode; setIsDarkMode(newMode); storage.set('isDarkMode', newMode); }; return ( <SafeAreaView style={[backgroundStyle, styles.sectionContainer]}> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} backgroundColor={backgroundStyle.backgroundColor} /> <View> <Text style={[ styles.sectionTitle, { color: isDarkMode ? Colors.white : Colors.black, }, ]}> {isDarkMode ? 'Dark Mode' : 'Light Theme'} </Text> <Text style={[ styles.sectionDescription, { color: isDarkMode ? Colors.light : Colors.dark, }, ]}> React Native MMKV Tutorial </Text> <Button onPress={toggleTheme} title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'} /> </View> </SafeAreaView> ); } const styles = StyleSheet.create({ sectionContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, sectionTitle: { fontSize: 24, fontWeight: '600', textAlign: 'center', }, sectionDescription: { marginVertical: 8, fontSize: 18, fontWeight: '400', textAlign: 'center', }, highlight: { fontWeight: '700', }, }); export default App;