React Native To Do Demo

This project is a small Expo example app built with React Native and TypeScript to augment a Forward JS presentation on React Native in 2026.

• React Native in 2026 Blog Post
• React Native in 2026 Presnetation

It opens to a to-do list with local persistence, filter tabs, swipe-to-delete, and a trailing ghost row for quick item entry. The app stores todos on the device with AsyncStorage, so your list stays in place between launches.

This demo targets Expo SDK 54. If you run it with Expo Go on iOS, the SDK version in the app and the SDK version in this project must match.

Features

• Welcome screen text: Welcome To React Native
• Native-feeling mobile layout and styling
• Filter views for All, Pending, and Done
• Tap a row to mark a to-do as done
• Swipe left on a row to delete it
• Add new items from the ghost input row at the bottom
• Local storage with AsyncStorage
• Custom app icon configured through Expo

Getting Started

Install dependencies:

pnpm install

Start the Expo development server:

pnpm start

Run The App

Run on iOS:

pnpm ios

Run on Android:

pnpm android

Run in a web browser:

pnpm web

You can also scan the QR code from pnpm start with Expo Go if you want to open the app on a device.

Testing

Run the component test suite with:

pnpm test

To re-run tests automatically while you work:

pnpm test:watch

The tests use jest-expo with React Native Testing Library and cover the main React components plus a small app-level flow in App.tsx.

Project Notes

The main app UI lives in App.tsx.

Expo app configuration lives in app.json.