MMKV for fast storage in React Native - Mini App: Build & Ship

Build: Fast Storage Demo

This screen lets users save and load a simple text value quickly using MMKV storage.

Target UI

-------------------------
| Fast Storage Demo     |
|-----------------------|
| Enter text:           |
| [______________]      |
|                       |
| [Save]    [Load]      |
|                       |
| Saved value:          |
| [                 ]   |
-------------------------

Use MMKV storage to save a text string when Save button is pressed

Load and display the saved text when Load button is pressed

Use a TextInput for user input

Show the saved value below buttons

Handle empty input gracefully

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

export default function FastStorageDemo() {
  const [input, setInput] = useState('');
  const [savedValue, setSavedValue] = useState('');

  // TODO: Add save function

  // TODO: Add load function

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Fast Storage Demo</Text>
      <Text>Enter text:</Text>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={setInput}
        placeholder="Type something"
        accessibilityLabel="Input text field"
      />
      <View style={styles.buttonRow}>
        <Button title="Save" onPress={() => {}} />
        <Button title="Load" onPress={() => {}} />
      </View>
      <Text>Saved value:</Text>
      <Text style={styles.savedValue}>{savedValue}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, flex: 1, justifyContent: 'flex-start' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginVertical: 10, borderRadius: 5 },
  buttonRow: { flexDirection: 'row', justifyContent: 'space-between', marginVertical: 10 },
  savedValue: { fontSize: 18, marginTop: 10, color: '#333' }
});

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

export default function FastStorageDemo() {
  const [input, setInput] = useState('');
  const [savedValue, setSavedValue] = useState('');

  const saveValue = () => {
    if (input.trim() === '') {
      alert('Please enter some text to save.');
      return;
    }
    storage.set('myKey', input);
    alert('Value saved!');
  };

  const loadValue = () => {
    const value = storage.getString('myKey');
    if (value === undefined) {
      alert('No value found. Please save something first.');
      setSavedValue('');
    } else {
      setSavedValue(value);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Fast Storage Demo</Text>
      <Text>Enter text:</Text>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={setInput}
        placeholder="Type something"
        accessibilityLabel="Input text field"
      />
      <View style={styles.buttonRow}>
        <Button title="Save" onPress={saveValue} />
        <Button title="Load" onPress={loadValue} />
      </View>
      <Text>Saved value:</Text>
      <Text style={styles.savedValue}>{savedValue}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, flex: 1, justifyContent: 'flex-start' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginVertical: 10, borderRadius: 5 },
  buttonRow: { flexDirection: 'row', justifyContent: 'space-between', marginVertical: 10 },
  savedValue: { fontSize: 18, marginTop: 10, color: '#333' }
});

We created two functions: saveValue and loadValue. The saveValue function checks if the input is not empty, then saves it to MMKV storage with the key myKey. It shows an alert to confirm saving.

The loadValue function tries to get the stored string from MMKV. If nothing is found, it alerts the user and clears the displayed saved value. Otherwise, it updates the savedValue state to show the stored text.

These functions are connected to the Save and Load buttons respectively. The UI updates immediately when loading the saved value.

This example shows how MMKV provides a fast and simple way to store small pieces of data persistently in React Native apps.

Final Result

Completed Screen

-------------------------
| Fast Storage Demo     |
|-----------------------|
| Enter text:           |
| [Hello MMKV    ]      |
|                       |
| [Save]    [Load]      |
|                       |
| Saved value:          |
| [Hello MMKV    ]      |
-------------------------

User types text in the input field

Tapping Save stores the text in MMKV and shows a confirmation alert

Tapping Load retrieves the saved text and displays it below

If input is empty on Save, an alert asks to enter text

If no saved value exists on Load, an alert informs the user

Stretch Goal

Add a Clear button to remove the saved value from MMKV and clear the displayed saved value.

💡 Hint

Use storage.delete('myKey') to remove the key and update savedValue state to empty string.