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('username、isLoggedIn、ageが保存されました');
  };

  const handleGetStringData = () => {
    const username = storage.getString('username');
    setStatus(`データから取得したユーザー名：${username || 'なし'}`);
  };

  const handleGetNumberData = () => {
    const age = storage.getNumber('age');
    setStatus(`データから取得した年齢：${age}`);
  };

  const handleGetBooleanData = () => {
    const isLoggedIn = storage.getBoolean('isLoggedIn');
    setStatus(`データから取得したログイン状態：${isLoggedIn}`);
  };

  const handleCheckKey = () => {
    const hasUsernameKey = storage.contains('username');
    setStatus(`ユーザー名キー（${hasUsernameKey}）が存在します`);
  };

  const handleListKeys = () => {
    const allKeys = storage.getAllKeys();
    setStatus(`キー：${allKeys.join(', ')}`);
  };

  const handleDeleteKey = () => {
    storage.delete('username');
    setStatus('"username"キーを削除しました。');
  };

  const handleClearAll = () => {
    storage.clearAll();
    setStatus('すべてのデータがストレージから消去されました。');
  };

  const handleRecryptStorage = () => {
    storage.recrypt('newEncryptionKey');
    setStatus('保存されている値が新しいキーで再暗号化されました。');
  };

  const handleDisplaySize = () => {
    setStatus(`保存されているサイズ：${storage.size}バイト`);
  };

  const handleHookSetData = () => {
    setHookUsername('JaneDoe');
    setHookIsLoggedIn(false);
    setHookAge(25);
    setStatus('username、isLoggedIn、ageが保存されました');
  };

  const handleUseMMKVStringData = () => {
    setStatus(`フックで取得したユーザー名：${hookUsername || 'なし'}`);
  };

  const handleUseMMKVNumberData = () => {
    setStatus(`フックで取得した年齢：${hookAge}`);
  };

  const handleUseMMKVBooleanData = () => {
    setStatus(`フックで取得したログイン状態：${hookIsLoggedIn}`);
  };

  return (
    <View style={styles.container} testID="mmkv-app-container">
      <Text style={styles.title}>React Native MMKVの例</Text>
      <Text style={styles.title} testID="mmkv-status">ステータス：{status}</Text>
      <Button title="データを設定" onPress={handleSetData} testID="mmkv-app-set-button" />
      <Button title="文字列を取得" onPress={handleGetStringData} testID="mmkv-app-get-string-button" />
      <Button title="数値を取得" onPress={handleGetNumberData} testID="mmkv-app-get-number-button" />
      <Button title="ブール値を取得" onPress={handleGetBooleanData} testID="mmkv-app-get-boolean-button"/>
      <Button title="キーの存在を確認" onPress={handleCheckKey} testID="mmkv-app-contains-button"/>
      <Button title="すべてのキーを一覧表示" onPress={handleListKeys} testID="mmkv-app-get-all-keys-button"/>
      <Button title="'Username'キーを削除" onPress={handleDeleteKey} testID="mmkv-app-delete-key-button"/>
      <Button title="すべてのデータを消去" onPress={handleClearAll} testID="mmkv-app-clear-all-button"/>
      <Button title="ストレージを再暗号化" onPress={handleRecryptStorage} testID="mmkv-app-recrypt-button"/>
      <Button title="ストレージサイズを表示" onPress={handleDisplaySize} testID="mmkv-app-size-button"/>
      <Button title="フックでデータを設定" onPress={handleHookSetData} testID="mmkv-app-hook-set-button"/>
      <Button title="フックで文字列データを取得" onPress={handleUseMMKVStringData} testID="mmkv-app-hook-get-string-button"/>
      <Button title="フックで数値データを取得" onPress={handleUseMMKVNumberData} testID="mmkv-app-hook-get-number-button"/>
      <Button title="フックでブール値データを取得" 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,
  },
});