├── .buckconfig ├── .eslintrc.js ├── .gitignore ├── .ruby-version ├── .watchmanconfig ├── Gemfile ├── LICENSE ├── README.md ├── __tests__ └── App-test.tsx ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── rnmail │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── rnmail │ │ │ ├── MainActivity.java │ │ │ ├── MainApplication.java │ │ │ └── newarchitecture │ │ │ ├── MainApplicationReactNativeHost.java │ │ │ ├── components │ │ │ └── MainComponentsRegistry.java │ │ │ └── modules │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ ├── jni │ │ ├── Android.mk │ │ ├── CMakeLists.txt │ │ ├── MainApplicationModuleProvider.cpp │ │ ├── MainApplicationModuleProvider.h │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ ├── MainComponentsRegistry.cpp │ │ ├── MainComponentsRegistry.h │ │ └── OnLoad.cpp │ │ └── res │ │ ├── drawable │ │ └── rn_edit_text_material.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── declarations.d.ts ├── doc ├── thumb1.jpg ├── thumb2.jpg └── thumb3.jpg ├── index.js ├── ios ├── Podfile ├── Podfile.lock ├── RNMail.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── RNMail.xcscheme ├── RNMail.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── RNMail │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── RNMailTests │ ├── Info.plist │ └── RNMailTests.m ├── metro.config.js ├── package.json ├── prettier.config.js ├── src ├── app.tsx ├── atoms │ ├── animated-box.ts │ ├── bar.ts │ ├── bottom-sheet.tsx │ ├── box.ts │ ├── container.tsx │ ├── index.ts │ ├── pressable.ts │ ├── safe-area-view.ts │ ├── scroll-view.ts │ ├── text-input.tsx │ ├── text.ts │ └── touchable.tsx ├── components │ ├── book-list-item.tsx │ ├── book-list.tsx │ ├── header-bar-left-button.tsx │ ├── header-bar.tsx │ ├── icon.tsx │ ├── inkdrop-logo.tsx │ ├── move-note-sheet.tsx │ ├── navbar.tsx │ ├── note-list-header-title-bar.tsx │ ├── note-list-item-action-view.tsx │ ├── note-list-item.tsx │ ├── note-list.tsx │ ├── responsive-layout.tsx │ ├── sidebar.tsx │ ├── status-bar.tsx │ ├── swipeable-view.tsx │ ├── theme-list-item.tsx │ └── three-column-layout.tsx ├── consts.ts ├── fixtures │ ├── books.ts │ └── notes.ts ├── hooks │ ├── use-drawer-enabled.ts │ ├── use-responsive-layout.ts │ └── use-sticky-header.ts ├── images │ └── inkdrop-logo.svg ├── models.ts ├── navs.tsx ├── screens │ ├── detail-phone.tsx │ ├── detail-tablet.tsx │ ├── detail.tsx │ ├── main-phone.tsx │ ├── main-tablet.tsx │ ├── main.tsx │ ├── note-list-phone.tsx │ ├── note-list-tablet.tsx │ └── note-list.tsx ├── states │ ├── editor.ts │ ├── search-bar.ts │ └── theme.ts └── themes │ ├── dark.ts │ ├── index.ts │ ├── light.ts │ ├── nord.ts │ └── solarized-dark.ts ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: "@typescript-eslint/parser", 4 | plugins: ["@typescript-eslint/eslint-plugin"], 5 | extends: ["prettier"], 6 | rules: { 7 | "@typescript-eslint/no-unused-vars": [ 8 | "error", 9 | { 10 | argsIgnorePattern: "^_", 11 | }, 12 | ], 13 | "no-unused-vars": "off", 14 | "no-shadow": "off", 15 | "@typescript-eslint/no-shadow": 1, 16 | "no-undef": "off", 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | 35 | # node.js 36 | # 37 | node_modules/ 38 | npm-debug.log 39 | yarn-error.log 40 | 41 | # BUCK 42 | buck-out/ 43 | \.buckd/ 44 | *.keystore 45 | !debug.keystore 46 | 47 | # fastlane 48 | # 49 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 50 | # screenshots whenever they are needed. 51 | # For more information about the recommended setup visit: 52 | # https://docs.fastlane.tools/best-practices/source-control/ 53 | 54 | **/fastlane/report.xml 55 | **/fastlane/Preview.html 56 | **/fastlane/screenshots 57 | **/fastlane/test_output 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # Ruby / CocoaPods 63 | /ios/Pods/ 64 | /vendor/bundle/ 65 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby '2.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2' 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2022 Takuya Matsuyama 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gmail-like UI with React Native 2 | 3 | ## Features 4 | 5 | - Sticky header bar 6 | - Swipe-able list item 7 | - Bottom action sheet 8 | - Multiple theme support 9 | - Tablet screen support 10 | 11 | Note: Web is not supported 12 | 13 | ![thumbnail](./doc/thumb1.jpg) 14 | 15 | ![thumbnail](./doc/thumb2.jpg) 16 | 17 | ![thumbnail](./doc/thumb3.jpg) 18 | 19 | ## Video Tutorial 20 | 21 | - Part 1: [How to build Gmail-like UI with React Native](https://www.youtube.com/watch?v=w-M9UFHLAl0) 22 | - Part 2: [How to implement responsive three-column layout with React Native](https://www.youtube.com/watch?v=JU4VBbe23jg) 23 | 24 | ## Stack 25 | 26 | - [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for types 27 | - [React Native](https://reactnative.dev/) - ReactJS-based framework that can use native platform capabilities 28 | - [React Navigation(v6)](https://reactnavigation.org/) - Routing and navigation 29 | - [Restyle](https://github.com/Shopify/restyle) - A type-enforced system for building UI components 30 | - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) - Animations 31 | - [React Native SVG](https://github.com/react-native-svg/react-native-svg) - Displaying SVG images 32 | - [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - Free Icons 33 | - [React Native Bottom Sheet](https://github.com/gorhom/react-native-bottom-sheet) - A performant interactive bottom sheet with fully configurable options 34 | - [jotai](https://jotai.org/) - Primitive and flexible state management for React 35 | 36 | ## Project structure 37 | 38 | ``` 39 | $PROJECT_ROOT 40 | ├── index.js # Entry point 41 | └── src 42 | ├── navs.tsx # Navigation components 43 | ├── atoms # Atomic components 44 | ├── components # UI components 45 | ├── screens # Screen components 46 | ├── hooks # hooks 47 | ├── states # Jotai atoms 48 | ├── fixtures # sample data 49 | └── images # Image files 50 | ``` 51 | 52 | ## How to dev 53 | 54 | This project can be run from the Expo client app. 55 | 56 | ```sh 57 | yarn 58 | yarn start 59 | ``` 60 | 61 | and in another terminal: 62 | 63 | ```sh 64 | yarn run ios 65 | # or 66 | yarn run android 67 | ``` 68 | 69 | ## License 70 | 71 | Apache-2.0 72 | 73 | --- 74 | 75 | -------------------------------------------------------------------------------- /__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.rnmail", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.rnmail", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | import org.apache.tools.ant.taskdefs.condition.Os 5 | 6 | /** 7 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 8 | * and bundleReleaseJsAndAssets). 9 | * These basically call `react-native bundle` with the correct arguments during the Android build 10 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 11 | * bundle directly from the development server. Below you can see all the possible configurations 12 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 13 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 14 | * 15 | * project.ext.react = [ 16 | * // the name of the generated asset file containing your JS bundle 17 | * bundleAssetName: "index.android.bundle", 18 | * 19 | * // the entry file for bundle generation. If none specified and 20 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 21 | * // default. Can be overridden with ENTRY_FILE environment variable. 22 | * entryFile: "index.android.js", 23 | * 24 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 25 | * bundleCommand: "ram-bundle", 26 | * 27 | * // whether to bundle JS and assets in debug mode 28 | * bundleInDebug: false, 29 | * 30 | * // whether to bundle JS and assets in release mode 31 | * bundleInRelease: true, 32 | * 33 | * // whether to bundle JS and assets in another build variant (if configured). 34 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 35 | * // The configuration property can be in the following formats 36 | * // 'bundleIn${productFlavor}${buildType}' 37 | * // 'bundleIn${buildType}' 38 | * // bundleInFreeDebug: true, 39 | * // bundleInPaidRelease: true, 40 | * // bundleInBeta: true, 41 | * 42 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 43 | * // for example: to disable dev mode in the staging build type (if configured) 44 | * devDisabledInStaging: true, 45 | * // The configuration property can be in the following formats 46 | * // 'devDisabledIn${productFlavor}${buildType}' 47 | * // 'devDisabledIn${buildType}' 48 | * 49 | * // the root of your project, i.e. where "package.json" lives 50 | * root: "../../", 51 | * 52 | * // where to put the JS bundle asset in debug mode 53 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 54 | * 55 | * // where to put the JS bundle asset in release mode 56 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 57 | * 58 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 59 | * // require('./image.png')), in debug mode 60 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 61 | * 62 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 63 | * // require('./image.png')), in release mode 64 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 65 | * 66 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 67 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 68 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 69 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 70 | * // for example, you might want to remove it from here. 71 | * inputExcludes: ["android/**", "ios/**"], 72 | * 73 | * // override which node gets called and with what additional arguments 74 | * nodeExecutableAndArgs: ["node"], 75 | * 76 | * // supply additional arguments to the packager 77 | * extraPackagerArgs: [] 78 | * ] 79 | */ 80 | 81 | project.ext.react = [ 82 | enableHermes: false, // clean and rebuild if changing 83 | ] 84 | 85 | apply from: "../../node_modules/react-native/react.gradle" 86 | 87 | /** 88 | * Set this to true to create two separate APKs instead of one: 89 | * - An APK that only works on ARM devices 90 | * - An APK that only works on x86 devices 91 | * The advantage is the size of the APK is reduced by about 4MB. 92 | * Upload all the APKs to the Play Store and people will download 93 | * the correct one based on the CPU architecture of their device. 94 | */ 95 | def enableSeparateBuildPerCPUArchitecture = false 96 | 97 | /** 98 | * Run Proguard to shrink the Java bytecode in release builds. 99 | */ 100 | def enableProguardInReleaseBuilds = false 101 | 102 | /** 103 | * The preferred build flavor of JavaScriptCore. 104 | * 105 | * For example, to use the international variant, you can use: 106 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 107 | * 108 | * The international variant includes ICU i18n library and necessary data 109 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 110 | * give correct results when using with locales other than en-US. Note that 111 | * this variant is about 6MiB larger per architecture than default. 112 | */ 113 | def jscFlavor = 'org.webkit:android-jsc:+' 114 | 115 | /** 116 | * Whether to enable the Hermes VM. 117 | * 118 | * This should be set on project.ext.react and that value will be read here. If it is not set 119 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 120 | * and the benefits of using Hermes will therefore be sharply reduced. 121 | */ 122 | def enableHermes = project.ext.react.get("enableHermes", false); 123 | 124 | /** 125 | * Architectures to build native code for. 126 | */ 127 | def reactNativeArchitectures() { 128 | def value = project.getProperties().get("reactNativeArchitectures") 129 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 130 | } 131 | 132 | android { 133 | ndkVersion rootProject.ext.ndkVersion 134 | 135 | compileSdkVersion rootProject.ext.compileSdkVersion 136 | 137 | defaultConfig { 138 | applicationId "com.rnmail" 139 | minSdkVersion rootProject.ext.minSdkVersion 140 | targetSdkVersion rootProject.ext.targetSdkVersion 141 | versionCode 1 142 | versionName "1.0" 143 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 144 | 145 | if (isNewArchitectureEnabled()) { 146 | // We configure the NDK build only if you decide to opt-in for the New Architecture. 147 | externalNativeBuild { 148 | ndkBuild { 149 | arguments "APP_PLATFORM=android-21", 150 | "APP_STL=c++_shared", 151 | "NDK_TOOLCHAIN_VERSION=clang", 152 | "GENERATED_SRC_DIR=$buildDir/generated/source", 153 | "PROJECT_BUILD_DIR=$buildDir", 154 | "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid", 155 | "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build" 156 | cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1" 157 | cppFlags "-std=c++17" 158 | // Make sure this target name is the same you specify inside the 159 | // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable. 160 | targets "rnmail_appmodules" 161 | 162 | // Fix for windows limit on number of character in file paths and in command lines 163 | if (Os.isFamily(Os.FAMILY_WINDOWS)) { 164 | arguments "NDK_APP_SHORT_COMMANDS=true" 165 | } 166 | } 167 | } 168 | if (!enableSeparateBuildPerCPUArchitecture) { 169 | ndk { 170 | abiFilters (*reactNativeArchitectures()) 171 | } 172 | } 173 | } 174 | } 175 | 176 | if (isNewArchitectureEnabled()) { 177 | // We configure the NDK build only if you decide to opt-in for the New Architecture. 178 | externalNativeBuild { 179 | ndkBuild { 180 | path "$projectDir/src/main/jni/Android.mk" 181 | } 182 | } 183 | def reactAndroidProjectDir = project(':ReactAndroid').projectDir 184 | def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) { 185 | dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck") 186 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 187 | into("$buildDir/react-ndk/exported") 188 | } 189 | def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) { 190 | dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck") 191 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 192 | into("$buildDir/react-ndk/exported") 193 | } 194 | afterEvaluate { 195 | // If you wish to add a custom TurboModule or component locally, 196 | // you should uncomment this line. 197 | // preBuild.dependsOn("generateCodegenArtifactsFromSchema") 198 | preDebugBuild.dependsOn(packageReactNdkDebugLibs) 199 | preReleaseBuild.dependsOn(packageReactNdkReleaseLibs) 200 | 201 | // Due to a bug inside AGP, we have to explicitly set a dependency 202 | // between configureNdkBuild* tasks and the preBuild tasks. 203 | // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732 204 | configureNdkBuildRelease.dependsOn(preReleaseBuild) 205 | configureNdkBuildDebug.dependsOn(preDebugBuild) 206 | reactNativeArchitectures().each { architecture -> 207 | tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure { 208 | dependsOn("preDebugBuild") 209 | } 210 | tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure { 211 | dependsOn("preReleaseBuild") 212 | } 213 | } 214 | } 215 | } 216 | 217 | splits { 218 | abi { 219 | reset() 220 | enable enableSeparateBuildPerCPUArchitecture 221 | universalApk false // If true, also generate a universal APK 222 | include (*reactNativeArchitectures()) 223 | } 224 | } 225 | signingConfigs { 226 | debug { 227 | storeFile file('debug.keystore') 228 | storePassword 'android' 229 | keyAlias 'androiddebugkey' 230 | keyPassword 'android' 231 | } 232 | } 233 | buildTypes { 234 | debug { 235 | signingConfig signingConfigs.debug 236 | } 237 | release { 238 | // Caution! In production, you need to generate your own keystore file. 239 | // see https://reactnative.dev/docs/signed-apk-android. 240 | signingConfig signingConfigs.debug 241 | minifyEnabled enableProguardInReleaseBuilds 242 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 243 | } 244 | } 245 | 246 | // applicationVariants are e.g. debug, release 247 | applicationVariants.all { variant -> 248 | variant.outputs.each { output -> 249 | // For each separate APK per architecture, set a unique version code as described here: 250 | // https://developer.android.com/studio/build/configure-apk-splits.html 251 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 252 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 253 | def abi = output.getFilter(OutputFile.ABI) 254 | if (abi != null) { // null for the universal-debug, universal-release variants 255 | output.versionCodeOverride = 256 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 257 | } 258 | 259 | } 260 | } 261 | } 262 | 263 | dependencies { 264 | implementation fileTree(dir: "libs", include: ["*.jar"]) 265 | 266 | //noinspection GradleDynamicVersion 267 | implementation "com.facebook.react:react-native:+" // From node_modules 268 | 269 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 270 | 271 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 272 | exclude group:'com.facebook.fbjni' 273 | } 274 | 275 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 276 | exclude group:'com.facebook.flipper' 277 | exclude group:'com.squareup.okhttp3', module:'okhttp' 278 | } 279 | 280 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 281 | exclude group:'com.facebook.flipper' 282 | } 283 | 284 | if (enableHermes) { 285 | def hermesPath = "../../node_modules/hermes-engine/android/"; 286 | debugImplementation files(hermesPath + "hermes-debug.aar") 287 | releaseImplementation files(hermesPath + "hermes-release.aar") 288 | } else { 289 | implementation jscFlavor 290 | } 291 | } 292 | 293 | if (isNewArchitectureEnabled()) { 294 | // If new architecture is enabled, we let you build RN from source 295 | // Otherwise we fallback to a prebuilt .aar bundled in the NPM package. 296 | // This will be applied to all the imported transtitive dependency. 297 | configurations.all { 298 | resolutionStrategy.dependencySubstitution { 299 | substitute(module("com.facebook.react:react-native")) 300 | .using(project(":ReactAndroid")).because("On New Architecture we're building React Native from source") 301 | } 302 | } 303 | } 304 | 305 | // Run this once to be able to run the application with BUCK 306 | // puts all compile dependencies into folder libs for BUCK to use 307 | task copyDownloadableDepsToLibs(type: Copy) { 308 | from configurations.implementation 309 | into 'libs' 310 | } 311 | 312 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 313 | 314 | def isNewArchitectureEnabled() { 315 | // To opt-in for the New Architecture, you can either: 316 | // - Set `newArchEnabled` to true inside the `gradle.properties` file 317 | // - Invoke gradle with `-newArchEnabled=true` 318 | // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true` 319 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 320 | } 321 | 322 | project.ext.vectoricons = [ 323 | iconFontNames: ['Feather.ttf'] 324 | ] 325 | 326 | apply from: '../../node_modules/react-native-vector-icons/fonts.gradle' 327 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.rnmail; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceEventListener; 23 | import com.facebook.react.ReactInstanceManager; 24 | import com.facebook.react.bridge.ReactContext; 25 | import com.facebook.react.modules.network.NetworkingModule; 26 | import okhttp3.OkHttpClient; 27 | 28 | public class ReactNativeFlipper { 29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 30 | if (FlipperUtils.shouldEnableFlipper(context)) { 31 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 32 | 33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 34 | client.addPlugin(new ReactFlipperPlugin()); 35 | client.addPlugin(new DatabasesFlipperPlugin(context)); 36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 37 | client.addPlugin(CrashReporterPlugin.getInstance()); 38 | 39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 40 | NetworkingModule.setCustomClientBuilder( 41 | new NetworkingModule.CustomClientBuilder() { 42 | @Override 43 | public void apply(OkHttpClient.Builder builder) { 44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 45 | } 46 | }); 47 | client.addPlugin(networkFlipperPlugin); 48 | client.start(); 49 | 50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 51 | // Hence we run if after all native modules have been initialized 52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 53 | if (reactContext == null) { 54 | reactInstanceManager.addReactInstanceEventListener( 55 | new ReactInstanceEventListener() { 56 | @Override 57 | public void onReactContextInitialized(ReactContext reactContext) { 58 | reactInstanceManager.removeReactInstanceEventListener(this); 59 | reactContext.runOnNativeModulesQueueThread( 60 | new Runnable() { 61 | @Override 62 | public void run() { 63 | client.addPlugin(new FrescoFlipperPlugin()); 64 | } 65 | }); 66 | } 67 | }); 68 | } else { 69 | client.addPlugin(new FrescoFlipperPlugin()); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rnmail/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rnmail; 2 | 3 | import android.os.Bundle; 4 | import com.facebook.react.ReactActivity; 5 | import com.facebook.react.ReactActivityDelegate; 6 | import com.facebook.react.ReactRootView; 7 | 8 | public class MainActivity extends ReactActivity { 9 | @Override 10 | protected void onCreate(Bundle savedInstanceState) { 11 | super.onCreate(null); 12 | } 13 | 14 | /** 15 | * Returns the name of the main component registered from JavaScript. This is used to schedule 16 | * rendering of the component. 17 | */ 18 | @Override 19 | protected String getMainComponentName() { 20 | return "RNMail"; 21 | } 22 | 23 | /** 24 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 25 | * 26 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer 27 | * (Paper). 28 | */ 29 | @Override 30 | protected ReactActivityDelegate createReactActivityDelegate() { 31 | return new MainActivityDelegate(this, getMainComponentName()); 32 | } 33 | 34 | public static class MainActivityDelegate extends ReactActivityDelegate { 35 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) { 36 | super(activity, mainComponentName); 37 | } 38 | 39 | @Override 40 | protected ReactRootView createRootView() { 41 | ReactRootView reactRootView = new ReactRootView(getContext()); 42 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 43 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); 44 | return reactRootView; 45 | } 46 | @Override 47 | protected boolean isConcurrentRootEnabled() { 48 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). 49 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html 50 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rnmail/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rnmail; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.config.ReactFeatureFlags; 11 | import com.facebook.soloader.SoLoader; 12 | import com.rnmail.newarchitecture.MainApplicationReactNativeHost; 13 | import java.lang.reflect.InvocationTargetException; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | private final ReactNativeHost mNewArchitectureNativeHost = 41 | new MainApplicationReactNativeHost(this); 42 | 43 | @Override 44 | public ReactNativeHost getReactNativeHost() { 45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 46 | return mNewArchitectureNativeHost; 47 | } else { 48 | return mReactNativeHost; 49 | } 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | // If you opted-in for the New Architecture, we enable the TurboModule system 56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 57 | SoLoader.init(this, /* native exopackage */ false); 58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 59 | } 60 | 61 | /** 62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | * 65 | * @param context 66 | * @param reactInstanceManager 67 | */ 68 | private static void initializeFlipper( 69 | Context context, ReactInstanceManager reactInstanceManager) { 70 | if (BuildConfig.DEBUG) { 71 | try { 72 | /* 73 | We use reflection here to pick up the class that initializes Flipper, 74 | since Flipper library is not available in release mode 75 | */ 76 | Class aClass = Class.forName("com.rnmail.ReactNativeFlipper"); 77 | aClass 78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 79 | .invoke(null, context, reactInstanceManager); 80 | } catch (ClassNotFoundException e) { 81 | e.printStackTrace(); 82 | } catch (NoSuchMethodException e) { 83 | e.printStackTrace(); 84 | } catch (IllegalAccessException e) { 85 | e.printStackTrace(); 86 | } catch (InvocationTargetException e) { 87 | e.printStackTrace(); 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rnmail/newarchitecture/MainApplicationReactNativeHost.java: -------------------------------------------------------------------------------- 1 | package com.rnmail.newarchitecture; 2 | 3 | import android.app.Application; 4 | import androidx.annotation.NonNull; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactInstanceManager; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 10 | import com.facebook.react.bridge.JSIModulePackage; 11 | import com.facebook.react.bridge.JSIModuleProvider; 12 | import com.facebook.react.bridge.JSIModuleSpec; 13 | import com.facebook.react.bridge.JSIModuleType; 14 | import com.facebook.react.bridge.JavaScriptContextHolder; 15 | import com.facebook.react.bridge.ReactApplicationContext; 16 | import com.facebook.react.bridge.UIManager; 17 | import com.facebook.react.fabric.ComponentFactory; 18 | import com.facebook.react.fabric.CoreComponentsRegistry; 19 | import com.facebook.react.fabric.FabricJSIModuleProvider; 20 | import com.facebook.react.fabric.ReactNativeConfig; 21 | import com.facebook.react.uimanager.ViewManagerRegistry; 22 | import com.rnmail.BuildConfig; 23 | import com.rnmail.newarchitecture.components.MainComponentsRegistry; 24 | import com.rnmail.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; 25 | import java.util.ArrayList; 26 | import java.util.List; 27 | 28 | /** 29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both 30 | * TurboModule delegates and the Fabric Renderer. 31 | * 32 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 33 | * `newArchEnabled` property). Is ignored otherwise. 34 | */ 35 | public class MainApplicationReactNativeHost extends ReactNativeHost { 36 | public MainApplicationReactNativeHost(Application application) { 37 | super(application); 38 | } 39 | 40 | @Override 41 | public boolean getUseDeveloperSupport() { 42 | return BuildConfig.DEBUG; 43 | } 44 | 45 | @Override 46 | protected List getPackages() { 47 | List packages = new PackageList(this).getPackages(); 48 | // Packages that cannot be autolinked yet can be added manually here, for example: 49 | // packages.add(new MyReactNativePackage()); 50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: 51 | // packages.add(new TurboReactPackage() { ... }); 52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here 53 | // inside a ReactPackage. 54 | return packages; 55 | } 56 | 57 | @Override 58 | protected String getJSMainModuleName() { 59 | return "index"; 60 | } 61 | 62 | @NonNull 63 | @Override 64 | protected ReactPackageTurboModuleManagerDelegate.Builder 65 | getReactPackageTurboModuleManagerDelegateBuilder() { 66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary 67 | // for the new architecture and to use TurboModules correctly. 68 | return new MainApplicationTurboModuleManagerDelegate.Builder(); 69 | } 70 | 71 | @Override 72 | protected JSIModulePackage getJSIModulePackage() { 73 | return new JSIModulePackage() { 74 | @Override 75 | public List getJSIModules( 76 | final ReactApplicationContext reactApplicationContext, 77 | final JavaScriptContextHolder jsContext) { 78 | final List specs = new ArrayList<>(); 79 | 80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the 81 | // custom Fabric Components. 82 | specs.add( 83 | new JSIModuleSpec() { 84 | @Override 85 | public JSIModuleType getJSIModuleType() { 86 | return JSIModuleType.UIManager; 87 | } 88 | 89 | @Override 90 | public JSIModuleProvider getJSIModuleProvider() { 91 | final ComponentFactory componentFactory = new ComponentFactory(); 92 | CoreComponentsRegistry.register(componentFactory); 93 | 94 | // Here we register a Components Registry. 95 | // The one that is generated with the template contains no components 96 | // and just provides you the one from React Native core. 97 | MainComponentsRegistry.register(componentFactory); 98 | 99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); 100 | 101 | ViewManagerRegistry viewManagerRegistry = 102 | new ViewManagerRegistry( 103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); 104 | 105 | return new FabricJSIModuleProvider( 106 | reactApplicationContext, 107 | componentFactory, 108 | ReactNativeConfig.DEFAULT_CONFIG, 109 | viewManagerRegistry); 110 | } 111 | }); 112 | return specs; 113 | } 114 | }; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java: -------------------------------------------------------------------------------- 1 | package com.rnmail.newarchitecture.components; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.proguard.annotations.DoNotStrip; 5 | import com.facebook.react.fabric.ComponentFactory; 6 | import com.facebook.soloader.SoLoader; 7 | 8 | /** 9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a 10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 11 | * folder for you). 12 | * 13 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 14 | * `newArchEnabled` property). Is ignored otherwise. 15 | */ 16 | @DoNotStrip 17 | public class MainComponentsRegistry { 18 | static { 19 | SoLoader.loadLibrary("fabricjni"); 20 | } 21 | 22 | @DoNotStrip private final HybridData mHybridData; 23 | 24 | @DoNotStrip 25 | private native HybridData initHybrid(ComponentFactory componentFactory); 26 | 27 | @DoNotStrip 28 | private MainComponentsRegistry(ComponentFactory componentFactory) { 29 | mHybridData = initHybrid(componentFactory); 30 | } 31 | 32 | @DoNotStrip 33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) { 34 | return new MainComponentsRegistry(componentFactory); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java: -------------------------------------------------------------------------------- 1 | package com.rnmail.newarchitecture.modules; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.soloader.SoLoader; 8 | import java.util.List; 9 | 10 | /** 11 | * Class responsible to load the TurboModules. This class has native methods and needs a 12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 13 | * folder for you). 14 | * 15 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 16 | * `newArchEnabled` property). Is ignored otherwise. 17 | */ 18 | public class MainApplicationTurboModuleManagerDelegate 19 | extends ReactPackageTurboModuleManagerDelegate { 20 | 21 | private static volatile boolean sIsSoLibraryLoaded; 22 | 23 | protected MainApplicationTurboModuleManagerDelegate( 24 | ReactApplicationContext reactApplicationContext, List packages) { 25 | super(reactApplicationContext, packages); 26 | } 27 | 28 | protected native HybridData initHybrid(); 29 | 30 | native boolean canCreateTurboModule(String moduleName); 31 | 32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder { 33 | protected MainApplicationTurboModuleManagerDelegate build( 34 | ReactApplicationContext context, List packages) { 35 | return new MainApplicationTurboModuleManagerDelegate(context, packages); 36 | } 37 | } 38 | 39 | @Override 40 | protected synchronized void maybeLoadOtherSoLibraries() { 41 | if (!sIsSoLibraryLoaded) { 42 | // If you change the name of your application .so file in the Android.mk file, 43 | // make sure you update the name here as well. 44 | SoLoader.loadLibrary("rnmail_appmodules"); 45 | sIsSoLibraryLoaded = true; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /android/app/src/main/jni/Android.mk: -------------------------------------------------------------------------------- 1 | THIS_DIR := $(call my-dir) 2 | 3 | include $(REACT_ANDROID_DIR)/Android-prebuilt.mk 4 | 5 | # If you wish to add a custom TurboModule or Fabric component in your app you 6 | # will have to include the following autogenerated makefile. 7 | # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk 8 | include $(CLEAR_VARS) 9 | 10 | LOCAL_PATH := $(THIS_DIR) 11 | 12 | # You can customize the name of your application .so file here. 13 | LOCAL_MODULE := rnmail_appmodules 14 | 15 | LOCAL_C_INCLUDES := $(LOCAL_PATH) 16 | LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) 17 | LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) 18 | 19 | # If you wish to add a custom TurboModule or Fabric component in your app you 20 | # will have to uncomment those lines to include the generated source 21 | # files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni) 22 | # 23 | # LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni 24 | # LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp) 25 | # LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni 26 | 27 | # Here you should add any native library you wish to depend on. 28 | LOCAL_SHARED_LIBRARIES := \ 29 | libfabricjni \ 30 | libfbjni \ 31 | libfolly_futures \ 32 | libfolly_json \ 33 | libglog \ 34 | libjsi \ 35 | libreact_codegen_rncore \ 36 | libreact_debug \ 37 | libreact_nativemodule_core \ 38 | libreact_render_componentregistry \ 39 | libreact_render_core \ 40 | libreact_render_debug \ 41 | libreact_render_graphics \ 42 | librrc_view \ 43 | libruntimeexecutor \ 44 | libturbomodulejsijni \ 45 | libyoga 46 | 47 | LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall 48 | 49 | include $(BUILD_SHARED_LIBRARY) 50 | -------------------------------------------------------------------------------- /android/app/src/main/jni/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | cmake_minimum_required(VERSION 3.13) 2 | # Define the library name here. 3 | project(rndiffapp_appmodules) 4 | # This file includes all the necessary to let you build your application with the New Architecture. 5 | include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake) 6 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationModuleProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationModuleProvider.h" 2 | 3 | #include 4 | #include 5 | 6 | namespace facebook { 7 | namespace react { 8 | 9 | std::shared_ptr MainApplicationModuleProvider( 10 | const std::string &moduleName, 11 | const JavaTurboModule::InitParams ¶ms) { 12 | // Here you can provide your own module provider for TurboModules coming from 13 | // either your application or from external libraries. The approach to follow 14 | // is similar to the following (for a library called `samplelibrary`: 15 | // 16 | // auto module = samplelibrary_ModuleProvider(moduleName, params); 17 | // if (module != nullptr) { 18 | // return module; 19 | // } 20 | // return rncore_ModuleProvider(moduleName, params); 21 | 22 | // Module providers autolinked by RN CLI 23 | auto rncli_module = rncli_ModuleProvider(moduleName, params); 24 | if (rncli_module != nullptr) { 25 | return rncli_module; 26 | } 27 | 28 | return rncore_ModuleProvider(moduleName, params); 29 | } 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationModuleProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | std::shared_ptr MainApplicationModuleProvider( 12 | const std::string &moduleName, 13 | const JavaTurboModule::InitParams ¶ms); 14 | 15 | } // namespace react 16 | } // namespace facebook 17 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationTurboModuleManagerDelegate.h" 2 | #include "MainApplicationModuleProvider.h" 3 | 4 | namespace facebook { 5 | namespace react { 6 | 7 | jni::local_ref 8 | MainApplicationTurboModuleManagerDelegate::initHybrid( 9 | jni::alias_ref) { 10 | return makeCxxInstance(); 11 | } 12 | 13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() { 14 | registerHybrid({ 15 | makeNativeMethod( 16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid), 17 | makeNativeMethod( 18 | "canCreateTurboModule", 19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule), 20 | }); 21 | } 22 | 23 | std::shared_ptr 24 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 25 | const std::string &name, 26 | const std::shared_ptr jsInvoker) { 27 | // Not implemented yet: provide pure-C++ NativeModules here. 28 | return nullptr; 29 | } 30 | 31 | std::shared_ptr 32 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 33 | const std::string &name, 34 | const JavaTurboModule::InitParams ¶ms) { 35 | return MainApplicationModuleProvider(name, params); 36 | } 37 | 38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule( 39 | const std::string &name) { 40 | return getTurboModule(name, nullptr) != nullptr || 41 | getTurboModule(name, {.moduleName = name}) != nullptr; 42 | } 43 | 44 | } // namespace react 45 | } // namespace facebook 46 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #include 5 | #include 6 | 7 | namespace facebook { 8 | namespace react { 9 | 10 | class MainApplicationTurboModuleManagerDelegate 11 | : public jni::HybridClass< 12 | MainApplicationTurboModuleManagerDelegate, 13 | TurboModuleManagerDelegate> { 14 | public: 15 | // Adapt it to the package you used for your Java class. 16 | static constexpr auto kJavaDescriptor = 17 | "Lcom/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;"; 18 | 19 | static jni::local_ref initHybrid(jni::alias_ref); 20 | 21 | static void registerNatives(); 22 | 23 | std::shared_ptr getTurboModule( 24 | const std::string &name, 25 | const std::shared_ptr jsInvoker) override; 26 | std::shared_ptr getTurboModule( 27 | const std::string &name, 28 | const JavaTurboModule::InitParams ¶ms) override; 29 | 30 | /** 31 | * Test-only method. Allows user to verify whether a TurboModule can be 32 | * created by instances of this class. 33 | */ 34 | bool canCreateTurboModule(const std::string &name); 35 | }; 36 | 37 | } // namespace react 38 | } // namespace facebook 39 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainComponentsRegistry.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponentsRegistry.h" 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | 9 | namespace facebook { 10 | namespace react { 11 | 12 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {} 13 | 14 | std::shared_ptr 15 | MainComponentsRegistry::sharedProviderRegistry() { 16 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); 17 | 18 | // Autolinked providers registered by RN CLI 19 | rncli_registerProviders(providerRegistry); 20 | 21 | // Custom Fabric Components go here. You can register custom 22 | // components coming from your App or from 3rd party libraries here. 23 | // 24 | // providerRegistry->add(concreteComponentDescriptorProvider< 25 | // AocViewerComponentDescriptor>()); 26 | return providerRegistry; 27 | } 28 | 29 | jni::local_ref 30 | MainComponentsRegistry::initHybrid( 31 | jni::alias_ref, 32 | ComponentFactory *delegate) { 33 | auto instance = makeCxxInstance(delegate); 34 | 35 | auto buildRegistryFunction = 36 | [](EventDispatcher::Weak const &eventDispatcher, 37 | ContextContainer::Shared const &contextContainer) 38 | -> ComponentDescriptorRegistry::Shared { 39 | auto registry = MainComponentsRegistry::sharedProviderRegistry() 40 | ->createComponentDescriptorRegistry( 41 | {eventDispatcher, contextContainer}); 42 | 43 | auto mutableRegistry = 44 | std::const_pointer_cast(registry); 45 | 46 | mutableRegistry->setFallbackComponentDescriptor( 47 | std::make_shared( 48 | ComponentDescriptorParameters{ 49 | eventDispatcher, contextContainer, nullptr})); 50 | 51 | return registry; 52 | }; 53 | 54 | delegate->buildRegistryFunction = buildRegistryFunction; 55 | return instance; 56 | } 57 | 58 | void MainComponentsRegistry::registerNatives() { 59 | registerHybrid({ 60 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid), 61 | }); 62 | } 63 | 64 | } // namespace react 65 | } // namespace facebook 66 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainComponentsRegistry.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | class MainComponentsRegistry 12 | : public facebook::jni::HybridClass { 13 | public: 14 | // Adapt it to the package you used for your Java class. 15 | constexpr static auto kJavaDescriptor = 16 | "Lcom/rnmail/newarchitecture/components/MainComponentsRegistry;"; 17 | 18 | static void registerNatives(); 19 | 20 | MainComponentsRegistry(ComponentFactory *delegate); 21 | 22 | private: 23 | static std::shared_ptr 24 | sharedProviderRegistry(); 25 | 26 | static jni::local_ref initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate); 29 | }; 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /android/app/src/main/jni/OnLoad.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "MainApplicationTurboModuleManagerDelegate.h" 3 | #include "MainComponentsRegistry.h" 4 | 5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { 6 | return facebook::jni::initialize(vm, [] { 7 | facebook::react::MainApplicationTurboModuleManagerDelegate:: 8 | registerNatives(); 9 | facebook::react::MainComponentsRegistry::registerNatives(); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNMail 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | import org.apache.tools.ant.taskdefs.condition.Os 2 | 3 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 4 | 5 | buildscript { 6 | ext { 7 | buildToolsVersion = "31.0.0" 8 | minSdkVersion = 21 9 | compileSdkVersion = 31 10 | targetSdkVersion = 31 11 | 12 | if (System.properties['os.arch'] == "aarch64") { 13 | // For M1 Users we need to use the NDK 24 which added support for aarch64 14 | ndkVersion = "24.0.8215888" 15 | } else { 16 | // Otherwise we default to the side-by-side NDK version from AGP. 17 | ndkVersion = "21.4.7075529" 18 | } 19 | } 20 | repositories { 21 | google() 22 | mavenCentral() 23 | } 24 | dependencies { 25 | classpath("com.android.tools.build:gradle:7.2.1") 26 | classpath("com.facebook.react:react-native-gradle-plugin") 27 | classpath("de.undercouch:gradle-download-task:5.0.1") 28 | // NOTE: Do not place your application dependencies here; they belong 29 | // in the individual module build.gradle files 30 | } 31 | } 32 | 33 | allprojects { 34 | repositories { 35 | maven { 36 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 37 | url("$rootDir/../node_modules/react-native/android") 38 | } 39 | maven { 40 | // Android JSC is installed from npm 41 | url("$rootDir/../node_modules/jsc-android/dist") 42 | } 43 | mavenCentral { 44 | // We don't want to fetch react-native from Maven Central as there are 45 | // older versions over there. 46 | content { 47 | excludeGroup "com.facebook.react" 48 | } 49 | } 50 | google() 51 | maven { url 'https://www.jitpack.io' } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNMail' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | 6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { 7 | include(":ReactAndroid") 8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid') 9 | include(":ReactAndroid:hermes-engine") 10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine') 11 | } 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNMail", 3 | "displayName": "RNMail" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: [ 4 | [ 5 | 'module-resolver', 6 | { 7 | root: ['./'], 8 | alias: { 9 | '@': './src', 10 | }, 11 | }, 12 | ], 13 | 'react-native-reanimated/plugin', 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | import { SvgProps } from 'react-native-svg' 3 | const content: React.FC 4 | export default content 5 | } 6 | -------------------------------------------------------------------------------- /doc/thumb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/doc/thumb1.jpg -------------------------------------------------------------------------------- /doc/thumb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/doc/thumb2.jpg -------------------------------------------------------------------------------- /doc/thumb3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danijelconsulting/ui-mockup-react-native/b607d4b7eba1d846621d604c4c6439cced523ce1/doc/thumb3.jpg -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native-gesture-handler' 6 | import { AppRegistry } from 'react-native' 7 | import App from './src/app' 8 | import { name as appName } from './app.json' 9 | 10 | AppRegistry.registerComponent(appName, () => App) 11 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '12.4' 5 | install! 'cocoapods', :deterministic_uuids => false 6 | 7 | target 'RNMail' do 8 | config = use_native_modules! 9 | 10 | # Flags change depending on the env values. 11 | flags = get_default_flags() 12 | 13 | use_react_native!( 14 | :path => config[:reactNativePath], 15 | # Hermes is now enabled by default. Disable by setting this flag to false. 16 | # Upcoming versions of React Native may rely on get_default_flags(), but 17 | # we make it explicit here to aid in the React Native upgrade process. 18 | :hermes_enabled => true, 19 | :fabric_enabled => flags[:fabric_enabled], 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | :flipper_configuration => FlipperConfiguration.enabled, 25 | # An absolute path to your application root. 26 | :app_path => "#{Pod::Config.instance.installation_root}/.." 27 | ) 28 | 29 | target 'RNMailTests' do 30 | inherit! :complete 31 | # Pods for testing 32 | end 33 | 34 | post_install do |installer| 35 | react_native_post_install( 36 | installer, 37 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 38 | # necessary for Mac Catalyst builds 39 | :mac_catalyst_enabled => false 40 | ) 41 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /ios/RNMail.xcodeproj/xcshareddata/xcschemes/RNMail.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /ios/RNMail.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/RNMail.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/RNMail/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /ios/RNMail/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #import 8 | 9 | #if RCT_NEW_ARCH_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | #import 18 | 19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot"; 20 | 21 | @interface AppDelegate () { 22 | RCTTurboModuleManager *_turboModuleManager; 23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter; 24 | std::shared_ptr _reactNativeConfig; 25 | facebook::react::ContextContainer::Shared _contextContainer; 26 | } 27 | @end 28 | #endif 29 | 30 | @implementation AppDelegate 31 | 32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 33 | { 34 | RCTAppSetupPrepareApp(application); 35 | 36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 37 | 38 | #if RCT_NEW_ARCH_ENABLED 39 | _contextContainer = std::make_shared(); 40 | _reactNativeConfig = std::make_shared(); 41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig); 42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer]; 43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter; 44 | #endif 45 | 46 | NSDictionary *initProps = [self prepareInitialProps]; 47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"RNMail", initProps); 48 | 49 | if (@available(iOS 13.0, *)) { 50 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 51 | } else { 52 | rootView.backgroundColor = [UIColor whiteColor]; 53 | } 54 | 55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 56 | UIViewController *rootViewController = [UIViewController new]; 57 | rootViewController.view = rootView; 58 | self.window.rootViewController = rootViewController; 59 | [self.window makeKeyAndVisible]; 60 | return YES; 61 | } 62 | 63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 64 | /// 65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. 68 | - (BOOL)concurrentRootEnabled 69 | { 70 | // Switch this bool to turn on and off the concurrent root 71 | return true; 72 | } 73 | - (NSDictionary *)prepareInitialProps 74 | { 75 | NSMutableDictionary *initProps = [NSMutableDictionary new]; 76 | #ifdef RCT_NEW_ARCH_ENABLED 77 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]); 78 | #endif 79 | return initProps; 80 | } 81 | 82 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 83 | { 84 | #if DEBUG 85 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 86 | #else 87 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 88 | #endif 89 | } 90 | 91 | #if RCT_NEW_ARCH_ENABLED 92 | 93 | #pragma mark - RCTCxxBridgeDelegate 94 | 95 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge 96 | { 97 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge 98 | delegate:self 99 | jsInvoker:bridge.jsCallInvoker]; 100 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager); 101 | } 102 | 103 | #pragma mark RCTTurboModuleManagerDelegate 104 | 105 | - (Class)getModuleClassFromName:(const char *)name 106 | { 107 | return RCTCoreModulesClassProvider(name); 108 | } 109 | 110 | - (std::shared_ptr)getTurboModule:(const std::string &)name 111 | jsInvoker:(std::shared_ptr)jsInvoker 112 | { 113 | return nullptr; 114 | } 115 | 116 | - (std::shared_ptr)getTurboModule:(const std::string &)name 117 | initParams: 118 | (const facebook::react::ObjCTurboModule::InitParams &)params 119 | { 120 | return nullptr; 121 | } 122 | 123 | - (id)getModuleInstanceFromClass:(Class)moduleClass 124 | { 125 | return RCTAppSetupDefaultModuleFromClass(moduleClass); 126 | } 127 | 128 | #endif 129 | 130 | @end 131 | -------------------------------------------------------------------------------- /ios/RNMail/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /ios/RNMail/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/RNMail/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | RNMail 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UIAppFonts 41 | 42 | Feather.ttf 43 | 44 | UILaunchStoryboardName 45 | LaunchScreen 46 | UIRequiredDeviceCapabilities 47 | 48 | armv7 49 | 50 | UISupportedInterfaceOrientations 51 | 52 | UIInterfaceOrientationLandscapeLeft 53 | UIInterfaceOrientationLandscapeRight 54 | UIInterfaceOrientationPortrait 55 | UIInterfaceOrientationPortraitUpsideDown 56 | 57 | UIViewControllerBasedStatusBarAppearance 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ios/RNMail/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/RNMail/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ios/RNMailTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/RNMailTests/RNMailTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface RNMailTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation RNMailTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | const {getDefaultConfig} = require('metro-config') 8 | 9 | module.exports = (async () => { 10 | const { 11 | resolver: {sourceExts, assetExts}, 12 | } = await getDefaultConfig() 13 | return { 14 | transformer: { 15 | babelTransformerPath: require.resolve('react-native-svg-transformer'), 16 | getTransformOptions: async () => ({ 17 | transform: { 18 | experimentalImportSupport: false, 19 | inlineRequires: true, 20 | }, 21 | }), 22 | }, 23 | resolver: { 24 | assetExts: assetExts.filter(ext => ext !== 'svg'), 25 | sourceExts: [...sourceExts, 'svg'], 26 | }, 27 | } 28 | })() 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inkdrop-ui-mockup", 3 | "version": "0.0.1", 4 | "private": true, 5 | "license": "Apache-2.0", 6 | "author": "Takuya Matsuyama (https://www.craftz.dog/)", 7 | "scripts": { 8 | "android": "react-native run-android", 9 | "ios": "react-native run-ios", 10 | "start": "react-native start", 11 | "test": "jest", 12 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 13 | }, 14 | "dependencies": { 15 | "@gorhom/bottom-sheet": "^4.4.5", 16 | "@react-navigation/drawer": "^6.5.0", 17 | "@react-navigation/native": "^6.0.13", 18 | "@react-navigation/native-stack": "^6.9.1", 19 | "@shopify/restyle": "^2.1.0", 20 | "jotai": "^1.9.0", 21 | "lorem-ipsum": "^2.0.4", 22 | "react": "18.1.0", 23 | "react-native": "0.70.4", 24 | "react-native-gesture-handler": "^2.8.0", 25 | "react-native-reanimated": "^2.12.0", 26 | "react-native-safe-area-context": "^4.4.1", 27 | "react-native-screens": "^3.18.2", 28 | "react-native-svg": "^13.4.0", 29 | "react-native-three-column-layout": "^0.1.0", 30 | "react-native-vector-icons": "^9.2.0", 31 | "shortid": "^2.2.16" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.12.9", 35 | "@babel/runtime": "^7.12.5", 36 | "@types/jest": "^26.0.23", 37 | "@types/react-native": "^0.70.6", 38 | "@types/react-native-vector-icons": "^6.4.10", 39 | "@types/react-test-renderer": "^17.0.1", 40 | "@types/shortid": "^0.0.29", 41 | "@typescript-eslint/eslint-plugin": "^5.17.0", 42 | "@typescript-eslint/parser": "^5.17.0", 43 | "babel-jest": "^26.6.3", 44 | "babel-plugin-module-resolver": "^4.1.0", 45 | "eslint": "^8.16.0", 46 | "eslint-config-prettier": "^8.5.0", 47 | "jest": "^26.6.3", 48 | "metro-react-native-babel-preset": "^0.72.3", 49 | "prettier": "^2.6.2", 50 | "react-native-svg-transformer": "^1.0.0", 51 | "react-test-renderer": "18.1.0", 52 | "typescript": "^4.4.4" 53 | }, 54 | "resolutions": { 55 | "@types/react": "^18" 56 | }, 57 | "jest": { 58 | "preset": "react-native", 59 | "moduleFileExtensions": [ 60 | "ts", 61 | "tsx", 62 | "js", 63 | "jsx", 64 | "json", 65 | "node" 66 | ] 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | const options = { 2 | arrowParens: 'avoid', 3 | singleQuote: true, 4 | bracketSpacing: true, 5 | endOfLine: 'lf', 6 | semi: false, 7 | tabWidth: 2, 8 | trailingComma: 'none' 9 | } 10 | module.exports = options 11 | -------------------------------------------------------------------------------- /src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavigationContainer } from '@react-navigation/native' 3 | import Navigations from './navs' 4 | import { ThemeProvider } from '@shopify/restyle' 5 | import StatusBar from '@/components/status-bar' 6 | import { useAtom } from 'jotai' 7 | import { activeThemeAtom } from './states/theme' 8 | 9 | const App = () => { 10 | const [activeTheme] = useAtom(activeThemeAtom) 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default App 22 | -------------------------------------------------------------------------------- /src/atoms/animated-box.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Theme } from '@/themes' 3 | import { ViewProps } from 'react-native' 4 | import Animated, { AnimateProps } from 'react-native-reanimated' 5 | import { createBox } from '@shopify/restyle' 6 | 7 | const AnimatedBox = createBox>(Animated.View) 8 | 9 | export type AnimatedBoxProps = React.ComponentProps 10 | export default AnimatedBox 11 | -------------------------------------------------------------------------------- /src/atoms/bar.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { 3 | createRestyleComponent, 4 | createVariant, 5 | VariantProps 6 | } from '@shopify/restyle' 7 | import Box, { BoxProps } from './box' 8 | 9 | const Bar = createRestyleComponent< 10 | VariantProps & BoxProps, 11 | Theme 12 | >([createVariant({ themeKey: 'barVariants' })], Box) 13 | 14 | export default Bar 15 | -------------------------------------------------------------------------------- /src/atoms/bottom-sheet.tsx: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import RNBottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet' 3 | import { ColorProps, useTheme } from '@shopify/restyle' 4 | import React, { forwardRef } from 'react' 5 | 6 | type Props = BottomSheetProps & ColorProps 7 | 8 | const BottomSheet = forwardRef(({ ...rest }, ref) => { 9 | const theme = useTheme() 10 | const bgColor = theme.colors['$background'] 11 | const handleColor = theme.colors['$foreground'] 12 | 13 | return ( 14 | 25 | ) 26 | }) 27 | 28 | export default BottomSheet 29 | -------------------------------------------------------------------------------- /src/atoms/box.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { createBox } from '@shopify/restyle' 3 | 4 | const Box = createBox() 5 | export type BoxProps = React.ComponentProps 6 | 7 | export default Box 8 | -------------------------------------------------------------------------------- /src/atoms/container.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { BoxProps } from '@shopify/restyle' 3 | import { Theme } from '@/themes' 4 | import Box from './box' 5 | 6 | type Props = BoxProps & { 7 | children: React.ReactNode 8 | } 9 | 10 | const Container: React.FC = props => ( 11 | 12 | {props.children} 13 | 14 | ) 15 | 16 | export default Container 17 | -------------------------------------------------------------------------------- /src/atoms/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './box' 2 | import Text from './text' 3 | import TextInput from './text-input' 4 | import Container from './container' 5 | import AnimatedBox from './animated-box' 6 | import Bar from './bar' 7 | import Pressable from './pressable' 8 | import Touchable, { TouchableOpacity } from './touchable' 9 | import SafeAreaView from './safe-area-view' 10 | import ScrollView from './scroll-view' 11 | 12 | export { 13 | Box, 14 | Text, 15 | TextInput, 16 | Container, 17 | AnimatedBox, 18 | Bar, 19 | Pressable, 20 | Touchable, 21 | TouchableOpacity, 22 | SafeAreaView, 23 | ScrollView 24 | } 25 | -------------------------------------------------------------------------------- /src/atoms/pressable.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Pressable as NativePressable, 3 | PressableProps as NativePressableProps 4 | } from 'react-native' 5 | import { Theme } from '@/themes' 6 | import { createBox } from '@shopify/restyle' 7 | 8 | const Pressable = createBox(NativePressable) 9 | export type PressableProps = React.ComponentProps 10 | 11 | export default Pressable 12 | -------------------------------------------------------------------------------- /src/atoms/safe-area-view.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { SafeAreaView as NativeSafeAreaView, ViewProps } from 'react-native' 3 | import { createBox } from '@shopify/restyle' 4 | 5 | const SafeAreaView = createBox(NativeSafeAreaView) 6 | export type SafeAreaViewProps = React.ComponentProps 7 | 8 | export default SafeAreaView 9 | -------------------------------------------------------------------------------- /src/atoms/scroll-view.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { 3 | ScrollView as NativeScrollView, 4 | ScrollViewProps as NativeScrollViewProps 5 | } from 'react-native' 6 | import { createBox } from '@shopify/restyle' 7 | 8 | const ScrollView = createBox(NativeScrollView) 9 | export type ScrollViewProps = React.ComponentProps 10 | 11 | export default ScrollView 12 | -------------------------------------------------------------------------------- /src/atoms/text-input.tsx: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import React, { forwardRef } from 'react' 3 | import { 4 | ColorProps, 5 | useRestyle, 6 | spacing, 7 | border, 8 | backgroundColor, 9 | BorderProps, 10 | BackgroundColorProps, 11 | composeRestyleFunctions, 12 | SpacingProps, 13 | color, 14 | backgroundColorShorthand, 15 | BackgroundColorShorthandProps, 16 | typography, 17 | TypographyProps, 18 | SpacingShorthandProps, 19 | spacingShorthand, 20 | LayoutProps, 21 | layout, 22 | ResponsiveValue, 23 | useTheme, 24 | useResponsiveProp 25 | } from '@shopify/restyle' 26 | import { TextInput as RNTextInput } from 'react-native' 27 | 28 | type RestyleProps = SpacingProps & 29 | SpacingShorthandProps & 30 | BorderProps & 31 | BackgroundColorProps & 32 | BackgroundColorShorthandProps & 33 | ColorProps & 34 | TypographyProps & 35 | LayoutProps 36 | 37 | const restyleFunctions = composeRestyleFunctions([ 38 | color, 39 | spacing, 40 | spacingShorthand, 41 | border, 42 | backgroundColor, 43 | backgroundColorShorthand, 44 | typography, 45 | layout 46 | ]) 47 | 48 | type TextInputProps = React.ComponentPropsWithRef & 49 | RestyleProps & { 50 | placeholderColor?: ResponsiveValue 51 | } 52 | 53 | const TextInput = forwardRef( 54 | ({ placeholderColor, ...rest }, ref) => { 55 | const props = useRestyle(restyleFunctions, rest as any) 56 | const theme = useTheme() 57 | const placeholderTextColorProp = 58 | placeholderColor && useResponsiveProp(placeholderColor) 59 | const placeholderTextColorValue = 60 | placeholderTextColorProp && theme.colors[placeholderTextColorProp] 61 | return ( 62 | 67 | ) 68 | } 69 | ) 70 | 71 | export default TextInput 72 | -------------------------------------------------------------------------------- /src/atoms/text.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { createText } from '@shopify/restyle' 3 | 4 | const Text = createText() 5 | 6 | export default Text 7 | -------------------------------------------------------------------------------- /src/atoms/touchable.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Pressable, { PressableProps } from './pressable' 3 | import { Platform } from 'react-native' 4 | import { 5 | backgroundColor, 6 | BackgroundColorProps, 7 | backgroundColorShorthand, 8 | BackgroundColorShorthandProps, 9 | border, 10 | BorderProps, 11 | composeRestyleFunctions, 12 | opacity, 13 | OpacityProps, 14 | ResponsiveValue, 15 | useResponsiveProp, 16 | useRestyle, 17 | useTheme 18 | } from '@shopify/restyle' 19 | import { Theme } from '@/themes' 20 | 21 | type RestyleProps = BackgroundColorProps & 22 | BackgroundColorShorthandProps & 23 | BorderProps & 24 | OpacityProps 25 | 26 | const restyleFunctions = composeRestyleFunctions([ 27 | backgroundColorShorthand, 28 | backgroundColor, 29 | border, 30 | opacity 31 | ]) 32 | 33 | interface Props extends PressableProps { 34 | pressed?: RestyleProps 35 | rippleColor?: ResponsiveValue 36 | rippleBorderless?: boolean 37 | } 38 | 39 | const Touchable = ({ 40 | pressed, 41 | rippleColor, 42 | rippleBorderless, 43 | style, 44 | ...rest 45 | }: Props) => { 46 | const { style: pressedStyle } = pressed 47 | ? useRestyle(restyleFunctions, pressed) 48 | : { style: undefined } 49 | const theme = useTheme() 50 | const rippleColorProp = rippleColor && useResponsiveProp(rippleColor) 51 | const rippleColorValue = rippleColorProp && theme.colors[rippleColorProp] 52 | 53 | return ( 54 | 59 | isPressed ? [style, pressedStyle] : style 60 | } 61 | /> 62 | ) 63 | } 64 | 65 | export const TouchableOpacity: React.FC = props => ( 66 | 71 | ) 72 | 73 | export default Touchable 74 | -------------------------------------------------------------------------------- /src/components/book-list-item.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TouchableOpacity } from '@/atoms' 2 | import { Book } from '@/models' 3 | import { Theme } from '@/themes' 4 | import { ColorProps } from '@shopify/restyle' 5 | import React, { useCallback } from 'react' 6 | 7 | export type ListItemProps = Book & 8 | ColorProps & { 9 | onPress: (bookId: string) => void 10 | } 11 | 12 | const BookListItem: React.FC = ({ 13 | id, 14 | name, 15 | onPress, 16 | color 17 | }) => { 18 | const handlePress = useCallback(() => onPress(id), [id]) 19 | return ( 20 | 21 | 27 | {name} 28 | 29 | 30 | ) 31 | } 32 | 33 | export default BookListItem 34 | -------------------------------------------------------------------------------- /src/components/book-list.tsx: -------------------------------------------------------------------------------- 1 | import { Book } from '@/models' 2 | import { Theme } from '@/themes' 3 | import { BottomSheetFlatList } from '@gorhom/bottom-sheet' 4 | import { ColorProps, createBox } from '@shopify/restyle' 5 | import React, { useCallback } from 'react' 6 | import { FlatList, FlatListProps } from 'react-native' 7 | import BookListItem from './book-list-item' 8 | import BOOKS from '@/fixtures/books' 9 | 10 | const StyledFlatList = createBox>(FlatList) 11 | const StyledBottomSheetFlatList = createBox>( 12 | BottomSheetFlatList 13 | ) 14 | 15 | type Props = { 16 | inBottomSheet?: boolean 17 | onPressItem: (bookId: string) => void 18 | headerComponent?: React.FC 19 | } & ColorProps 20 | 21 | const BookList: React.FC = ({ 22 | onPressItem, 23 | headerComponent, 24 | color, 25 | inBottomSheet 26 | }) => { 27 | const renderItem = useCallback( 28 | ({ item }: { item: Book }) => { 29 | return 30 | }, 31 | [onPressItem] 32 | ) 33 | 34 | const ListComponent = inBottomSheet 35 | ? StyledBottomSheetFlatList 36 | : StyledFlatList 37 | 38 | return ( 39 | item.id} 45 | width="100%" 46 | pt="sm" 47 | ListHeaderComponent={headerComponent} 48 | /> 49 | ) 50 | } 51 | 52 | export default BookList 53 | -------------------------------------------------------------------------------- /src/components/header-bar-left-button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AnimatedBox, Box, TouchableOpacity } from '@/atoms' 3 | import { AnimatedBoxProps } from '@/atoms/animated-box' 4 | import FeatherIcon from '@/components/icon' 5 | import { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated' 6 | 7 | type Props = AnimatedBoxProps & { 8 | onPress: () => void 9 | backButtonVisible: boolean 10 | } 11 | 12 | const HeaderBarLeftButton: React.FC = props => { 13 | const { onPress, backButtonVisible } = props 14 | 15 | const menuButtonStyle = useAnimatedStyle( 16 | () => ({ 17 | transform: [ 18 | { rotateZ: withTiming(backButtonVisible ? `0deg` : `180deg`) } 19 | ], 20 | opacity: withTiming(backButtonVisible ? 0 : 1, { 21 | easing: Easing.out(Easing.quad) 22 | }) 23 | }), 24 | [backButtonVisible] 25 | ) 26 | const backButtonStyle = useAnimatedStyle( 27 | () => ({ 28 | transform: [ 29 | { rotateZ: withTiming(backButtonVisible ? `0deg` : `180deg`) } 30 | ], 31 | opacity: withTiming(backButtonVisible ? 1 : 0, { 32 | easing: Easing.in(Easing.quad) 33 | }) 34 | }), 35 | [backButtonVisible] 36 | ) 37 | 38 | return ( 39 | 40 | 48 | 49 | 50 | 58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | 65 | export default HeaderBarLeftButton 66 | -------------------------------------------------------------------------------- /src/components/header-bar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useRef } from 'react' 2 | import { TextInput as RNTextInput } from 'react-native' 3 | import { TextInput, TouchableOpacity } from '@/atoms' 4 | import AnimatedBox, { AnimatedBoxProps } from '@/atoms/animated-box' 5 | import { searchInputHasFocusAtom, searchQueryAtom } from '@/states/search-bar' 6 | import { useAtom } from 'jotai' 7 | import HeaderBarLeftButton from './header-bar-left-button' 8 | import FeatherIcon from './icon' 9 | import { useSafeAreaInsets } from 'react-native-safe-area-context' 10 | import { useAnimatedStyle, withTiming } from 'react-native-reanimated' 11 | import { useTheme } from '@shopify/restyle' 12 | import { Theme } from '@/themes' 13 | 14 | type Props = AnimatedBoxProps & { 15 | onSidebarToggle: () => any 16 | } 17 | 18 | const HeaderBar: React.FC = props => { 19 | const { onSidebarToggle, ...rest } = props 20 | const safeAreaInsets = useSafeAreaInsets() 21 | const theme = useTheme() 22 | const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom) 23 | const [searchInputHasFocus, setSearchInputHasFocus] = useAtom( 24 | searchInputHasFocusAtom 25 | ) 26 | const refSearchInput = useRef(null) 27 | 28 | const handleSearchInputFocus = () => { 29 | setSearchInputHasFocus(true) 30 | } 31 | 32 | const handleSearchInputBlur = () => { 33 | setSearchInputHasFocus(false) 34 | } 35 | 36 | const handleClearButtonPress = () => { 37 | setSearchQuery('') 38 | } 39 | 40 | const handleLeftButtonPress = useCallback(() => { 41 | if (searchInputHasFocus) { 42 | const { current: input } = refSearchInput 43 | if (input) input.blur() 44 | setSearchQuery('') 45 | } else { 46 | onSidebarToggle() 47 | } 48 | }, [searchInputHasFocus, onSidebarToggle]) 49 | 50 | const safeAreaStyle = useAnimatedStyle( 51 | () => ({ 52 | opacity: withTiming(searchInputHasFocus ? 1 : 0) 53 | }), 54 | [searchInputHasFocus] 55 | ) 56 | const barStyle = useAnimatedStyle( 57 | () => ({ 58 | marginHorizontal: withTiming(searchInputHasFocus ? 0 : theme.spacing.lg), 59 | borderRadius: withTiming(searchInputHasFocus ? 0 : theme.borderRadii.md, { 60 | duration: 600 61 | }) 62 | }), 63 | [searchInputHasFocus] 64 | ) 65 | 66 | return ( 67 | 68 | 77 | 87 | 91 | 105 | {searchQuery.length > 0 && ( 106 | 112 | 113 | 114 | )} 115 | 116 | 117 | ) 118 | } 119 | 120 | export default HeaderBar 121 | -------------------------------------------------------------------------------- /src/components/icon.tsx: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { ColorProps, useResponsiveProp, useTheme } from '@shopify/restyle' 3 | import * as React from 'react' 4 | import Feather from 'react-native-vector-icons/Feather' 5 | 6 | export type IconProps = React.ComponentProps 7 | type Props = Omit & ColorProps 8 | 9 | const FeatherIcon: React.FC = ({ color = '$foreground', ...rest }) => { 10 | const theme = useTheme() 11 | const colorProp = useResponsiveProp(color) 12 | const vColor = theme.colors[colorProp || '$foreground'] 13 | return 14 | } 15 | 16 | export default FeatherIcon 17 | -------------------------------------------------------------------------------- /src/components/inkdrop-logo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import LogoSVG from '@/images/inkdrop-logo.svg' 3 | import { Theme } from '@/themes' 4 | import { ColorProps, useResponsiveProp, useTheme } from '@shopify/restyle' 5 | import { SvgProps } from 'react-native-svg' 6 | 7 | type Props = Omit & ColorProps 8 | 9 | const InkdropLogo: React.FC = ({ color = '$foreground', ...rest }) => { 10 | const theme = useTheme() 11 | const colorProp = useResponsiveProp(color) 12 | const vColor = theme.colors[colorProp || '$foreground'] 13 | 14 | return 15 | } 16 | 17 | export default InkdropLogo 18 | -------------------------------------------------------------------------------- /src/components/move-note-sheet.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | forwardRef, 3 | useCallback, 4 | useImperativeHandle, 5 | useMemo, 6 | useRef 7 | } from 'react' 8 | import RNBottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet' 9 | import BottomSheet from '@/atoms/bottom-sheet' 10 | import { Box, Text } from '@/atoms' 11 | import BookList from './book-list' 12 | 13 | interface Props { 14 | onClose?: () => void 15 | } 16 | 17 | interface MoveNoteSheetHandle { 18 | show: () => void 19 | } 20 | 21 | const MoveNoteSheet = forwardRef( 22 | ({ onClose }, ref) => { 23 | const refBottomSheet = useRef(null) 24 | const snapPoints = useMemo(() => ['60%', '90%'], []) 25 | 26 | useImperativeHandle(ref, () => ({ 27 | show: () => { 28 | const { current: bottomSheet } = refBottomSheet 29 | if (bottomSheet) { 30 | bottomSheet.snapToIndex(0) 31 | } 32 | } 33 | })) 34 | 35 | const handlePressItem = useCallback((_bookId: string) => { 36 | const { current: bottomSheet } = refBottomSheet 37 | if (bottomSheet) { 38 | bottomSheet.close() 39 | } 40 | }, []) 41 | 42 | return ( 43 | ( 48 | 53 | )} 54 | detached={true} 55 | bottomInset={46} 56 | enablePanDownToClose={true} 57 | style={{ marginHorizontal: 12 }} 58 | onClose={onClose} 59 | > 60 | ( 65 | 66 | Move 67 | 68 | )} 69 | /> 70 | 71 | ) 72 | } 73 | ) 74 | 75 | type MoveNoteSheet = MoveNoteSheetHandle 76 | 77 | export default MoveNoteSheet 78 | -------------------------------------------------------------------------------- /src/components/navbar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Box, SafeAreaView } from '@/atoms' 3 | import { StyleSheet } from 'react-native' 4 | 5 | interface Props { 6 | children?: React.ReactNode 7 | } 8 | 9 | const Navbar: React.FC = ({ children }) => { 10 | return ( 11 | 16 | 17 | {children} 18 | 19 | 20 | ) 21 | } 22 | 23 | export default Navbar 24 | -------------------------------------------------------------------------------- /src/components/note-list-header-title-bar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Box, Text } from '@/atoms' 3 | 4 | type Props = {} 5 | 6 | const NoteListHeaderTitleBar = (_props: Props) => { 7 | return ( 8 | 15 | 24 | All Notes 25 | 26 | 27 | ) 28 | } 29 | 30 | export default NoteListHeaderTitleBar 31 | -------------------------------------------------------------------------------- /src/components/note-list-item-action-view.tsx: -------------------------------------------------------------------------------- 1 | import { AnimatedBox, Box } from '@/atoms' 2 | import React from 'react' 3 | import { SharedValue, useAnimatedStyle } from 'react-native-reanimated' 4 | import FeatherIcon from './icon' 5 | 6 | interface Props { 7 | progress: Readonly> 8 | } 9 | 10 | const NoteListItemActionView: React.FC = ({ progress }) => { 11 | const iconStyle = useAnimatedStyle(() => ({ 12 | transform: [ 13 | { 14 | scale: progress.value 15 | } 16 | ] 17 | })) 18 | 19 | return ( 20 | 28 | 34 | 35 | 36 | 37 | 38 | ) 39 | } 40 | 41 | export default NoteListItemActionView 42 | -------------------------------------------------------------------------------- /src/components/note-list-item.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Text, TouchableOpacity } from '@/atoms' 2 | import { Note } from '@/models' 3 | import React, { memo, useCallback } from 'react' 4 | import NoteListItemActionView from './note-list-item-action-view' 5 | import SwipeableView, { BackViewProps } from './swipeable-view' 6 | 7 | export interface ListItemProps extends Note { 8 | onPress: (noteId: string) => void 9 | onSwipeLeft?: (noteId: string, done: () => void) => void 10 | } 11 | 12 | const NoteListItem: React.FC = memo(props => { 13 | const { onPress, onSwipeLeft, id } = props 14 | const handlePress = useCallback(() => { 15 | onPress(id) 16 | }, [onPress, id]) 17 | const handleSwipeLeft = useCallback( 18 | (done: () => void) => { 19 | onSwipeLeft && onSwipeLeft(id, done) 20 | }, 21 | [id, onSwipeLeft] 22 | ) 23 | 24 | const renderBackView = useCallback( 25 | ({ progress }: BackViewProps) => ( 26 | 27 | ), 28 | [] 29 | ) 30 | return ( 31 | 36 | 37 | 43 | 49 | {props.title} 50 | 51 | 57 | {props.body} 58 | 59 | 60 | 61 | 62 | ) 63 | }) 64 | 65 | export default NoteListItem 66 | -------------------------------------------------------------------------------- /src/components/note-list.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import { Theme } from '@/themes' 3 | import { createBox } from '@shopify/restyle' 4 | import { 5 | FlatListProps, 6 | NativeScrollEvent, 7 | NativeSyntheticEvent 8 | } from 'react-native' 9 | import NoteListItem from './note-list-item' 10 | import NOTES from '@/fixtures/notes' 11 | import { Note } from '@/models' 12 | import Animated, { AnimateProps } from 'react-native-reanimated' 13 | import { Box } from '@/atoms' 14 | 15 | const StyledFlatList = createBox>>( 16 | Animated.FlatList 17 | ) 18 | 19 | export interface Props { 20 | contentInsetTop: number 21 | ListHeaderComponent?: React.ComponentType | null | undefined 22 | onScroll: (event: NativeSyntheticEvent) => void 23 | onItemPress: (noteId: string) => void 24 | onItemSwipeLeft: (noteId: string, cancel: () => void) => void 25 | } 26 | 27 | const NoteList: React.FC = ({ 28 | ListHeaderComponent, 29 | onScroll, 30 | contentInsetTop, 31 | onItemPress, 32 | onItemSwipeLeft 33 | }) => { 34 | const renderItem = useCallback( 35 | ({ item }: { item: Note }) => { 36 | return ( 37 | 42 | ) 43 | }, 44 | [onItemPress, onItemSwipeLeft] 45 | ) 46 | 47 | return ( 48 | item.id} 53 | width="100%" 54 | onScroll={onScroll} 55 | scrollEventThrottle={16} 56 | ListHeaderComponent={ 57 | 58 | <> 59 | 60 | {ListHeaderComponent && } 61 | 62 | 63 | } 64 | /> 65 | ) 66 | } 67 | 68 | export default NoteList 69 | -------------------------------------------------------------------------------- /src/components/responsive-layout.tsx: -------------------------------------------------------------------------------- 1 | import useResponsiveLayout from '@/hooks/use-responsive-layout' 2 | import React, { ReactElement } from 'react' 3 | import { useEffect } from 'react' 4 | 5 | type Props = { 6 | renderOnTablet?: () => ReactElement 7 | renderOnPhone?: () => ReactElement 8 | onLayoutChange?: (layout: 'tablet' | 'phone') => any 9 | } 10 | 11 | const ResponsiveLayout: React.FC = props => { 12 | const { isTablet } = useResponsiveLayout() 13 | const { renderOnTablet, renderOnPhone, onLayoutChange } = props 14 | // may return nothing: 15 | // 1. renderOnWide set but we have narrow layout 16 | // 2. renderOnNarrow set but we have wide layout 17 | let children: React.ReactElement | null = null 18 | 19 | if (isTablet === true && renderOnTablet) { 20 | children = renderOnTablet() 21 | } else if (isTablet === false && renderOnPhone) { 22 | children = renderOnPhone() 23 | } 24 | 25 | useEffect(() => { 26 | onLayoutChange && onLayoutChange(isTablet === true ? 'tablet' : 'phone') 27 | }, [isTablet]) 28 | 29 | return children 30 | } 31 | 32 | export default ResponsiveLayout 33 | -------------------------------------------------------------------------------- /src/components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Text } from '@/atoms' 2 | import activeThemeId from '@/states/theme' 3 | import { Theme, ThemeMeta, ThemeNames, themes } from '@/themes' 4 | import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types' 5 | import { useNavigation } from '@react-navigation/native' 6 | import { createBox } from '@shopify/restyle' 7 | import { useAtom } from 'jotai' 8 | import React, { useCallback } from 'react' 9 | import { FlatList, FlatListProps, SafeAreaView } from 'react-native' 10 | import InkdropLogo from './inkdrop-logo' 11 | import ThemeListItem from './theme-list-item' 12 | 13 | type Props = {} 14 | const StyledFlatList = createBox>(FlatList) 15 | 16 | const Sidebar: React.FC = () => { 17 | const navigation = useNavigation() 18 | const [, setActiveTheme] = useAtom(activeThemeId) 19 | 20 | const handleThemeItemPress = useCallback( 21 | (selectedThemeId: ThemeNames) => { 22 | setActiveTheme(selectedThemeId) 23 | // navigation.closeDrawer() 24 | }, 25 | [navigation] 26 | ) 27 | 28 | const renderThemeItem = useCallback( 29 | ({ item }: { item: ThemeMeta }) => { 30 | return 31 | }, 32 | [handleThemeItemPress] 33 | ) 34 | 35 | return ( 36 | 37 | 38 | 46 | 47 | 48 | 49 | ( 51 | 52 | 53 | UI Themes 54 | 55 | 56 | )} 57 | data={themes} 58 | keyExtractor={(t: ThemeMeta) => t.id} 59 | renderItem={renderThemeItem} 60 | /> 61 | 62 | ) 63 | } 64 | 65 | export default Sidebar 66 | -------------------------------------------------------------------------------- /src/components/status-bar.tsx: -------------------------------------------------------------------------------- 1 | import { Theme } from '@/themes' 2 | import { useTheme } from '@shopify/restyle' 3 | import * as React from 'react' 4 | import { StatusBar as NativeStatusBar } from 'react-native' 5 | 6 | export default function StatusBar() { 7 | const theme = useTheme() 8 | 9 | return ( 10 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/components/swipeable-view.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@/atoms' 2 | import AnimatedBox, { AnimatedBoxProps } from '@/atoms/animated-box' 3 | import React, { forwardRef, useCallback, useImperativeHandle } from 'react' 4 | import { Dimensions } from 'react-native' 5 | import { 6 | PanGestureHandler, 7 | PanGestureHandlerGestureEvent, 8 | PanGestureHandlerProps 9 | } from 'react-native-gesture-handler' 10 | import { 11 | interpolate, 12 | runOnJS, 13 | SharedValue, 14 | useAnimatedGestureHandler, 15 | useAnimatedStyle, 16 | useDerivedValue, 17 | useSharedValue, 18 | withTiming 19 | } from 'react-native-reanimated' 20 | 21 | type SwipeLeftCallback = () => any 22 | 23 | export interface BackViewProps { 24 | progress: Readonly> 25 | } 26 | 27 | interface Props 28 | extends Pick, 29 | AnimatedBoxProps { 30 | children: React.ReactNode 31 | backView?: React.ReactNode | React.FC 32 | onSwipeLeft?: (conceal: SwipeLeftCallback) => any 33 | revealed?: boolean 34 | } 35 | 36 | interface SwipeableViewHandle { 37 | conceal: () => void 38 | } 39 | 40 | const { width: SCREEN_WIDTH } = Dimensions.get('window') 41 | const SWIPE_THREASHOLD = -0.2 42 | 43 | const SwipeableView = forwardRef((props, ref) => { 44 | const { children, backView, onSwipeLeft, simultaneousHandlers, ...boxProps } = 45 | props 46 | const translateX = useSharedValue(0) 47 | 48 | const invokeSwipeLeft = useCallback(() => { 49 | if (onSwipeLeft) { 50 | onSwipeLeft(() => { 51 | translateX.value = withTiming(0) 52 | }) 53 | } 54 | }, [onSwipeLeft]) 55 | 56 | const panGesture = useAnimatedGestureHandler({ 57 | onActive: event => { 58 | const x = interpolate(event.translationX, [-SCREEN_WIDTH, 0], [-1, 0]) 59 | translateX.value = Math.max(-1, Math.min(0, x)) 60 | }, 61 | onEnd: () => { 62 | const shouldBeDismissed = translateX.value < SWIPE_THREASHOLD 63 | if (shouldBeDismissed) { 64 | translateX.value = withTiming(-1) 65 | runOnJS(invokeSwipeLeft)() 66 | } else { 67 | translateX.value = withTiming(0) 68 | } 69 | } 70 | }) 71 | 72 | const facadeStyle = useAnimatedStyle(() => ({ 73 | transform: [ 74 | { 75 | translateX: interpolate(translateX.value, [-1, 0], [-SCREEN_WIDTH, 0]) 76 | } 77 | ] 78 | })) 79 | 80 | const progress = useDerivedValue(() => { 81 | return interpolate( 82 | Math.max(translateX.value, SWIPE_THREASHOLD), 83 | [-0.2, 0], 84 | [1, 0] 85 | ) 86 | }) 87 | 88 | useImperativeHandle(ref, () => ({ 89 | conceal: () => { 90 | translateX.value = withTiming(0) 91 | } 92 | })) 93 | 94 | return ( 95 | 96 | {backView && ( 97 | 98 | {typeof backView === 'function' ? backView({ progress }) : backView} 99 | 100 | )} 101 | 106 | {children} 107 | 108 | 109 | ) 110 | }) 111 | 112 | export default SwipeableView 113 | -------------------------------------------------------------------------------- /src/components/theme-list-item.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Text, TouchableOpacity } from '@/atoms' 2 | import activeThemeId from '@/states/theme' 3 | import { ThemeMeta, ThemeNames } from '@/themes' 4 | import { useAtom } from 'jotai' 5 | import { selectAtom } from 'jotai/utils' 6 | import React, { useCallback, useMemo } from 'react' 7 | import FeatherIcon from './icon' 8 | 9 | interface Props { 10 | theme: ThemeMeta 11 | onPress: (themeId: ThemeNames) => void 12 | } 13 | 14 | const ThemeListItem: React.FC = ({ theme, onPress }) => { 15 | const [isActive] = useAtom( 16 | useMemo(() => selectAtom(activeThemeId, v => v === theme.id), [theme]) 17 | ) 18 | const handlePress = useCallback(() => { 19 | onPress(theme.id) 20 | }, [onPress, theme]) 21 | 22 | return ( 23 | 30 | 31 | {isActive ? ( 32 | 33 | ) : null} 34 | 35 | {theme.name} 36 | 37 | ) 38 | } 39 | 40 | export default ThemeListItem 41 | -------------------------------------------------------------------------------- /src/components/three-column-layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { memo, useCallback, useEffect, useRef } from 'react' 3 | import { Animated, View, StyleSheet } from 'react-native' 4 | export type ThreeColumnLayoutProps = { 5 | type: 'three-column' 6 | leftViewVisible: boolean 7 | middleViewVisible: boolean 8 | } 9 | type RenderView = (callbacks: ThreeColumnLayoutProps) => React.ReactNode 10 | type Props = { 11 | renderLeftView: RenderView 12 | renderMiddleView: RenderView 13 | renderRightView: RenderView 14 | leftViewVisible?: boolean 15 | middleViewVisible?: boolean 16 | leftViewWidth?: number 17 | middleViewWidth?: number 18 | } 19 | 20 | const ThreeColumnLayout: React.FC = props => { 21 | const { 22 | renderLeftView, 23 | renderMiddleView, 24 | renderRightView, 25 | leftViewVisible = true, 26 | middleViewVisible = true, 27 | leftViewWidth = 240, 28 | middleViewWidth = 320 29 | } = props 30 | const viewProps: ThreeColumnLayoutProps = { 31 | type: 'three-column', 32 | leftViewVisible, 33 | middleViewVisible 34 | } 35 | const leftValue = useRef( 36 | new Animated.Value(leftViewVisible ? leftViewWidth : 0) 37 | ).current 38 | const middleValue = useRef( 39 | new Animated.Value(middleViewVisible ? middleViewWidth : 0) 40 | ).current 41 | const animatedLeftViewStyle = { 42 | flexBasis: leftValue 43 | } 44 | const animatedMiddleViewStyle = { 45 | flexBasis: middleValue 46 | } 47 | const toggleLeftView = useCallback( 48 | (visible: boolean) => { 49 | if (visible) { 50 | Animated.spring(leftValue, { 51 | useNativeDriver: false, 52 | toValue: leftViewWidth, 53 | bounciness: 0 54 | }).start() 55 | } else { 56 | Animated.spring(leftValue, { 57 | useNativeDriver: false, 58 | toValue: 0, 59 | bounciness: 0 60 | }).start() 61 | } 62 | }, 63 | [leftValue, leftViewWidth] 64 | ) 65 | const toggleMiddleView = useCallback( 66 | (visible: boolean) => { 67 | if (visible) { 68 | Animated.spring(middleValue, { 69 | useNativeDriver: false, 70 | toValue: middleViewWidth, 71 | bounciness: 0 72 | }).start() 73 | } else { 74 | Animated.spring(middleValue, { 75 | useNativeDriver: false, 76 | toValue: 0, 77 | bounciness: 0 78 | }).start() 79 | } 80 | }, 81 | [middleValue, middleViewWidth] 82 | ) 83 | useEffect(() => { 84 | toggleLeftView(leftViewVisible) 85 | }, [leftViewVisible, toggleLeftView]) 86 | useEffect(() => { 87 | toggleMiddleView(middleViewVisible) 88 | }, [middleViewVisible, toggleMiddleView]) 89 | 90 | return ( 91 | 92 | 93 | 99 | {renderLeftView(viewProps)} 100 | 101 | 102 | 105 | 111 | {renderMiddleView(viewProps)} 112 | 113 | 114 | 115 | {renderRightView(viewProps)} 116 | 117 | 118 | ) 119 | } 120 | 121 | export default memo(ThreeColumnLayout) 122 | const styles = StyleSheet.create({ 123 | container: { 124 | flex: 1, 125 | flexDirection: 'row' 126 | }, 127 | leftViewContainer: { 128 | flexShrink: 0, 129 | flexGrow: 0 130 | }, 131 | middleViewContainer: { 132 | flexShrink: 0, 133 | flexGrow: 0 134 | }, 135 | rightViewContainer: { 136 | flex: 1 137 | } 138 | }) 139 | -------------------------------------------------------------------------------- /src/consts.ts: -------------------------------------------------------------------------------- 1 | export const RESPONSIVE_SCREEN_BREAKPOINT = 1024 2 | -------------------------------------------------------------------------------- /src/fixtures/books.ts: -------------------------------------------------------------------------------- 1 | import { Book } from '@/models' 2 | import { LoremIpsum } from 'lorem-ipsum' 3 | import shortid from 'shortid' 4 | 5 | const DATA: Array = [] 6 | 7 | const lorem = new LoremIpsum({ 8 | wordsPerSentence: { 9 | max: 16, 10 | min: 4 11 | } 12 | }) 13 | 14 | const capitalizeFirstLetter = ([first, ...rest]: string) => 15 | first.toLocaleUpperCase() + rest.join('') 16 | 17 | for (let i = 0; i < 100; ++i) { 18 | DATA.push({ 19 | id: shortid.generate(), 20 | name: capitalizeFirstLetter( 21 | lorem.generateSentences(Math.round(Math.random() * 4)) 22 | ) 23 | }) 24 | } 25 | 26 | export default DATA 27 | -------------------------------------------------------------------------------- /src/fixtures/notes.ts: -------------------------------------------------------------------------------- 1 | import { Note } from '@/models' 2 | import { LoremIpsum } from 'lorem-ipsum' 3 | import shortid from 'shortid' 4 | 5 | const DATA: Array = [] 6 | 7 | const lorem = new LoremIpsum({ 8 | sentencesPerParagraph: { 9 | max: 8, 10 | min: 4 11 | }, 12 | wordsPerSentence: { 13 | max: 16, 14 | min: 4 15 | } 16 | }) 17 | 18 | const capitalizeFirstLetter = ([first, ...rest]: string) => 19 | first.toLocaleUpperCase() + rest.join('') 20 | 21 | for (let i = 0; i < 100; ++i) { 22 | DATA.push({ 23 | id: shortid.generate(), 24 | title: capitalizeFirstLetter( 25 | lorem.generateWords(Math.round(Math.random() * 10) + 2) 26 | ), 27 | body: capitalizeFirstLetter( 28 | lorem.generateSentences(Math.round(Math.random() * 50) + 1) 29 | ) 30 | }) 31 | } 32 | 33 | export default DATA 34 | -------------------------------------------------------------------------------- /src/hooks/use-drawer-enabled.ts: -------------------------------------------------------------------------------- 1 | import { searchInputHasFocusAtom } from '@/states/search-bar' 2 | import { useAtom } from 'jotai' 3 | import useResponsiveLayout from './use-responsive-layout' 4 | 5 | const useDrawerEnabled = () => { 6 | const [searchInputHasFocus] = useAtom(searchInputHasFocusAtom) 7 | const { isTablet, isPortrait } = useResponsiveLayout() 8 | if (isTablet) { 9 | return isPortrait 10 | } else { 11 | return !searchInputHasFocus 12 | } 13 | } 14 | 15 | export default useDrawerEnabled 16 | -------------------------------------------------------------------------------- /src/hooks/use-responsive-layout.ts: -------------------------------------------------------------------------------- 1 | import { useWindowDimensions } from 'react-native' 2 | import { RESPONSIVE_SCREEN_BREAKPOINT } from '@/consts' 3 | 4 | const useResponsiveLayout = () => { 5 | const screenSize = useWindowDimensions() 6 | const isTablet = 7 | screenSize.width >= RESPONSIVE_SCREEN_BREAKPOINT || 8 | screenSize.height >= RESPONSIVE_SCREEN_BREAKPOINT 9 | const isPortrait = screenSize.width < screenSize.height 10 | return { isTablet, isPortrait } 11 | } 12 | 13 | export default useResponsiveLayout 14 | -------------------------------------------------------------------------------- /src/hooks/use-sticky-header.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react' 2 | import { LayoutChangeEvent, NativeScrollEvent } from 'react-native' 3 | import { 4 | interpolate, 5 | useAnimatedScrollHandler, 6 | useAnimatedStyle, 7 | useSharedValue, 8 | withTiming 9 | } from 'react-native-reanimated' 10 | import { useSafeAreaInsets } from 'react-native-safe-area-context' 11 | 12 | const ANCHOR_INIT = -9999 13 | 14 | export default function useStickyHeader() { 15 | const safeAreaInsets = useSafeAreaInsets() 16 | const [headerBarHeight, setHeaderBarHeight] = useState(70) 17 | const anchorY = useSharedValue(ANCHOR_INIT) 18 | const translationY = useSharedValue(0) 19 | const progressY = useSharedValue(0) 20 | 21 | const minY = -headerBarHeight 22 | const maxY = safeAreaInsets.top 23 | 24 | const handleNoteListLayout = useCallback((event: LayoutChangeEvent) => { 25 | setHeaderBarHeight(event.nativeEvent.layout.height) 26 | }, []) 27 | 28 | const handleEndDrag = (event: NativeScrollEvent) => { 29 | 'worklet' 30 | if (progressY.value > 0.5 || event.contentOffset.y < headerBarHeight) { 31 | translationY.value = withTiming(maxY) 32 | } else { 33 | translationY.value = withTiming(minY) 34 | } 35 | } 36 | 37 | const handleScroll = useAnimatedScrollHandler( 38 | { 39 | onBeginDrag: event => { 40 | anchorY.value = event.contentOffset.y 41 | }, 42 | onScroll: event => { 43 | const offsetY = event.contentOffset.y 44 | let distY = offsetY - anchorY.value 45 | if (anchorY.value === ANCHOR_INIT) distY = offsetY 46 | 47 | let value = 48 | offsetY <= -safeAreaInsets.top 49 | ? maxY 50 | : Math.max(minY, Math.min(maxY, translationY.value - distY)) 51 | translationY.value = value 52 | anchorY.value = offsetY 53 | progressY.value = interpolate(translationY.value, [minY, maxY], [0, 1]) 54 | }, 55 | onEndDrag: handleEndDrag, 56 | onMomentumEnd: handleEndDrag 57 | }, 58 | [minY, maxY, headerBarHeight] 59 | ) 60 | const headerBarStyle = useAnimatedStyle(() => ({ 61 | transform: [ 62 | { 63 | translateY: translationY.value 64 | } 65 | ] 66 | })) 67 | 68 | return { 69 | handleNoteListLayout, 70 | handleScroll, 71 | headerBarStyle, 72 | headerBarHeight 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/images/inkdrop-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/models.ts: -------------------------------------------------------------------------------- 1 | export interface Note { 2 | id: string 3 | title: string 4 | body: string 5 | } 6 | 7 | export interface Book { 8 | id: string 9 | name: string 10 | } 11 | -------------------------------------------------------------------------------- /src/navs.tsx: -------------------------------------------------------------------------------- 1 | import { createDrawerNavigator } from '@react-navigation/drawer' 2 | import { NavigatorScreenParams } from '@react-navigation/native' 3 | import { createNativeStackNavigator } from '@react-navigation/native-stack' 4 | import * as React from 'react' 5 | import Sidebar from './components/sidebar' 6 | import useDrawerEnabled from './hooks/use-drawer-enabled' 7 | import useResponsiveLayout from './hooks/use-responsive-layout' 8 | import DetailScreenForPhone from './screens/detail-phone' 9 | import MainScreen from './screens/main' 10 | 11 | export type HomeDrawerParamList = { 12 | Main: {} 13 | } 14 | 15 | export type RootStackParamList = { 16 | Home: NavigatorScreenParams 17 | Detail: undefined 18 | } 19 | 20 | const Stack = createNativeStackNavigator() 21 | const Drawer = createDrawerNavigator() 22 | 23 | function Home() { 24 | const { isTablet } = useResponsiveLayout() 25 | const swipeEnabled = useDrawerEnabled() 26 | 27 | return ( 28 | 40 | 47 | 48 | ) 49 | } 50 | 51 | export default function Navigations() { 52 | return ( 53 | 54 | 61 | 68 | 69 | ) 70 | } 71 | -------------------------------------------------------------------------------- /src/screens/detail-phone.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react' 2 | import DetailScreen from './detail' 3 | import FeatherIcon from '@/components/icon' 4 | import { TouchableOpacity } from '@/atoms' 5 | import { useNavigation } from '@react-navigation/native' 6 | import { NativeStackNavigationProp } from '@react-navigation/native-stack' 7 | import { RootStackParamList } from '@/navs' 8 | 9 | type Props = {} 10 | 11 | const DetailScreenForPhone: React.FC = _props => { 12 | const navigation = 13 | useNavigation>() 14 | const handleBackPress = useCallback(() => { 15 | navigation.goBack() 16 | }, []) 17 | 18 | return ( 19 | ( 21 | 22 | 23 | 24 | )} 25 | /> 26 | ) 27 | } 28 | 29 | export default DetailScreenForPhone 30 | -------------------------------------------------------------------------------- /src/screens/detail-tablet.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ThreeColumnLayoutProps } from 'react-native-three-column-layout' 3 | import DetailScreen from './detail' 4 | import { TouchableOpacity } from '@/atoms' 5 | import FeatherIcon from '@/components/icon' 6 | 7 | type Props = ThreeColumnLayoutProps & { onDistractionFreeModeToggle: () => any } 8 | 9 | const DetailScreenForTablet: React.FC = props => { 10 | const { onDistractionFreeModeToggle, middleViewVisible } = props 11 | 12 | return ( 13 | ( 15 | 21 | 25 | 26 | )} 27 | /> 28 | ) 29 | } 30 | 31 | export default DetailScreenForTablet 32 | -------------------------------------------------------------------------------- /src/screens/detail.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react' 2 | import { Box, Container, ScrollView, Text } from '@/atoms' 3 | import Navbar from '@/components/navbar' 4 | import { useAtom } from 'jotai' 5 | import { editingNoteIdAtom } from '@/states/editor' 6 | import NOTES from '@/fixtures/notes' 7 | 8 | type Props = { 9 | renderNavBarLeft: () => ReactNode 10 | } 11 | 12 | export default function DetailScreen(props: Props) { 13 | const { renderNavBarLeft } = props 14 | const [editingNoteId] = useAtom(editingNoteIdAtom) 15 | const note = NOTES.find(n => n.id === editingNoteId) 16 | 17 | return ( 18 | 19 | 20 | {renderNavBarLeft()} 21 | 22 | 23 | Editor 24 | 25 | 26 | 27 | 28 | 29 | 30 | {note?.title} 31 | 32 | 33 | {note?.body} 34 | 35 | 36 | 37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /src/screens/main-phone.tsx: -------------------------------------------------------------------------------- 1 | import { HomeDrawerParamList, RootStackParamList } from '@/navs' 2 | import { DrawerScreenProps } from '@react-navigation/drawer' 3 | import { CompositeScreenProps } from '@react-navigation/native' 4 | import { NativeStackScreenProps } from '@react-navigation/native-stack' 5 | import React from 'react' 6 | import NoteListScreenForPhone from './note-list-phone' 7 | 8 | type Props = CompositeScreenProps< 9 | DrawerScreenProps, 10 | NativeStackScreenProps 11 | > 12 | 13 | export default function MainScreenForPhone({ navigation }: Props) { 14 | return 15 | } 16 | -------------------------------------------------------------------------------- /src/screens/main-tablet.tsx: -------------------------------------------------------------------------------- 1 | import Sidebar from '@/components/sidebar' 2 | import ThreeColumnLayout from 'react-native-three-column-layout' 3 | import useResponsiveLayout from '@/hooks/use-responsive-layout' 4 | import { HomeDrawerParamList, RootStackParamList } from '@/navs' 5 | import { DrawerScreenProps } from '@react-navigation/drawer' 6 | import { CompositeScreenProps } from '@react-navigation/native' 7 | import { NativeStackScreenProps } from '@react-navigation/native-stack' 8 | import React, { useCallback, useState } from 'react' 9 | import DetailScreenForTablet from './detail-tablet' 10 | import NoteListScreenForTablet from './note-list-tablet' 11 | 12 | type Props = CompositeScreenProps< 13 | DrawerScreenProps, 14 | NativeStackScreenProps 15 | > 16 | 17 | export default function MainScreenForTablet({ navigation }: Props) { 18 | const { isPortrait } = useResponsiveLayout() 19 | const [sidebarVisible, setSidebarVisible] = useState(true) 20 | const [distractionFreeMode, setDistractionFreeMode] = useState(false) 21 | 22 | const toggleSidebar = useCallback(() => { 23 | setSidebarVisible(visible => !visible) 24 | }, []) 25 | const toggleDistractionFreeMode = useCallback(() => { 26 | setDistractionFreeMode(enabled => !enabled) 27 | }, []) 28 | 29 | const leftViewVisible = !isPortrait && sidebarVisible && !distractionFreeMode 30 | 31 | return ( 32 | } 34 | renderMiddleView={() => ( 35 | 39 | )} 40 | renderRightView={viewProps => ( 41 | 45 | )} 46 | leftViewVisible={leftViewVisible} 47 | middleViewVisible={!distractionFreeMode} 48 | /> 49 | ) 50 | } 51 | -------------------------------------------------------------------------------- /src/screens/main.tsx: -------------------------------------------------------------------------------- 1 | import { Container } from '@/atoms' 2 | import ResponsiveLayout from '@/components/responsive-layout' 3 | import { HomeDrawerParamList, RootStackParamList } from '@/navs' 4 | import { DrawerScreenProps } from '@react-navigation/drawer' 5 | import { CompositeScreenProps } from '@react-navigation/native' 6 | import { NativeStackScreenProps } from '@react-navigation/native-stack' 7 | import React from 'react' 8 | import MainScreenForPhone from './main-phone' 9 | import MainScreenForTablet from './main-tablet' 10 | 11 | type Props = CompositeScreenProps< 12 | DrawerScreenProps, 13 | NativeStackScreenProps 14 | > 15 | 16 | export default function MainScreen(props: Props) { 17 | return ( 18 | 19 | } 21 | renderOnTablet={() => } 22 | /> 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /src/screens/note-list-phone.tsx: -------------------------------------------------------------------------------- 1 | import { HomeDrawerParamList, RootStackParamList } from '@/navs' 2 | import { editingNoteIdAtom } from '@/states/editor' 3 | import { DrawerNavigationProp } from '@react-navigation/drawer' 4 | import { CompositeNavigationProp } from '@react-navigation/native' 5 | import { NativeStackNavigationProp } from '@react-navigation/native-stack' 6 | import { useSetAtom } from 'jotai' 7 | import React, { useCallback } from 'react' 8 | import NoteListScreen from './note-list' 9 | 10 | interface Props { 11 | navigation: CompositeNavigationProp< 12 | DrawerNavigationProp, 13 | NativeStackNavigationProp 14 | > 15 | } 16 | 17 | const NoteListScreenForPhone: React.FC = ({ navigation }) => { 18 | const setEditingNoteId = useSetAtom(editingNoteIdAtom) 19 | 20 | const handleSidebarToggle = useCallback(() => { 21 | navigation.toggleDrawer() 22 | }, []) 23 | 24 | const handleNoteListItemPress = useCallback((noteId: string) => { 25 | setEditingNoteId(noteId) 26 | navigation.navigate('Detail') 27 | }, []) 28 | 29 | return ( 30 | 34 | ) 35 | } 36 | 37 | export default NoteListScreenForPhone 38 | -------------------------------------------------------------------------------- /src/screens/note-list-tablet.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useCallback } from 'react' 2 | import NoteListScreen from './note-list' 3 | import useResponsiveLayout from '@/hooks/use-responsive-layout' 4 | import { HomeDrawerParamList, RootStackParamList } from '@/navs' 5 | import { editingNoteIdAtom } from '@/states/editor' 6 | import { DrawerNavigationProp } from '@react-navigation/drawer' 7 | import { CompositeNavigationProp } from '@react-navigation/native' 8 | import { NativeStackNavigationProp } from '@react-navigation/native-stack' 9 | import { useSetAtom } from 'jotai' 10 | 11 | type Props = { 12 | navigation: CompositeNavigationProp< 13 | DrawerNavigationProp, 14 | NativeStackNavigationProp 15 | > 16 | onSidebarToggle: () => any 17 | } 18 | 19 | const NoteListScreenForTablet: React.FC = memo(props => { 20 | const { navigation, onSidebarToggle } = props 21 | const setEditingNoteId = useSetAtom(editingNoteIdAtom) 22 | const { isPortrait } = useResponsiveLayout() 23 | const handleSidebarToggle = useCallback(() => { 24 | if (isPortrait) { 25 | navigation.toggleDrawer() 26 | } else { 27 | onSidebarToggle() 28 | } 29 | }, [isPortrait, navigation]) 30 | 31 | const handleNoteListItemPress = useCallback((noteId: string) => { 32 | setEditingNoteId(noteId) 33 | }, []) 34 | 35 | return ( 36 | 40 | ) 41 | }) 42 | 43 | export default NoteListScreenForTablet 44 | -------------------------------------------------------------------------------- /src/screens/note-list.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useRef, useState } from 'react' 2 | import { Container } from '@/atoms' 3 | import NoteList, { Props as NoteListProps } from '@/components/note-list' 4 | import useStickyHeader from '@/hooks/use-sticky-header' 5 | import HeaderBar from '@/components/header-bar' 6 | import NoteListHeaderTitleBar from '@/components/note-list-header-title-bar' 7 | import MoveNoteSheet from '@/components/move-note-sheet' 8 | 9 | type Props = { 10 | onSidebarToggle: () => any 11 | onNoteSelect: NoteListProps['onItemPress'] 12 | } 13 | 14 | const NoteListScreen: React.FC = props => { 15 | const { onSidebarToggle, onNoteSelect } = props 16 | const refMoveNoteSheet = useRef(null) 17 | const { 18 | handleNoteListLayout, 19 | handleScroll, 20 | headerBarStyle, 21 | headerBarHeight 22 | } = useStickyHeader() 23 | const [concealNoteListItem, setConcealNoteListItem] = useState< 24 | (() => void) | null 25 | >(null) 26 | 27 | const handleNoteListItemSwipeLeft = useCallback( 28 | (_noteId: string, conceal: () => void) => { 29 | const { current: menu } = refMoveNoteSheet 30 | if (menu) { 31 | menu.show() 32 | setConcealNoteListItem(() => conceal) 33 | } 34 | }, 35 | [] 36 | ) 37 | const handleMoveNoteSheetClose = useCallback(() => { 38 | concealNoteListItem && concealNoteListItem() 39 | setConcealNoteListItem(null) 40 | }, [concealNoteListItem]) 41 | 42 | return ( 43 | 44 | 51 | 56 | 60 | 61 | ) 62 | } 63 | 64 | export default NoteListScreen 65 | -------------------------------------------------------------------------------- /src/states/editor.ts: -------------------------------------------------------------------------------- 1 | import { atom } from 'jotai' 2 | 3 | export const editingNoteIdAtom = atom(undefined) 4 | -------------------------------------------------------------------------------- /src/states/search-bar.ts: -------------------------------------------------------------------------------- 1 | import { atom } from 'jotai' 2 | 3 | export const searchQueryAtom = atom('') 4 | export const searchInputHasFocusAtom = atom(false) 5 | -------------------------------------------------------------------------------- /src/states/theme.ts: -------------------------------------------------------------------------------- 1 | import { Theme, ThemeNames, themes } from '@/themes' 2 | import { atom } from 'jotai' 3 | 4 | const activeThemeId = atom('dark') 5 | 6 | export const activeThemeAtom = atom(get => { 7 | const themeId = get(activeThemeId) 8 | const themeIndex = themes.findIndex(t => t.id === themeId) 9 | if (themeIndex >= 0) { 10 | return themes[themeIndex].theme 11 | } else { 12 | return themes[0].theme 13 | } 14 | }) 15 | 16 | export default activeThemeId 17 | -------------------------------------------------------------------------------- /src/themes/dark.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@shopify/restyle' 2 | import { StatusBarStyle } from 'react-native' 3 | import light, { Theme } from './light' 4 | 5 | // Palette 6 | const p = { 7 | slate00: '#1b1c1d', 8 | slate10: '#202225', 9 | slate20: '#292c2f', 10 | slate30: '#2e3235', 11 | slate40: '#35393d', 12 | slate100: '#767577', 13 | slate900: '#dddddd', 14 | blue70: '#2185d0' 15 | } 16 | 17 | export const theme: Theme = createTheme({ 18 | ...light, 19 | colors: { 20 | ...light.colors, 21 | $primary: p.blue70, 22 | $secondary: p.slate00, 23 | $windowBackground: p.slate10, 24 | $background: p.slate10, 25 | $foreground: p.slate900, 26 | $separator: p.slate100, 27 | $navbarBackground: p.slate20, 28 | $navbarBorderBottom: p.slate00, 29 | $headerBarBackground: p.slate40, 30 | $sidebarBackground: p.slate30, 31 | $sidebarForeground: p.slate900, 32 | $sidebarSeparator: p.slate900 + '20', 33 | $fieldInputBackground: p.slate00, 34 | $fieldInputPlaceholderTextColor: p.slate100 35 | }, 36 | statusBar: { 37 | barStyle: 'light-content' as StatusBarStyle 38 | }, 39 | textVariants: { 40 | ...light.textVariants 41 | }, 42 | barVariants: { 43 | headerBar: { 44 | bg: '$headerBarBackground', 45 | borderRadius: 'hg', 46 | shadowColor: 'black', 47 | shadowOffset: { width: 0, height: 2 }, 48 | shadowOpacity: 0.4, 49 | shadowRadius: 8 50 | } 51 | } 52 | }) 53 | 54 | export default theme 55 | -------------------------------------------------------------------------------- /src/themes/index.ts: -------------------------------------------------------------------------------- 1 | import light, { Theme } from './light' 2 | import dark from './dark' 3 | import nord from './nord' 4 | import solarizedDark from './solarized-dark' 5 | 6 | export type ThemeNames = 'light' | 'dark' | 'nord' | 'solarized-dark' 7 | export interface ThemeMeta { 8 | id: ThemeNames 9 | name: string 10 | theme: Theme 11 | } 12 | 13 | export const themes: readonly ThemeMeta[] = [ 14 | { 15 | id: 'light', 16 | name: 'Default Light', 17 | theme: light 18 | }, 19 | { 20 | id: 'dark', 21 | name: 'Default Dark', 22 | theme: dark 23 | }, 24 | { 25 | id: 'nord', 26 | name: 'Nord', 27 | theme: nord 28 | }, 29 | { 30 | id: 'solarized-dark', 31 | name: 'Solarized Dark', 32 | theme: solarizedDark 33 | } 34 | ] 35 | 36 | export type { Theme } 37 | -------------------------------------------------------------------------------- /src/themes/light.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@shopify/restyle' 2 | import { StatusBarStyle } from 'react-native' 3 | 4 | // Palette 5 | const p = { 6 | white: 'white', 7 | black: 'black', 8 | red: 'red', 9 | blue: 'blue', 10 | yellow: 'yellow', 11 | paper00: '#ffffff', 12 | paper10: '#f5f5f4', 13 | paper20: '#e6e6e6', 14 | paper100: '#aeaeae', 15 | paper300: '#767577', 16 | paper900: '#202020', 17 | blue70: '#2185d0', 18 | navy20: '#171a21', 19 | navy900: '#b9babc' 20 | } 21 | 22 | const theme = createTheme({ 23 | spacing: { 24 | '0': 0, 25 | xs: 4, 26 | sm: 8, 27 | md: 12, 28 | lg: 16, 29 | xl: 24, 30 | xxl: 48, 31 | hg: 128 32 | }, 33 | breakpoints: { 34 | phone: 0, 35 | tablet: 768 36 | }, 37 | colors: { 38 | white: p.white, 39 | black: p.black, 40 | red: p.red, 41 | blue: p.blue, 42 | yellow: p.yellow, 43 | 44 | $primary: p.blue70, 45 | $windowBackground: '#f0f0f0', 46 | $background: p.paper10, 47 | $foreground: p.paper900, 48 | $navbarBackground: p.paper10, 49 | $navbarBorderBottom: p.paper100, 50 | $sidebarBackground: p.navy20, 51 | $sidebarForeground: p.navy900, 52 | $sidebarSeparator: p.paper00 + '20', 53 | $headerBarBackground: p.paper20, 54 | $fieldInputBackground: p.paper00, 55 | $fieldInputPlaceholderTextColor: p.paper300 56 | }, 57 | borderRadii: { 58 | xs: 4, 59 | sm: 16, 60 | md: 24, 61 | lg: 64, 62 | hg: 128 63 | }, 64 | statusBar: { 65 | barStyle: 'dark-content' as StatusBarStyle 66 | }, 67 | textVariants: { 68 | defaults: { 69 | color: '$foreground', 70 | fontSize: 16 71 | }, 72 | sidebar: { 73 | color: '$sidebarForeground' 74 | }, 75 | navbar: { 76 | fontSize: 20 77 | } 78 | }, 79 | barVariants: { 80 | headerBar: { 81 | bg: '$headerBarBackground', 82 | borderRadius: 'hg' 83 | } 84 | } 85 | }) 86 | export default theme 87 | 88 | export type Theme = typeof theme 89 | -------------------------------------------------------------------------------- /src/themes/nord.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@shopify/restyle' 2 | import { StatusBarStyle } from 'react-native' 3 | import light, { Theme } from './light' 4 | 5 | // Palette 6 | const p = { 7 | // Polar Night 8 | nord0: '#2E3440', 9 | nord1: '#3B4252', 10 | nord2: '#434C5E', 11 | nord3: '#4C566A', 12 | 13 | // Snow Storm 14 | nord4: '#D8DEE9', 15 | nord5: '#E5E9F0', 16 | nord6: '#ECEFF4', 17 | 18 | // Frost 19 | nord7: '#8FBCBB', 20 | nord8: '#88C0D0', 21 | nord9: '#81A1C1', 22 | nord10: '#5E81AC', 23 | 24 | // Aurora 25 | nord11: '#BF616A', 26 | nord12: '#D08770', 27 | nord13: '#EBCB8B', 28 | nord14: '#A3BE8C', 29 | nord15: '#B48EAD' 30 | } 31 | 32 | export const theme: Theme = createTheme({ 33 | ...light, 34 | colors: { 35 | ...light.colors, 36 | $primary: p.nord10, 37 | $secondary: p.nord9, 38 | $windowBackground: p.nord0, 39 | $background: p.nord0, 40 | $foreground: p.nord4, 41 | $separator: p.nord3, 42 | $navbarBackground: p.nord1, 43 | $navbarBorderBottom: p.nord0, 44 | $headerBarBackground: p.nord2, 45 | $sidebarBackground: p.nord0, 46 | $sidebarForeground: p.nord4, 47 | $sidebarSeparator: p.nord4 + '20' 48 | }, 49 | statusBar: { 50 | barStyle: 'light-content' as StatusBarStyle 51 | }, 52 | textVariants: { 53 | ...light.textVariants 54 | }, 55 | barVariants: { 56 | headerBar: { 57 | bg: '$headerBarBackground', 58 | borderRadius: 'hg' 59 | } 60 | } 61 | }) 62 | 63 | export default theme 64 | -------------------------------------------------------------------------------- /src/themes/solarized-dark.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@shopify/restyle' 2 | import { StatusBarStyle } from 'react-native' 3 | import light, { Theme } from './light' 4 | 5 | // Palette 6 | const p = { 7 | base000: '#00141A', 8 | base00: '#002b36', 9 | base01: '#073642', 10 | base02: '#586e75', 11 | base03: '#657b83', 12 | base04: '#839496', 13 | base05: '#93a1a1', 14 | base06: '#eee8d5', 15 | base07: '#fdf6e3', 16 | red: '#dc322f', 17 | orange: '#cb4b16', 18 | yellow: '#b58900', 19 | green: '#859900', 20 | cyan: '#2aa198', 21 | blue: '#268bd2', 22 | violet: '#6c71c4', 23 | magenta: '#d33682' 24 | } 25 | 26 | export const theme: Theme = createTheme({ 27 | ...light, 28 | colors: { 29 | ...light.colors, 30 | $primary: p.blue, 31 | $secondary: p.orange, 32 | $windowBackground: p.base00, 33 | $background: p.base00, 34 | $foreground: p.base06, 35 | $separator: p.base04, 36 | $navbarBackground: p.base01, 37 | $navbarBorderBottom: p.base00, 38 | $headerBarBackground: p.base01, 39 | $sidebarBackground: p.base000, 40 | $sidebarForeground: p.base06, 41 | $sidebarSeparator: p.base07 + '20' 42 | }, 43 | statusBar: { 44 | barStyle: 'light-content' as StatusBarStyle 45 | }, 46 | textVariants: { 47 | ...light.textVariants 48 | }, 49 | barVariants: { 50 | headerBar: { 51 | bg: '$headerBarBackground', 52 | borderRadius: 'hg', 53 | shadowColor: 'black', 54 | shadowOffset: { width: 0, height: 2 }, 55 | shadowOpacity: 0.4, 56 | shadowRadius: 8 57 | } 58 | } 59 | }) 60 | 61 | export default theme 62 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | // prettier-ignore 2 | { 3 | "compilerOptions": { 4 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 5 | 6 | /* Projects */ 7 | // "incremental": true, /* Enable incremental compilation */ 8 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 9 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 10 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 11 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 12 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 13 | 14 | /* Language and Environment */ 15 | "target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 16 | "lib": ["es2017"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 17 | "jsx": "react-native", /* Specify what JSX code is generated. */ 18 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 19 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 20 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 21 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 22 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 23 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 24 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 25 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 26 | 27 | /* Modules */ 28 | "module": "commonjs", /* Specify what module code is generated. */ 29 | // "rootDir": "./", /* Specify the root folder within your source files. */ 30 | "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 31 | "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 32 | "paths": { 33 | "@/*": ["src/*"] 34 | }, /* Specify a set of entries that re-map imports to additional lookup locations. */ 35 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 36 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 37 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 38 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 39 | "resolveJsonModule": true, /* Enable importing .json files */ 40 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 41 | 42 | /* JavaScript Support */ 43 | "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 44 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 45 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 46 | 47 | /* Emit */ 48 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 49 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 50 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 51 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 52 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 53 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 54 | // "removeComments": true, /* Disable emitting comments. */ 55 | "noEmit": true, /* Disable emitting files from a compilation. */ 56 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 57 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 58 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 59 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 60 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 61 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 62 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 63 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 64 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 65 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 66 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 67 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 68 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 69 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 70 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 71 | 72 | /* Interop Constraints */ 73 | "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 74 | "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 75 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 76 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 77 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 78 | 79 | /* Type Checking */ 80 | "strict": true, /* Enable all strict type-checking options. */ 81 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 82 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 83 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 84 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 85 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 86 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 87 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 88 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 89 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 90 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 91 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 92 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 93 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 94 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 95 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 96 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 97 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 98 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 99 | 100 | /* Completeness */ 101 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 102 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 103 | }, 104 | "exclude": [ 105 | "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" 106 | ] 107 | } 108 | --------------------------------------------------------------------------------