Skip to content

whidrubeld/react-native-code-snippets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Code Recipes

Production-ready code recipes and architect

Legend

  • Ready: Complete and tested
  • 🚧 In Progress: Currently being written
  • 📋 Planned: Scheduled for developmenttterns for React Native development

About This Repository

This repository contains a curated collection of React Native code recipes and best practices. Each recipe provides step-by-step implementation guides for common development challenges, tested in real-world applications.

🌟 Star this repository if you find these recipes helpful for your React Native projects!

Architecture Overview

All recipes follow a consistent architectural approach:

  • Platform: Expo with Managed Workflow
  • Language: TypeScript for enhanced developer experience
  • Structure: Modular architecture with organized src/ directory
  • Imports: Clean path mapping with @/* for source and ~/* for assets
  • State: Redux Toolkit with persistence and real-time capabilities

Recipe Categories

🏗️ Foundation & Setup

Essential configuration recipes for project setup.

Recipe Description Complexity Status
TypeScript Path Mapping Configure clean import aliases 🟢 Basic ✅ Ready
SVG Support via Metro Configure Metro bundler for SVG files 🟢 Basic ✅ Ready
Dynamic Import Context Dynamic loading with require.context 🟡 Intermediate ✅ Ready
Expo Asset Helpers Convert picked images/docs to base64 or File 🟢 Basic ✅ Ready
Localize Native Permissions Localize iOS/Android permission prompts via Expo locales 🟢 Basic ✅ Ready
FullWindowOverlay Usage Overlay UI above native navigation (iOS) 🟡 Intermediate ✅ Ready

🔄 State Management

Redux Toolkit patterns with persistence and listeners.

Recipe Description Complexity Status
Redux Toolkit Complete Setup Full Redux configuration with persistence 🟡 Intermediate ✅ Ready
Advanced RTK Query Setup Custom baseQuery, FormData, error handling, refresh token 🟡 Intermediate ✅ Ready

🎨 Theming & Styling

Theme systems and styling approaches.

Recipe Description Complexity Status
Theme System with Redux Complete theme system with Redux sync 🟡 Intermediate ✅ Ready
Utility-First Styling createStyles utility for efficient styling 🟢 Basic ✅ Ready
UI primitives Native first UI primitives for advanced scaling 🟡 Intermediate 📋 Planned

🛡️ Architecture

Architectural patterns and application concepts.

Recipe Description Complexity Status
Essential Providers Stack Network, AppState, Keyboard providers 🟡 Intermediate ✅ Ready
Guard Pattern Implement application guard system 🟡 Intermediate ✅ Ready
Internationalization Implementation of smart i18n system 🟡 Intermediate 📋 Planned

🔐 Authentication & Security

Authentication patterns and security implementations.

Recipe Description Complexity Status
Universal Social Auth Cross-platform social authentication 🟡 Intermediate ✅ Ready

� Coming Soon

  • Navigation: Routing patterns and navigation strategies
  • API Integration: RTK Query patterns and data fetching
  • Performance: Optimization techniques and best practices
  • Testing: Testing strategies for React Native apps
  • Deployment: CI/CD and release automation
  • UI Components: Reusable component patterns

Quick Start

  1. Browse the recipe categories above
  2. Select a recipe that matches your needs
  3. Follow the step-by-step implementation guide
  4. Customize the code for your specific use case

Recipe Structure

Each recipe includes:

  • 🎯 Overview: What the recipe accomplishes
  • 📋 Prerequisites: Required setup and dependencies
  • 🔧 Implementation: Detailed code examples
  • 💡 Usage: Practical implementation examples
  • ⚡ Best Practices: Tips and common pitfalls

Contributing

We welcome contributions! Feel free to:

  • 🐛 Report issues or bugs
  • 💡 Suggest new recipes
  • 🔄 Submit improvements via pull requests
  • ⭐ Star the repository if you find it useful

Crafted with ❤️ for the React Native community

About

Codebase of various functionalities for React Native / TypeScript projects.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published