NoteKeeper is a simple React Native app that demonstrates global state management using Zustand. It provides a clean and minimal example of how to use Zustand to manage shared state across multiple screens in a mobile application.
This project showcases:
- ✅ Global state management using Zustand
- ✅ Create and delete notes functionality
- ✅ Conditional UI rendering based on app state
- ✅ Navigation flow with stack reset to control back navigation
- 📄 Create notes with title and description
- ❌ Long press or tap to mark a note for deletion
- 🗑 Delete multiple notes at once using the delete mode
- 🔄 Zustand used to manage global states like:
- List of notes
- Notes marked for deletion
- Delete mode toggle (
allowDeleteNote)
-
Install dependencies
npm install
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the src directory.
When you're ready, run:
npm run reset-projectThis command will move the starter code to the app-example directory and create a blank app directory where you can start developing.
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
Join our community of developers creating universal apps.
- Expo on GitHub: View our open source platform and contribute.
- Discord community: Chat with Expo users and ask questions.
├── components/
│ └── CustomTextInput.js
├── features/
│ └── home/
│ └── screens/HomeScreen.js
│ └── create_notes/
│ └── screens/CreateNote.js
│ └── welcome_onboarding/
│ └── screens/WelcomeScreen.js
├── store/
│ └── useStore.js # Zustand store
├── App.js
└── ...Thanks to the Zustand @https://github.com/pmndrs/zustand team for providing a lightweight and intuitive state management library.