React Native Snippets For Checklist

A VS Code extension that provides code snippets for quickly building React Native checklist/grocery list applications with Expo, Redux Toolkit, and React Native Paper.

Features

This extension includes ready-to-use snippets for:

• Core Types (checklist_core_types) - GroceryItem type definition
• Custom Hooks (checklist_core_useFetch) - useFetch hook with GET, POST, PUT, DELETE methods
• Redux Store (checklist_core_store) - Complete Redux store setup with grocery slice
• Components (checklist_components_groceryItemCard) - GroceryItemCard component with CRUD operations
• Pages
  • checklist_app_home_index - Home page with list and search
  • checklist_app_home_form - Form page for add/edit items
• App Setup
  • checklist_app_layout - Root layout with Redux Provider
  • checklist_app_index - Main entry point
• Setup Guide (checklist_howToUse) - Project setup instructions

Requirements

This extension is designed for React Native projects using:

• Expo
• TypeScript
• TailwindCSS (NativeWind)
• Redux Toolkit
• React Native Paper
• Expo Router

Usage

1. Create a new file with .ts, .tsx, .js, or .jsx extension
2. Start typing a snippet prefix (e.g., checklist_core_types)
3. Press Enter or Tab to insert the snippet

Quick Start

Use the checklist_howToUse snippet to get project setup instructions:

npx create-expo-app <project-name> --example with-tailwindcss
npx expo install react-native-reanimated react-native-worklets react-native-paper @reduxjs/toolkit react-redux
npx expo start --tunnel --web

Snippets List

Release Notes

0.0.1

Initial release with complete checklist/grocery list app snippets including:

• Core types and hooks
• Redux store setup
• CRUD components
• App pages and layout

Enjoy coding!