Gmail-like UI with React Native

A UI mockup for the new version of Inkdrop for mobile, inspired by Gmail for iOS and Android.

Features

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

Note: Web is not supported

Video Tutorial

• Part 1: How to build Gmail-like UI with React Native
• Part 2: How to implement responsive three-column layout with React Native

Stack

• TypeScript - JavaScript with syntax for types
• React Native - ReactJS-based framework that can use native platform capabilities
• 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
• React Native Three-Column Layout - A React component providing a three-column layout with animation support for tablet displays

Project structure

$PROJECT_ROOT
├── index.js       # 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

How to dev

This project can be run from the Expo client app.

yarn
yarn start

and in another terminal:

yarn run ios
# or
yarn run android

License

Apache-2.0

Looking for a Markdown note-taking app? Check out my app called Inkdrop: