Zustand as lightweight alternative in React Native - Mini App: Build & Ship

Build: Counter with Zustand

A simple counter app screen using Zustand for state management instead of React's useState.

Target UI

Counter with Zustand

+---------------------+
|       Counter       |
|                     |
|         0           |
|                     |
|  [+]       [-]      |
+---------------------+

Use Zustand to create a global store with a count state and increment/decrement actions.

Display the current count in the center.

Add two buttons: '+' to increase count, '-' to decrease count.

Buttons update the count using Zustand store actions.

UI updates automatically when count changes.

Starter Code

React Native

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import create from 'zustand';

// TODO: Create Zustand store here

export default function CounterScreen() {
  // TODO: Use Zustand store here

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter with Zustand</Text>
      <Text style={styles.count}>0</Text>
      <View style={styles.buttons}>
        <Button title="+" onPress={() => {}} />
        <Button title="-" onPress={() => {}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', width: '40%', justifyContent: 'space-between' }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

export default function CounterScreen() {
  const { count, increment, decrement } = useStore();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter with Zustand</Text>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        <Button title="+" onPress={increment} />
        <Button title="-" onPress={decrement} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', width: '40%', justifyContent: 'space-between' }
});

We created a Zustand store using create with a count state and two actions: increment and decrement. These actions update the count by adding or subtracting 1.

In the CounterScreen component, we use the store by calling useStore() to get the current count and the two actions.

The UI shows the count in a large font. The '+' and '-' buttons call the increment and decrement actions respectively when pressed.

This setup keeps state management simple and global without needing React's useState or context, demonstrating Zustand as a lightweight alternative.

Final Result

Completed Screen

Counter with Zustand

+---------------------+
|       Counter       |
|                     |
|         5           |
|                     |
|  [+]       [-]      |
+---------------------+

Tapping '+' increases the number shown by 1.

Tapping '-' decreases the number shown by 1.

The number updates immediately on screen.

Stretch Goal

Add a reset button that sets the count back to zero.

💡 Hint

Add a 'reset' action in the Zustand store and a new Button that calls it.