hub / github.com/craftzdog/inkdrop-ui-mockup-react-native
github.com/craftzdog/inkdrop-ui-mockup-react-native @main
Chat with this repo
106 symbols
305 edges
77 files
6 documented · 6%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
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:
Extension points exported contracts — how you extend this code
Note (Interface)(no doc)
src/models.ts
Props (Interface)
(no doc)
src/components/note-list-item-action-view.tsx
Props (Interface)
(no doc)
src/atoms/touchable.tsx
Props (Interface)
(no doc)
src/screens/note-list-phone.tsx
ThemeMeta (Interface)
(no doc)
src/themes/index.ts
Book (Interface)
(no doc)
src/models.ts
Props (Interface)
(no doc)
src/components/note-list.tsx
Props (Interface)
(no doc)
src/components/move-note-sheet.tsx
Core symbols most depended-on inside this repo
useResponsiveLayoutcalled by 5
src/hooks/use-responsive-layout.ts
register
called by 2
android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java
capitalizeFirstLetter
called by 2
src/fixtures/notes.ts
getMainComponentName
called by 1
android/app/src/main/java/com/rnmail/MainActivity.java
getReactNativeHost
called by 1
android/app/src/main/java/com/rnmail/MainApplication.java
initializeFlipper
called by 1
android/app/src/main/java/com/rnmail/MainApplication.java
initHybrid
called by 1
android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java
MainApplicationModuleProvider
called by 1
android/app/src/main/jni/MainApplicationModuleProvider.cpp
Shape
Languages
TypeScript50%
Java39%
C++11%
Modules by API surface
android/app/src/main/java/com/rnmail/newarchitecture/MainApplicationReactNativeHost.java10 symbols
android/app/src/main/java/com/rnmail/MainActivity.java8 symbols
android/app/src/main/java/com/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java7 symbols
android/app/src/main/java/com/rnmail/MainApplication.java7 symbols
android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java5 symbols
src/components/header-bar.tsx4 symbols
android/app/src/main/jni/MainComponentsRegistry.cpp4 symbols
android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp4 symbols
android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java4 symbols
src/components/swipeable-view.tsx3 symbols
src/atoms/touchable.tsx3 symbols
src/screens/note-list-phone.tsx2 symbols
For agents
$ claude mcp add inkdrop-ui-mockup-react-native \
-- python -m otcore.mcp_server <graph>