Repository: craftzdog/inkdrop-ui-mockup-react-native Branch: main Commit: 25820422fef7 Files: 119 Total size: 191.5 KB Directory structure: gitextract_np9kkcpm/ ├── .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 │ │ └── values/ │ │ ├── strings.xml │ │ └── styles.xml │ ├── build.gradle │ ├── gradle/ │ │ └── wrapper/ │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties │ ├── gradle.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── declarations.d.ts ├── index.js ├── ios/ │ ├── Podfile │ ├── RNMail/ │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets/ │ │ │ ├── AppIcon.appiconset/ │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ ├── RNMail.xcodeproj/ │ │ ├── project.pbxproj │ │ └── xcshareddata/ │ │ └── xcschemes/ │ │ └── RNMail.xcscheme │ ├── RNMail.xcworkspace/ │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata/ │ │ └── IDEWorkspaceChecks.plist │ └── 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 │ ├── 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 ================================================ FILE CONTENTS ================================================ ================================================ FILE: .buckconfig ================================================ [android] target = Google Inc.:Google APIs:23 [maven_repositories] central = https://repo1.maven.org/maven2 ================================================ FILE: .eslintrc.js ================================================ module.exports = { root: true, parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint/eslint-plugin"], extends: ["prettier"], rules: { "@typescript-eslint/no-unused-vars": [ "error", { argsIgnorePattern: "^_", }, ], "no-unused-vars": "off", "no-shadow": "off", "@typescript-eslint/no-shadow": 1, "no-undef": "off", }, } ================================================ FILE: .gitignore ================================================ # OSX # .DS_Store # Xcode # build/ *.pbxuser !default.pbxuser *.mode1v3 !default.mode1v3 *.mode2v3 !default.mode2v3 *.perspectivev3 !default.perspectivev3 xcuserdata *.xccheckout *.moved-aside DerivedData *.hmap *.ipa *.xcuserstate ios/.xcode.env.local # Android/IntelliJ # build/ .idea .gradle local.properties *.iml *.hprof .cxx/ # node.js # node_modules/ npm-debug.log yarn-error.log # BUCK buck-out/ \.buckd/ *.keystore !debug.keystore # fastlane # # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the # screenshots whenever they are needed. # For more information about the recommended setup visit: # https://docs.fastlane.tools/best-practices/source-control/ **/fastlane/report.xml **/fastlane/Preview.html **/fastlane/screenshots **/fastlane/test_output # Bundle artifact *.jsbundle # Ruby / CocoaPods /ios/Pods/ /vendor/bundle/ ================================================ FILE: .ruby-version ================================================ 2.7.5 ================================================ FILE: .watchmanconfig ================================================ {} ================================================ FILE: Gemfile ================================================ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version ruby '2.7.5' gem 'cocoapods', '~> 1.11', '>= 1.11.2' ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright 2022 Takuya Matsuyama Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: README.md ================================================ # Gmail-like UI with React Native A UI mockup for the new version of [Inkdrop](https://www.inkdrop.app/) for mobile, inspired by Gmail for iOS and Android. ## Features - Sticky header bar - Swipe-able list item - Bottom action sheet - Multiple theme support - Tablet screen support Note: Web is not supported ![thumbnail](./doc/thumb1.jpg) ![thumbnail](./doc/thumb2.jpg) ![thumbnail](./doc/thumb3.jpg) ## Video Tutorial - Part 1: [How to build Gmail-like UI with React Native](https://www.youtube.com/watch?v=w-M9UFHLAl0) - Part 2: [How to implement responsive three-column layout with React Native](https://www.youtube.com/watch?v=JU4VBbe23jg) ## Stack - [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for types - [React Native](https://reactnative.dev/) - ReactJS-based framework that can use native platform capabilities - [React Navigation(v6)](https://reactnavigation.org/) - Routing and navigation - [Restyle](https://github.com/Shopify/restyle) - A type-enforced system for building UI components - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) - Animations - [React Native SVG](https://github.com/react-native-svg/react-native-svg) - Displaying SVG images - [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - Free Icons - [React Native Bottom Sheet](https://github.com/gorhom/react-native-bottom-sheet) - A performant interactive bottom sheet with fully configurable options - [jotai](https://jotai.org/) - Primitive and flexible state management for React - [React Native Three-Column Layout](https://github.com/craftzdog/react-native-three-column-layout) - A React component providing a three-column layout with animation support for tablet displays ## Project structure ``` $PROJECT_ROOT ├── index.js # Entry point └── src ├── navs.tsx # Navigation components ├── atoms # Atomic components ├── components # UI components ├── screens # Screen components ├── hooks # hooks ├── states # Jotai atoms ├── fixtures # sample data └── images # Image files ``` ## How to dev This project can be run from the Expo client app. ```sh yarn yarn start ``` and in another terminal: ```sh yarn run ios # or yarn run android ``` ## License Apache-2.0 --- Looking for a Markdown note-taking app? Check out my app called Inkdrop: [![Inkdrop](https://github.com/craftzdog/dotfiles-public/raw/master/images/inkdrop.png)](https://www.inkdrop.app/) ================================================ FILE: __tests__/App-test.tsx ================================================ /** * @format */ import 'react-native'; import React from 'react'; import App from '../App'; // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer'; it('renders correctly', () => { renderer.create(); }); ================================================ FILE: android/app/_BUCK ================================================ # To learn about Buck see [Docs](https://buckbuild.com/). # To run your application with Buck: # - install Buck # - `npm start` - to start the packager # - `cd android` # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck # - `buck install -r android/app` - compile, install and run application # load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") lib_deps = [] create_aar_targets(glob(["libs/*.aar"])) create_jar_targets(glob(["libs/*.jar"])) android_library( name = "all-libs", exported_deps = lib_deps, ) android_library( name = "app-code", srcs = glob([ "src/main/java/**/*.java", ]), deps = [ ":all-libs", ":build_config", ":res", ], ) android_build_config( name = "build_config", package = "com.rnmail", ) android_resource( name = "res", package = "com.rnmail", res = "src/main/res", ) android_binary( name = "app", keystore = "//android/keystores:debug", manifest = "src/main/AndroidManifest.xml", package_type = "debug", deps = [ ":app-code", ], ) ================================================ FILE: android/app/build.gradle ================================================ apply plugin: "com.android.application" import com.android.build.OutputFile import org.apache.tools.ant.taskdefs.condition.Os /** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets). * These basically call `react-native bundle` with the correct arguments during the Android build * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle * bundleAssetName: "index.android.bundle", * * // the entry file for bundle generation. If none specified and * // "index.android.js" exists, it will be used. Otherwise "index.js" is * // default. Can be overridden with ENTRY_FILE environment variable. * entryFile: "index.android.js", * * // https://reactnative.dev/docs/performance#enable-the-ram-format * bundleCommand: "ram-bundle", * * // whether to bundle JS and assets in debug mode * bundleInDebug: false, * * // whether to bundle JS and assets in release mode * bundleInRelease: true, * * // whether to bundle JS and assets in another build variant (if configured). * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants * // The configuration property can be in the following formats * // 'bundleIn${productFlavor}${buildType}' * // 'bundleIn${buildType}' * // bundleInFreeDebug: true, * // bundleInPaidRelease: true, * // bundleInBeta: true, * * // whether to disable dev mode in custom build variants (by default only disabled in release) * // for example: to disable dev mode in the staging build type (if configured) * devDisabledInStaging: true, * // The configuration property can be in the following formats * // 'devDisabledIn${productFlavor}${buildType}' * // 'devDisabledIn${buildType}' * * // the root of your project, i.e. where "package.json" lives * root: "../../", * * // where to put the JS bundle asset in debug mode * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", * * // where to put the JS bundle asset in release mode * jsBundleDirRelease: "$buildDir/intermediates/assets/release", * * // where to put drawable resources / React Native assets, e.g. the ones you use via * // require('./image.png')), in debug mode * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", * * // where to put drawable resources / React Native assets, e.g. the ones you use via * // require('./image.png')), in release mode * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", * * // by default the gradle tasks are skipped if none of the JS files or assets change; this means * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to * // date; if you have any other folders that you want to ignore for performance reasons (gradle * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ * // for example, you might want to remove it from here. * inputExcludes: ["android/**", "ios/**"], * * // override which node gets called and with what additional arguments * nodeExecutableAndArgs: ["node"], * * // supply additional arguments to the packager * extraPackagerArgs: [] * ] */ project.ext.react = [ enableHermes: false, // clean and rebuild if changing ] apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: * - An APK that only works on ARM devices * - An APK that only works on x86 devices * The advantage is the size of the APK is reduced by about 4MB. * Upload all the APKs to the Play Store and people will download * the correct one based on the CPU architecture of their device. */ def enableSeparateBuildPerCPUArchitecture = false /** * Run Proguard to shrink the Java bytecode in release builds. */ def enableProguardInReleaseBuilds = false /** * The preferred build flavor of JavaScriptCore. * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+' /** * Whether to enable the Hermes VM. * * This should be set on project.ext.react and that value will be read here. If it is not set * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode * and the benefits of using Hermes will therefore be sharply reduced. */ def enableHermes = project.ext.react.get("enableHermes", false); /** * Architectures to build native code for. */ def reactNativeArchitectures() { def value = project.getProperties().get("reactNativeArchitectures") return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] } android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion defaultConfig { applicationId "com.rnmail" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() if (isNewArchitectureEnabled()) { // We configure the NDK build only if you decide to opt-in for the New Architecture. externalNativeBuild { ndkBuild { arguments "APP_PLATFORM=android-21", "APP_STL=c++_shared", "NDK_TOOLCHAIN_VERSION=clang", "GENERATED_SRC_DIR=$buildDir/generated/source", "PROJECT_BUILD_DIR=$buildDir", "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid", "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build" cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1" cppFlags "-std=c++17" // Make sure this target name is the same you specify inside the // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable. targets "rnmail_appmodules" // Fix for windows limit on number of character in file paths and in command lines if (Os.isFamily(Os.FAMILY_WINDOWS)) { arguments "NDK_APP_SHORT_COMMANDS=true" } } } if (!enableSeparateBuildPerCPUArchitecture) { ndk { abiFilters (*reactNativeArchitectures()) } } } } if (isNewArchitectureEnabled()) { // We configure the NDK build only if you decide to opt-in for the New Architecture. externalNativeBuild { ndkBuild { path "$projectDir/src/main/jni/Android.mk" } } def reactAndroidProjectDir = project(':ReactAndroid').projectDir def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) { dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck") from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") into("$buildDir/react-ndk/exported") } def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) { dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck") from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") into("$buildDir/react-ndk/exported") } afterEvaluate { // If you wish to add a custom TurboModule or component locally, // you should uncomment this line. // preBuild.dependsOn("generateCodegenArtifactsFromSchema") preDebugBuild.dependsOn(packageReactNdkDebugLibs) preReleaseBuild.dependsOn(packageReactNdkReleaseLibs) // Due to a bug inside AGP, we have to explicitly set a dependency // between configureNdkBuild* tasks and the preBuild tasks. // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732 configureNdkBuildRelease.dependsOn(preReleaseBuild) configureNdkBuildDebug.dependsOn(preDebugBuild) reactNativeArchitectures().each { architecture -> tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure { dependsOn("preDebugBuild") } tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure { dependsOn("preReleaseBuild") } } } } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include (*reactNativeArchitectures()) } } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution! In production, you need to generate your own keystore file. // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } // applicationVariants are e.g. debug, release applicationVariants.all { variant -> variant.outputs.each { output -> // For each separate APK per architecture, set a unique version code as described here: // https://developer.android.com/studio/build/configure-apk-splits.html // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] def abi = output.getFilter(OutputFile.ABI) if (abi != null) { // null for the universal-debug, universal-release variants output.versionCodeOverride = defaultConfig.versionCode * 1000 + versionCodes.get(abi) } } } } dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' exclude group:'com.squareup.okhttp3', module:'okhttp' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor } } if (isNewArchitectureEnabled()) { // If new architecture is enabled, we let you build RN from source // Otherwise we fallback to a prebuilt .aar bundled in the NPM package. // This will be applied to all the imported transtitive dependency. configurations.all { resolutionStrategy.dependencySubstitution { substitute(module("com.facebook.react:react-native")) .using(project(":ReactAndroid")).because("On New Architecture we're building React Native from source") } } } // Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { from configurations.implementation into 'libs' } apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) def isNewArchitectureEnabled() { // To opt-in for the New Architecture, you can either: // - Set `newArchEnabled` to true inside the `gradle.properties` file // - Invoke gradle with `-newArchEnabled=true` // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true` return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" } project.ext.vectoricons = [ iconFontNames: ['Feather.ttf'] ] apply from: '../../node_modules/react-native-vector-icons/fonts.gradle' ================================================ FILE: android/app/build_defs.bzl ================================================ """Helper definitions to glob .aar and .jar targets""" def create_aar_targets(aarfiles): for aarfile in aarfiles: name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] lib_deps.append(":" + name) android_prebuilt_aar( name = name, aar = aarfile, ) def create_jar_targets(jarfiles): for jarfile in jarfiles: name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] lib_deps.append(":" + name) prebuilt_jar( name = name, binary_jar = jarfile, ) ================================================ FILE: android/app/proguard-rules.pro ================================================ # Add project specific ProGuard rules here. # By default, the flags in this file are appended to flags specified # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt # You can edit the include path and order by changing the proguardFiles # directive in build.gradle. # # For more details, see # http://developer.android.com/guide/developing/tools/proguard.html # Add any project specific keep options here: ================================================ FILE: android/app/src/debug/AndroidManifest.xml ================================================ ================================================ FILE: android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java ================================================ /** * Copyright (c) Meta Platforms, Inc. and affiliates. * *

