Gmail Clone with React Native

Gmail Clone Project

Inspirations / Credits

• inkdrop-ui-mockup-react-native

IMPORTANT This is just a practice React Native project!!!

Features

• Sticky header bar
• Swipe-able list item
• Bottom action sheet
• Multiple theme support

Note Web and Android is not supported

Stack

• TypeScript - JavaScript with syntax for types
• React Native - ReactJS-based framework that can use native platform capabilities
• Expo Go - tools and services built around React Native
• React Navigation(v6) - Routing and navigation
• Restyle - A type-enforced system for building UI components
• React Native Reanimated - Animations
• React Native SVG - Displaying SVG images
• React Native Vector Icons - Free Icons
• React Native Bottom Sheet - A performant interactive bottom sheet with fully configurable options
• jotai - Primitive and flexible state management for React

Project structure

$PROJECT_ROOT
├── App.tsx        # Entry point
└── src
    ├── Navs.tsx   # Navigation components
    ├── atoms      # Atomic components
    ├── components # UI components
    ├── screens    # Screen components
    ├── hooks      # hooks
    ├── states     # Jotai atoms
    ├── fixtures   # sample data
    └── images     # Image files

Usage

Install All Dependencies

Development

yarn

Start Project

yarn start
yarn run ios

Client

Scan QR code.