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.

相關連結#

• 程式碼（Github) : RNMail