This source code is licensed under the MIT license found in the LICENSE file in the root * directory of this source tree. */ package com.rnmail; import android.content.Context; import com.facebook.flipper.android.AndroidFlipperClient; import com.facebook.flipper.android.utils.FlipperUtils; import com.facebook.flipper.core.FlipperClient; import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; import com.facebook.flipper.plugins.inspector.DescriptorMapping; import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; import com.facebook.flipper.plugins.react.ReactFlipperPlugin; import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; import com.facebook.react.ReactInstanceEventListener; import com.facebook.react.ReactInstanceManager; import com.facebook.react.bridge.ReactContext; import com.facebook.react.modules.network.NetworkingModule; import okhttp3.OkHttpClient; public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { if (FlipperUtils.shouldEnableFlipper(context)) { final FlipperClient client = AndroidFlipperClient.getInstance(context); client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); client.addPlugin(new ReactFlipperPlugin()); client.addPlugin(new DatabasesFlipperPlugin(context)); client.addPlugin(new SharedPreferencesFlipperPlugin(context)); client.addPlugin(CrashReporterPlugin.getInstance()); NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } }); client.addPlugin(networkFlipperPlugin); client.start(); // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized // Hence we run if after all native modules have been initialized ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); if (reactContext == null) { reactInstanceManager.addReactInstanceEventListener( new ReactInstanceEventListener() { @Override public void onReactContextInitialized(ReactContext reactContext) { reactInstanceManager.removeReactInstanceEventListener(this); reactContext.runOnNativeModulesQueueThread( new Runnable() { @Override public void run() { client.addPlugin(new FrescoFlipperPlugin()); } }); } }); } else { client.addPlugin(new FrescoFlipperPlugin()); } } } } ================================================ FILE: android/app/src/main/AndroidManifest.xml ================================================ ================================================ FILE: android/app/src/main/java/com/rnmail/MainActivity.java ================================================ package com.rnmail; import android.os.Bundle; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); } /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "RNMail"; } /** * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and * * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer * (Paper). */ @Override protected ReactActivityDelegate createReactActivityDelegate() { return new MainActivityDelegate(this, getMainComponentName()); } public static class MainActivityDelegate extends ReactActivityDelegate { public MainActivityDelegate(ReactActivity activity, String mainComponentName) { super(activity, mainComponentName); } @Override protected ReactRootView createRootView() { ReactRootView reactRootView = new ReactRootView(getContext()); // If you opted-in for the New Architecture, we enable the Fabric Renderer. reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); return reactRootView; } @Override protected boolean isConcurrentRootEnabled() { // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; } } } ================================================ FILE: android/app/src/main/java/com/rnmail/MainApplication.java ================================================ package com.rnmail; import android.app.Application; import android.content.Context; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.config.ReactFeatureFlags; import com.facebook.soloader.SoLoader; import com.rnmail.newarchitecture.MainApplicationReactNativeHost; import java.lang.reflect.InvocationTargetException; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } }; private final ReactNativeHost mNewArchitectureNativeHost = new MainApplicationReactNativeHost(this); @Override public ReactNativeHost getReactNativeHost() { if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { return mNewArchitectureNativeHost; } else { return mReactNativeHost; } } @Override public void onCreate() { super.onCreate(); // If you opted-in for the New Architecture, we enable the TurboModule system ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } /** * Loads Flipper in React Native templates. Call this in the onCreate method with something like * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); * * @param context * @param reactInstanceManager */ private static void initializeFlipper( Context context, ReactInstanceManager reactInstanceManager) { if (BuildConfig.DEBUG) { try { /* We use reflection here to pick up the class that initializes Flipper, since Flipper library is not available in release mode */ Class aClass = Class.forName("com.rnmail.ReactNativeFlipper"); aClass .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) .invoke(null, context, reactInstanceManager); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } } } } ================================================ FILE: android/app/src/main/java/com/rnmail/newarchitecture/MainApplicationReactNativeHost.java ================================================ package com.rnmail.newarchitecture; import android.app.Application; import androidx.annotation.NonNull; import com.facebook.react.PackageList; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.ReactPackageTurboModuleManagerDelegate; import com.facebook.react.bridge.JSIModulePackage; import com.facebook.react.bridge.JSIModuleProvider; import com.facebook.react.bridge.JSIModuleSpec; import com.facebook.react.bridge.JSIModuleType; import com.facebook.react.bridge.JavaScriptContextHolder; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.UIManager; import com.facebook.react.fabric.ComponentFactory; import com.facebook.react.fabric.CoreComponentsRegistry; import com.facebook.react.fabric.FabricJSIModuleProvider; import com.facebook.react.fabric.ReactNativeConfig; import com.facebook.react.uimanager.ViewManagerRegistry; import com.rnmail.BuildConfig; import com.rnmail.newarchitecture.components.MainComponentsRegistry; import com.rnmail.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; import java.util.ArrayList; import java.util.List; /** * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both * TurboModule delegates and the Fabric Renderer. * *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the * `newArchEnabled` property). Is ignored otherwise. */ public class MainApplicationReactNativeHost extends ReactNativeHost { public MainApplicationReactNativeHost(Application application) { super(application); } @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: // packages.add(new TurboReactPackage() { ... }); // If you have custom Fabric Components, their ViewManagers should also be loaded here // inside a ReactPackage. return packages; } @Override protected String getJSMainModuleName() { return "index"; } @NonNull @Override protected ReactPackageTurboModuleManagerDelegate.Builder getReactPackageTurboModuleManagerDelegateBuilder() { // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary // for the new architecture and to use TurboModules correctly. return new MainApplicationTurboModuleManagerDelegate.Builder(); } @Override protected JSIModulePackage getJSIModulePackage() { return new JSIModulePackage() { @Override public List getJSIModules( final ReactApplicationContext reactApplicationContext, final JavaScriptContextHolder jsContext) { final List specs = new ArrayList<>(); // Here we provide a new JSIModuleSpec that will be responsible of providing the // custom Fabric Components. specs.add( new JSIModuleSpec() { @Override public JSIModuleType getJSIModuleType() { return JSIModuleType.UIManager; } @Override public JSIModuleProvider getJSIModuleProvider() { final ComponentFactory componentFactory = new ComponentFactory(); CoreComponentsRegistry.register(componentFactory); // Here we register a Components Registry. // The one that is generated with the template contains no components // and just provides you the one from React Native core. MainComponentsRegistry.register(componentFactory); final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); ViewManagerRegistry viewManagerRegistry = new ViewManagerRegistry( reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); return new FabricJSIModuleProvider( reactApplicationContext, componentFactory, ReactNativeConfig.DEFAULT_CONFIG, viewManagerRegistry); } }); return specs; } }; } } ================================================ FILE: android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java ================================================ package com.rnmail.newarchitecture.components; import com.facebook.jni.HybridData; import com.facebook.proguard.annotations.DoNotStrip; import com.facebook.react.fabric.ComponentFactory; import com.facebook.soloader.SoLoader; /** * Class responsible to load the custom Fabric Components. This class has native methods and needs a * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ * folder for you). * *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the * `newArchEnabled` property). Is ignored otherwise. */ @DoNotStrip public class MainComponentsRegistry { static { SoLoader.loadLibrary("fabricjni"); } @DoNotStrip private final HybridData mHybridData; @DoNotStrip private native HybridData initHybrid(ComponentFactory componentFactory); @DoNotStrip private MainComponentsRegistry(ComponentFactory componentFactory) { mHybridData = initHybrid(componentFactory); } @DoNotStrip public static MainComponentsRegistry register(ComponentFactory componentFactory) { return new MainComponentsRegistry(componentFactory); } } ================================================ FILE: android/app/src/main/java/com/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java ================================================ package com.rnmail.newarchitecture.modules; import com.facebook.jni.HybridData; import com.facebook.react.ReactPackage; import com.facebook.react.ReactPackageTurboModuleManagerDelegate; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.soloader.SoLoader; import java.util.List; /** * Class responsible to load the TurboModules. This class has native methods and needs a * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ * folder for you). * *

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