react-native-mmkv

import React, { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { MMKV, useMMKVString, useMMKVNumber, useMMKVBoolean } from '@amazon-devices/react-native-mmkv';

const storage = new MMKV();

export const App = () => {
  const [hookUsername, setHookUsername] = useMMKVString('hookUsername');
  const [hookAge, setHookAge] = useMMKVNumber('hookAge');
  const [hookIsLoggedIn, setHookIsLoggedIn] = useMMKVBoolean('hookIsLoggedIn');

  const [status, setStatus] = useState<string>("");

  const handleSetData = () => {
    storage.set('username', 'JohnDoe');
    storage.set('isLoggedIn', true);
    storage.set('age', 30);
    setStatus('Stored username, isLoggedIn and age');
  };

  const handleGetStringData = () => {
    const username = storage.getString('username');
    setStatus(`Retrieved Data Username: ${username || 'None'}`);
  };

  const handleGetNumberData = () => {
    const age = storage.getNumber('age');
    setStatus(`Retrieved Data Age: ${age}`);
  };

  const handleGetBooleanData = () => {
    const isLoggedIn = storage.getBoolean('isLoggedIn');
    setStatus(`Retrieved Data Is Logged In: ${isLoggedIn}`);
  };

  const handleCheckKey = () => {
    const hasUsernameKey = storage.contains('username');
    setStatus(`Username key exists: ${hasUsernameKey}`);
  };

  const handleListKeys = () => {
    const allKeys = storage.getAllKeys();
    setStatus(`Keys: ${allKeys.join(', ')}`);
  };

  const handleDeleteKey = () => {
    storage.delete('username');
    setStatus('Deleted the "username" key.');
  };

  const handleClearAll = () => {
    storage.clearAll();
    setStatus('All data have been cleared from storage.');
  };

  const handleRecryptStorage = () => {
    storage.recrypt('newEncryptionKey');
    setStatus('Stored values have been recrypted with a new key.');
  };

  const handleDisplaySize = () => {
    setStatus(`Stored size: ${storage.size} bytes`);
  };

  const handleHookSetData = () => {
    setHookUsername('JaneDoe');
    setHookIsLoggedIn(false);
    setHookAge(25);
    setStatus('Stored username, isLoggedIn and age');
  };

  const handleUseMMKVStringData = () => {
    setStatus(`Retrieved Hook Username: ${hookUsername || 'None'}`);
  };

  const handleUseMMKVNumberData = () => {
    setStatus(`Retrieved Hook Age: ${hookAge}`);
  };

  const handleUseMMKVBooleanData = () => {
    setStatus(`Retrieved Hook Hook Is Logged In: ${hookIsLoggedIn}`);
  };

  return (
    <View style={styles.container} testID="mmkv-app-container">
      <Text style={styles.title}>React Native MMKV Example</Text>
      <Text style={styles.title} testID="mmkv-status">Status: {status}</Text>
      <Button title="Set Data" onPress={handleSetData} testID="mmkv-app-set-button" />
      <Button title="Get String" onPress={handleGetStringData} testID="mmkv-app-get-string-button" />
      <Button title="Get Number" onPress={handleGetNumberData} testID="mmkv-app-get-number-button" />
      <Button title="Get Boolean" onPress={handleGetBooleanData} testID="mmkv-app-get-boolean-button"/>
      <Button title="Check If Key Exists" onPress={handleCheckKey} testID="mmkv-app-contains-button"/>
      <Button title="List All Keys" onPress={handleListKeys} testID="mmkv-app-get-all-keys-button"/>
      <Button title="Delete 'Username' Key" onPress={handleDeleteKey} testID="mmkv-app-delete-key-button"/>
      <Button title="Clear All Data" onPress={handleClearAll} testID="mmkv-app-clear-all-button"/>
      <Button title="Recrypt Storage" onPress={handleRecryptStorage} testID="mmkv-app-recrypt-button"/>
      <Button title="Display Storage Size" onPress={handleDisplaySize} testID="mmkv-app-size-button"/>
      <Button title="Hook Set Data" onPress={handleHookSetData} testID="mmkv-app-hook-set-button"/>
      <Button title="Hook Get String Data" onPress={handleUseMMKVStringData} testID="mmkv-app-hook-get-string-button"/>
      <Button title="Hook Get Number Data" onPress={handleUseMMKVNumberData} testID="mmkv-app-hook-get-number-button"/>
      <Button title="Hook Get Boolean Data" onPress={handleUseMMKVBooleanData} testID="mmkv-app-hook-get-boolean-button"/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center',
  },
  button: {
    marginVertical: 10,
  },
});