Showing preview only (219K chars total). Download the full file or copy to clipboard to get everything.
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
## 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:
[](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(<App />);
});
================================================
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
================================================
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:usesCleartextTraffic="true"
tools:targetApi="28"
tools:ignore="GoogleAppIndexingWarning">
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
</application>
</manifest>
================================================
FILE: android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* <p>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
================================================
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnmail">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
================================================
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<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> 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.
*
* <p>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<ReactPackage> getPackages() {
List<ReactPackage> 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<JSIModuleSpec> getJSIModules(
final ReactApplicationContext reactApplicationContext,
final JavaScriptContextHolder jsContext) {
final List<JSIModuleSpec> 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<UIManager> 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).
*
* <p>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).
*
* <p>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<ReactPackage> 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<ReactPackage> 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 <rncli.h>
#include <rncore.h>
namespace facebook {
namespace react {
std::shared_ptr<TurboModule> 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 <memory>
#include <string>
#include <ReactCommon/JavaTurboModule.h>
namespace facebook {
namespace react {
std::shared_ptr<TurboModule> 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::jhybriddata>
MainApplicationTurboModuleManagerDelegate::initHybrid(
jni::alias_ref<jhybridobject>) {
return makeCxxInstance();
}
void MainApplicationTurboModuleManagerDelegate::registerNatives() {
registerHybrid({
makeNativeMethod(
"initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
makeNativeMethod(
"canCreateTurboModule",
MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
});
}
std::shared_ptr<TurboModule>
MainApplicationTurboModuleManagerDelegate::getTurboModule(
const std::string &name,
const std::shared_ptr<CallInvoker> jsInvoker) {
// Not implemented yet: provide pure-C++ NativeModules here.
return nullptr;
}
std::shared_ptr<TurboModule>
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 <memory>
#include <string>
#include <ReactCommon/TurboModuleManagerDelegate.h>
#include <fbjni/fbjni.h>
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<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
static void registerNatives();
std::shared_ptr<TurboModule> getTurboModule(
const std::string &name,
const std::shared_ptr<CallInvoker> jsInvoker) override;
std::shared_ptr<TurboModule> 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 <CoreComponentsRegistry.h>
#include <fbjni/fbjni.h>
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
#include <react/renderer/components/rncore/ComponentDescriptors.h>
#include <rncli.h>
namespace facebook {
namespace react {
MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
std::shared_ptr<ComponentDescriptorProviderRegistry const>
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::jhybriddata>
MainComponentsRegistry::initHybrid(
jni::alias_ref<jclass>,
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<ComponentDescriptorRegistry>(registry);
mutableRegistry->setFallbackComponentDescriptor(
std::make_shared<UnimplementedNativeViewComponentDescriptor>(
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 <ComponentFactory.h>
#include <fbjni/fbjni.h>
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
namespace facebook {
namespace react {
class MainComponentsRegistry
: public facebook::jni::HybridClass<MainComponentsRegistry> {
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<ComponentDescriptorProviderRegistry const>
sharedProviderRegistry();
static jni::local_ref<jhybriddata> initHybrid(
jni::alias_ref<jclass>,
ComponentFactory *delegate);
};
} // namespace react
} // namespace facebook
================================================
FILE: android/app/src/main/jni/OnLoad.cpp
================================================
#include <fbjni/fbjni.h>
#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
================================================
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 The Android Open Source Project
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.
-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<!--
This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-->
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
================================================
FILE: android/app/src/main/res/values/strings.xml
================================================
<resources>
<string name="app_name">RNMail</string>
</resources>
================================================
FILE: android/app/src/main/res/values/styles.xml
================================================
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
</style>
</resources>
================================================
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 <task> -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<SvgProps>
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 <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
================================================
FILE: ios/RNMail/AppDelegate.mm
================================================
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTAppSetupUtils.h>
#if RCT_NEW_ARCH_ENABLED
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTFabricSurfaceHostingProxyRootView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>
#import <react/config/ReactNativeConfig.h>
static NSString *const kRNConcurrentRoot = @"concurrentRoot";
@interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
RCTTurboModuleManager *_turboModuleManager;
RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
std::shared_ptr<const facebook::react::ReactNativeConfig> _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<facebook::react::ContextContainer const>();
_reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
_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<facebook::react::JSExecutorFactory>)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<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
{
return nullptr;
}
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
initParams:
(const facebook::react::ObjCTurboModule::InitParams &)params
{
return nullptr;
}
- (id<RCTTurboModule>)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
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>RNMail</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>UIAppFonts</key>
<array>
<string>Feather.ttf</string>
</array>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>
================================================
FILE: ios/RNMail/LaunchScreen.storyboard
================================================
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="EHf-IW-A2E">
<objects>
<viewController id="01J-lp-oVM" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="RNMail" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
<rect key="frame" x="0.0" y="202" width="375" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
<rect key="frame" x="0.0" y="626" width="375" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
<constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
<constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
<constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
<constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
<constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
</constraints>
<viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="52.173913043478265" y="375"/>
</scene>
</scenes>
</document>
================================================
FILE: ios/RNMail/main.m
================================================
#import <UIKit/UIKit.h>
#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 = "<group>"; };
00E356F21AD99517003FC87E /* RNMailTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNMailTests.m; sourceTree = "<group>"; };
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 = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = RNMail/AppDelegate.mm; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RNMail/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RNMail/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RNMail/main.m; sourceTree = "<group>"; };
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 = "<group>"; };
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 = "<group>"; };
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 = "<group>"; };
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 = "<group>"; };
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 = "<group>"; };
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 = "<group>";
};
00E356F01AD99517003FC87E /* Supporting Files */ = {
isa = PBXGroup;
children = (
00E356F11AD99517003FC87E /* Info.plist */,
);
name = "Supporting Files";
sourceTree = "<group>";
};
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 = "<group>";
};
2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
isa = PBXGroup;
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
5DCACB8F33CDC322A6C60F78 /* libPods-RNMail.a */,
19F6CBCC0A4E27FBF8BF4A61 /* libPods-RNMail-RNMailTests.a */,
);
name = Frameworks;
sourceTree = "<group>";
};
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
);
name = Libraries;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
13B07FAE1A68108700A75B9A /* RNMail */,
832341AE1AAA6A7D00B99B32 /* Libraries */,
00E356EF1AD99517003FC87E /* RNMailTests */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
BBD78D7AC51CEA395F1C20DB /* Pods */,
);
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* RNMail.app */,
00E356EE1AD99517003FC87E /* RNMailTests.xctest */,
);
name = Products;
sourceTree = "<group>";
};
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 = "<group>";
};
/* 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
================================================
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1210"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "RNMail.app"
BlueprintName = "RNMail"
ReferencedContainer = "container:RNMail.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
buildConfiguration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES">
<Testables>
<TestableReference
skipped = "NO">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "00E356ED1AD99517003FC87E"
BuildableName = "RNMailTests.xctest"
BlueprintName = "RNMailTests"
ReferencedContainer = "container:RNMail.xcodeproj">
</BuildableReference>
</TestableReference>
</Testables>
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
debugServiceExtension = "internal"
allowLocationSimulation = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "RNMail.app"
BlueprintName = "RNMail"
ReferencedContainer = "container:RNMail.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</LaunchAction>
<ProfileAction
buildConfiguration = "Release"
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
debugDocumentVersioning = "YES">
<BuildableProductRunnable
runnableDebuggingMode = "0">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "RNMail.app"
BlueprintName = "RNMail"
ReferencedContainer = "container:RNMail.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>
================================================
FILE: ios/RNMail.xcworkspace/contents.xcworkspacedata
================================================
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "group:RNMail.xcodeproj">
</FileRef>
<FileRef
location = "group:Pods/Pods.xcodeproj">
</FileRef>
</Workspace>
================================================
FILE: ios/RNMail.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
================================================
FILE: ios/RNMailTests/Info.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>BNDL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
</dict>
</plist>
================================================
FILE: ios/RNMailTests/RNMailTests.m
================================================
#import <UIKit/UIKit.h>
#import <XCTest/XCTest.h>
#import <React/RCTLog.h>
#import <React/RCTRootView.h>
#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<hi@craftz.dog> (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 (
<NavigationContainer>
<ThemeProvider theme={activeTheme}>
<StatusBar />
<Navigations />
</ThemeProvider>
</NavigationContainer>
)
}
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<Theme, AnimateProps<ViewProps>>(Animated.View)
export type AnimatedBoxProps = React.ComponentProps<typeof AnimatedBox>
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<Theme, 'barVariants'> & 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<Theme>
const BottomSheet = forwardRef<RNBottomSheet, Props>(({ ...rest }, ref) => {
const theme = useTheme<Theme>()
const bgColor = theme.colors['$background']
const handleColor = theme.colors['$foreground']
return (
<RNBottomSheet
{...rest}
ref={ref}
handleIndicatorStyle={{
backgroundColor: handleColor,
opacity: 0.8
}}
backgroundStyle={{
backgroundColor: bgColor
}}
/>
)
})
export default BottomSheet
================================================
FILE: src/atoms/box.ts
================================================
import { Theme } from '@/themes'
import { createBox } from '@shopify/restyle'
const Box = createBox<Theme>()
export type BoxProps = React.ComponentProps<typeof Box>
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<Theme> & {
children: React.ReactNode
}
const Container: React.FC<Props> = props => (
<Box {...props} flex={1} backgroundColor="$background">
{props.children}
</Box>
)
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<Theme, NativePressableProps>(NativePressable)
export type PressableProps = React.ComponentProps<typeof Pressable>
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<Theme, ViewProps>(NativeSafeAreaView)
export type SafeAreaViewProps = React.ComponentProps<typeof SafeAreaView>
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<Theme, NativeScrollViewProps>(NativeScrollView)
export type ScrollViewProps = React.ComponentProps<typeof ScrollView>
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<Theme> &
SpacingShorthandProps<Theme> &
BorderProps<Theme> &
BackgroundColorProps<Theme> &
BackgroundColorShorthandProps<Theme> &
ColorProps<Theme> &
TypographyProps<Theme> &
LayoutProps<Theme>
const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
color,
spacing,
spacingShorthand,
border,
backgroundColor,
backgroundColorShorthand,
typography,
layout
])
type TextInputProps = React.ComponentPropsWithRef<typeof RNTextInput> &
RestyleProps & {
placeholderColor?: ResponsiveValue<keyof Theme['colors'], Theme>
}
const TextInput = forwardRef<RNTextInput, TextInputProps>(
({ placeholderColor, ...rest }, ref) => {
const props = useRestyle(restyleFunctions, rest as any)
const theme = useTheme<Theme>()
const placeholderTextColorProp =
placeholderColor && useResponsiveProp(placeholderColor)
const placeholderTextColorValue =
placeholderTextColorProp && theme.colors[placeholderTextColorProp]
return (
<RNTextInput
ref={ref}
{...props}
placeholderTextColor={placeholderTextColorValue}
/>
)
}
)
export default TextInput
================================================
FILE: src/atoms/text.ts
================================================
import { Theme } from '@/themes'
import { createText } from '@shopify/restyle'
const Text = createText<Theme>()
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<Theme> &
BackgroundColorShorthandProps<Theme> &
BorderProps<Theme> &
OpacityProps<Theme>
const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
backgroundColorShorthand,
backgroundColor,
border,
opacity
])
interface Props extends PressableProps {
pressed?: RestyleProps
rippleColor?: ResponsiveValue<keyof Theme['colors'], Theme>
rippleBorderless?: boolean
}
const Touchable = ({
pressed,
rippleColor,
rippleBorderless,
style,
...rest
}: Props) => {
const { style: pressedStyle } = pressed
? useRestyle(restyleFunctions, pressed)
: { style: undefined }
const theme = useTheme<Theme>()
const rippleColorProp = rippleColor && useResponsiveProp(rippleColor)
const rippleColorValue = rippleColorProp && theme.colors[rippleColorProp]
return (
<Pressable
{...rest}
android_ripple={{ color: rippleColorValue, borderless: rippleBorderless }}
style={({ pressed: isPressed }) =>
(isPressed ? [style, pressedStyle] : style) as StyleProp<ViewStyle>
}
/>
)
}
export const TouchableOpacity: React.FC<Props> = props => (
<Touchable
rippleColor="$foreground"
{...props}
pressed={{ opacity: Platform.select({ ios: 0.6 }) }}
/>
)
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<Theme> & {
onPress: (bookId: string) => void
}
const BookListItem: React.FC<ListItemProps> = ({
id,
name,
onPress,
color
}) => {
const handlePress = useCallback(() => onPress(id), [id])
return (
<TouchableOpacity px="lg" py="sm" onPress={handlePress}>
<Text
ellipsizeMode="tail"
numberOfLines={1}
mb="xs"
color={color || '$sidebarForeground'}
>
{name}
</Text>
</TouchableOpacity>
)
}
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<Theme, FlatListProps<Book>>(FlatList)
const StyledBottomSheetFlatList = createBox<Theme, FlatListProps<Book>>(
BottomSheetFlatList
)
type Props = {
inBottomSheet?: boolean
onPressItem: (bookId: string) => void
headerComponent?: React.FC<any>
} & ColorProps<Theme>
const BookList: React.FC<Props> = ({
onPressItem,
headerComponent,
color,
inBottomSheet
}) => {
const renderItem = useCallback(
({ item }: { item: Book }) => {
return <BookListItem {...item} onPress={onPressItem} color={color} />
},
[onPressItem]
)
const ListComponent = inBottomSheet
? StyledBottomSheetFlatList
: StyledFlatList
return (
<ListComponent
contentInsetAdjustmentBehavior="automatic"
scrollEventThrottle={16}
data={BOOKS}
renderItem={renderItem}
keyExtractor={item => 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> = 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 (
<TouchableOpacity m="xs" p="xs" onPress={onPress} rippleBorderless>
<AnimatedBox
position="absolute"
width={30}
height={30}
alignItems="center"
justifyContent="center"
style={menuButtonStyle}
>
<FeatherIcon name="menu" size={22} />
</AnimatedBox>
<AnimatedBox
position="absolute"
width={30}
height={30}
alignItems="center"
justifyContent="center"
style={backButtonStyle}
>
<FeatherIcon name="arrow-left" size={26} />
</AnimatedBox>
<Box width={22} height={22} />
</TouchableOpacity>
)
}
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> = props => {
const { onSidebarToggle, ...rest } = props
const safeAreaInsets = useSafeAreaInsets()
const theme = useTheme<Theme>()
const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom)
const [searchInputHasFocus, setSearchInputHasFocus] = useAtom(
searchInputHasFocusAtom
)
const refSearchInput = useRef<RNTextInput>(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 (
<AnimatedBox position="absolute" top={0} left={0} right={0} {...rest}>
<AnimatedBox
position="absolute"
top={-safeAreaInsets.top}
left={0}
right={0}
bottom={0}
bg="$headerBarBackground"
style={safeAreaStyle}
></AnimatedBox>
<AnimatedBox
flexDirection="row"
alignItems="center"
mx="lg"
my="md"
px="sm"
minHeight={44}
bg="$headerBarBackground"
style={barStyle}
>
<HeaderBarLeftButton
onPress={handleLeftButtonPress}
backButtonVisible={searchInputHasFocus}
/>
<TextInput
ref={refSearchInput}
flex={1}
ml="sm"
fontSize={18}
autoCapitalize="none"
color="$foreground"
placeholder="Search notes"
placeholderColor="$fieldInputPlaceholderTextColor"
value={searchQuery}
onFocus={handleSearchInputFocus}
onBlur={handleSearchInputBlur}
onChangeText={setSearchQuery}
/>
{searchQuery.length > 0 && (
<TouchableOpacity
m="xs"
p="xs"
rippleBorderless
onPress={handleClearButtonPress}
>
<FeatherIcon name="x" size={22} />
</TouchableOpacity>
)}
</AnimatedBox>
</AnimatedBox>
)
}
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<typeof Feather>
type Props = Omit<IconProps, 'color'> & ColorProps<Theme>
const FeatherIcon: React.FC<Props> = ({ color = '$foreground', ...rest }) => {
const theme = useTheme<Theme>()
const colorProp = useResponsiveProp(color)
const vColor = theme.colors[colorProp || '$foreground']
return <Feather {...rest} color={vColor} />
}
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<SvgProps, 'color'> & ColorProps<Theme>
const InkdropLogo: React.FC<Props> = ({ color = '$foreground', ...rest }) => {
const theme = useTheme<Theme>()
const colorProp = useResponsiveProp(color)
const vColor = theme.colors[colorProp || '$foreground']
return <LogoSVG {...rest} color={vColor} />
}
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<MoveNoteSheetHandle, Props>(
({ onClose }, ref) => {
const refBottomSheet = useRef<RNBottomSheet>(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 (
<BottomSheet
ref={refBottomSheet}
index={-1}
snapPoints={snapPoints}
backdropComponent={props => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
/>
)}
detached={true}
bottomInset={46}
enablePanDownToClose={true}
style={{ marginHorizontal: 12 }}
onClose={onClose}
>
<BookList
inBottomSheet
onPressItem={handlePressItem}
color="$foreground"
headerComponent={() => (
<Box justifyContent="center" alignItems="center">
<Text fontWeight="bold">Move</Text>
</Box>
)}
/>
</BottomSheet>
)
}
)
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<Props> = ({ children }) => {
return (
<SafeAreaView
backgroundColor="$navbarBackground"
borderBottomColor="$navbarBorderBottom"
borderBottomWidth={StyleSheet.hairlineWidth}
>
<Box minHeight={52} flexDirection="row" alignItems="center" px="md">
{children}
</Box>
</SafeAreaView>
)
}
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 (
<Box
px="md"
py="sm"
flexDirection="row"
justifyContent="flex-start"
alignItems="center"
>
<Text
ml="xs"
mr="md"
fontWeight="bold"
fontSize={14}
numberOfLines={1}
ellipsizeMode="middle"
style={{ maxWidth: '70%' }}
>
All Notes
</Text>
</Box>
)
}
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<SharedValue<number>>
}
const NoteListItemActionView: React.FC<Props> = ({ progress }) => {
const iconStyle = useAnimatedStyle(() => ({
transform: [
{
scale: progress.value
}
]
}))
return (
<Box
flex={1}
bg="$primary"
flexDirection="row"
alignItems="center"
justifyContent="flex-end"
pr="xl"
>
<AnimatedBox
flexDirection="row"
alignItems="center"
justifyContent="center"
style={iconStyle}
>
<FeatherIcon name="folder" color="white" size={18} />
<FeatherIcon name="arrow-right" color="white" size={12} />
</AnimatedBox>
</Box>
)
}
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<ListItemProps> = 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) => (
<NoteListItemActionView progress={progress} />
),
[]
)
return (
<SwipeableView
bg="yellow"
onSwipeLeft={handleSwipeLeft}
backView={renderBackView}
>
<Box bg="$background">
<TouchableOpacity
bg="$background"
px="lg"
py="sm"
onPress={handlePress}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
fontWeight="bold"
mb="xs"
>
{props.title}
</Text>
<Text
ellipsizeMode="tail"
numberOfLines={2}
fontSize={14}
opacity={0.7}
>
{props.body}
</Text>
</TouchableOpacity>
</Box>
</SwipeableView>
)
})
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<Theme, AnimateProps<FlatListProps<Note>>>(
Animated.FlatList
)
export interface Props {
contentInsetTop: number
ListHeaderComponent?: React.ComponentType<any> | null | undefined
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
onItemPress: (noteId: string) => void
onItemSwipeLeft: (noteId: string, cancel: () => void) => void
}
const NoteList: React.FC<Props> = ({
ListHeaderComponent,
onScroll,
contentInsetTop,
onItemPress,
onItemSwipeLeft
}) => {
const renderItem = useCallback(
({ item }: { item: Note }) => {
return (
<NoteListItem
{...item}
onPress={onItemPress}
onSwipeLeft={onItemSwipeLeft}
/>
)
},
[onItemPress, onItemSwipeLeft]
)
return (
<StyledFlatList
contentInsetAdjustmentBehavior="automatic"
data={NOTES}
renderItem={renderItem}
keyExtractor={item => item.id}
width="100%"
onScroll={onScroll}
scrollEventThrottle={16}
ListHeaderComponent={
<Box>
<>
<Box width="100%" height={contentInsetTop}></Box>
{ListHeaderComponent && <ListHeaderComponent />}
</>
</Box>
}
/>
)
}
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<any, any>
renderOnPhone?: () => ReactElement<any, any>
onLayoutChange?: (layout: 'tablet' | 'phone') => any
}
const ResponsiveLayout: React.FC<Props> = 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<any, any> | 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<Theme, FlatListProps<ThemeMeta>>(FlatList)
const Sidebar: React.FC<Props> = () => {
const navigation = useNavigation<DrawerNavigationHelpers>()
const [, setActiveTheme] = useAtom(activeThemeId)
const handleThemeItemPress = useCallback(
(selectedThemeId: ThemeNames) => {
setActiveTheme(selectedThemeId)
// navigation.closeDrawer()
},
[navigation]
)
const renderThemeItem = useCallback(
({ item }: { item: ThemeMeta }) => {
return <ThemeListItem theme={item} onPress={handleThemeItemPress} />
},
[handleThemeItemPress]
)
return (
<Box flex={1} bg="$sidebarBackground">
<SafeAreaView>
<Box
alignItems="flex-start"
pl="md"
pb="sm"
mt="xs"
borderBottomColor="$sidebarSeparator"
borderBottomWidth={1}
>
<InkdropLogo width={128} height={36} color="$sidebarForeground" />
</Box>
</SafeAreaView>
<StyledFlatList
ListHeaderComponent={() => (
<Box p="lg" alignItems="flex-start">
<Text color="$sidebarForeground" fontWeight="bold">
UI Themes
</Text>
</Box>
)}
data={themes}
keyExtractor={(t: ThemeMeta) => t.id}
renderItem={renderThemeItem}
/>
</Box>
)
}
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<Theme>()
return (
<NativeStatusBar
animated={true}
backgroundColor={theme.colors.$windowBackground || 'white'}
barStyle={theme.statusBar?.barStyle}
/>
)
}
================================================
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<SharedValue<number>>
}
interface Props
extends Pick<PanGestureHandlerProps, 'simultaneousHandlers'>,
AnimatedBoxProps {
children: React.ReactNode
backView?: React.ReactNode | React.FC<BackViewProps>
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<SwipeableViewHandle, Props>((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<PanGestureHandlerGestureEvent>({
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 (
<AnimatedBox {...boxProps}>
{backView && (
<Box position="absolute" left={0} right={0} top={0} bottom={0}>
{typeof backView === 'function' ? backView({ progress }) : backView}
</Box>
)}
<PanGestureHandler
activeOffsetX={[-5, 1000]}
simultaneousHandlers={simultaneousHandlers}
onGestureEvent={panGesture}
>
<AnimatedBox style={facadeStyle}>{children}</AnimatedBox>
</PanGestureHandler>
</AnimatedBox>
)
})
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<Props> = ({ theme, onPress }) => {
const [isActive] = useAtom(
useMemo(() => selectAtom(activeThemeId, v => v === theme.id), [theme])
)
const handlePress = useCallback(() => {
onPress(theme.id)
}, [onPress, theme])
return (
<TouchableOpacity
minHeight={44}
flexDirection="row"
alignItems="center"
px="lg"
onPress={handlePress}
>
<Box alignItems="center" justifyContent="center" width={32}>
{isActive ? (
<FeatherIcon size={20} name="check" color="$primary" />
) : null}
</Box>
<Text color="$sidebarForeground">{theme.name}</Text>
</TouchableOpacity>
)
}
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> = 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 (
<View style={styles.container}>
<Animated.View style={[styles.leftViewContainer, animatedLeftViewStyle]}>
<View
style={{
flex: 1,
width: leftViewWidth
}}
>
{renderLeftView(viewProps)}
</View>
</Animated.View>
<Animated.View
style={[styles.middleViewContainer, animatedMiddleViewStyle]}
>
<View
style={{
flex: 1,
width: middleViewWidth
}}
>
{renderMiddleView(viewProps)}
</View>
</Animated.View>
<View style={styles.rightViewContainer}>
{renderRightView(viewProps)}
</View>
</View>
)
}
export default memo<Props>(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<Book> = []
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<Note> = []
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<HomeDrawerParamList>
Detail: undefined
}
const Stack = createNativeStackNavigator<RootStackParamList>()
const Drawer = createDrawerNavigator<HomeDrawerParamList>()
function Home() {
const { isTablet } = useResponsiveLayout()
const swipeEnabled = useDrawerEnabled()
return (
<Drawer.Navigator
initialRouteName="Main"
screenOptions={{
drawerType: isTablet ? 'front' : 'back',
drawerStyle: {
width: isTablet ? 280 : '90%'
},
swipeEdgeWidth: 200,
swipeEnabled: swipeEnabled
}}
drawerContent={Sidebar}
>
<Drawer.Screen
name="Main"
component={MainScreen}
options={{
headerShown: false
}}
/>
</Drawer.Navigator>
)
}
export default function Navigations() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
headerShown: false
}}
/>
<Stack.Screen
name="Detail"
component={DetailScreenForPhone}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
)
}
================================================
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> = _props => {
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>()
const handleBackPress = useCallback(() => {
navigation.goBack()
}, [])
return (
<DetailScreen
renderNavBarLeft={() => (
<TouchableOpacity onPress={handleBackPress} p="sm">
<FeatherIcon name="arrow-left" size={24} />
</TouchableOpacity>
)}
/>
)
}
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> = props => {
const { onDistractionFreeModeToggle, middleViewVisible } = props
return (
<DetailScreen
renderNavBarLeft={() => (
<TouchableOpacity
onPress={onDistractionFreeModeToggle}
flexDirection="row"
alignItems="center"
height="100%"
>
<FeatherIcon
name={middleViewVisible ? 'maximize-2' : 'minimize-2'}
size={24}
/>
</TouchableOpacity>
)}
/>
)
}
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 (
<Container>
<Navbar>
{renderNavBarLeft()}
<Box flex={1}>
<Text variant="navbar" textAlign="center">
Editor
</Text>
</Box>
<Box width={36} />
</Navbar>
<ScrollView flex={1} p="sm">
<Text fontWeight="bold" fontSize={24} m="sm">
{note?.title}
</Text>
<Text fontSize={20} m="sm">
{note?.body}
</Text>
</ScrollView>
</Container>
)
}
================================================
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<HomeDrawerParamList, 'Main'>,
NativeStackScreenProps<RootStackParamList>
>
export default function MainScreenForPhone({ navigation }: Props) {
return <NoteListScreenForPhone navigation={navigation} />
}
================================================
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<HomeDrawerParamList, 'Main'>,
NativeStackScreenProps<RootStackParamList>
>
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 (
<ThreeColumnLayout
renderLeftView={() => <Sidebar />}
renderMiddleView={() => (
<NoteListScreenForTablet
navigation={navigation}
onSidebarToggle={toggleSidebar}
/>
)}
renderRightView={viewProps => (
<DetailScreenForTablet
{...viewProps}
onDistractionFreeModeToggle={toggleDistractionFreeMode}
/>
)}
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<HomeDrawerParamList, 'Main'>,
NativeStackScreenProps<RootStackParamList>
>
export default function MainScreen(props: Props) {
return (
<Container>
<ResponsiveLayout
renderOnPhone={() => <MainScreenForPhone {...props} />}
renderOnTablet={() => <MainScreenForTablet {...props} />}
/>
</Container>
)
}
================================================
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<HomeDrawerParamList>,
NativeStackNavigationProp<RootStackParamList>
>
}
const NoteListScreenForPhone: React.FC<Props> = ({ navigation }) => {
const setEditingNoteId = useSetAtom(editingNoteIdAtom)
const handleSidebarToggle = useCallback(() => {
navigation.toggleDrawer()
}, [])
const handleNoteListItemPress = useCallback((noteId: string) => {
setEditingNoteId(noteId)
navigation.navigate('Detail')
}, [])
return (
<NoteListScreen
onSidebarToggle={handleSidebarToggle}
onNoteSelect={handleNoteListItemPress}
/>
)
}
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<HomeDrawerParamList>,
NativeStackNavigationProp<RootStackParamList>
>
onSidebarToggle: () => any
}
const NoteListScreenForTablet: React.FC<Props> = 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 (
<NoteListScreen
onSidebarToggle={handleSidebarToggle}
onNoteSelect={handleNoteListItemPress}
/>
)
})
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> = props => {
const { onSidebarToggle, onNoteSelect } = props
const refMoveNoteSheet = useRef<MoveNoteSheet>(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 (
<Container alignItems="center" justifyContent="center">
<NoteList
contentInsetTop={headerBarHeight}
onScroll={handleScroll}
onItemPress={onNoteSelect}
onItemSwipeLeft={handleNoteListItemSwipeLeft}
ListHeaderComponent={NoteListHeaderTitleBar}
/>
<HeaderBar
style={headerBarStyle}
onLayout={handleNoteListLayout}
onSidebarToggle={onSidebarToggle}
></HeaderBar>
<MoveNoteSheet
ref={refMoveNoteSheet}
onClose={handleMoveNoteSheetClose}
/>
</Container>
)
}
export default NoteListScreen
================================================
FILE: src/states/editor.ts
================================================
import { atom } from 'jotai'
export const editingNoteIdAtom = atom<string | null | undefined>(undefined)
================================================
FILE: src/states/search-bar.ts
================================================
import { atom } from 'jotai'
export const searchQueryAtom = atom<string>('')
export const searchInputHasFocusAtom = atom<boolean>(false)
================================================
FILE: src/states/theme.ts
================================================
import { Theme, ThemeNames, themes } from '@/themes'
import { atom } from 'jotai'
const activeThemeId = atom<ThemeNames>('dark')
export const activeThemeAtom = atom<Theme>(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: '#
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
SYMBOL INDEX (111 symbols across 57 files)
FILE: android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java
class ReactNativeFlipper (line 28) | public class ReactNativeFlipper {
method initializeFlipper (line 29) | public static void initializeFlipper(Context context, ReactInstanceMan...
FILE: android/app/src/main/java/com/rnmail/MainActivity.java
class MainActivity (line 8) | public class MainActivity extends ReactActivity {
method onCreate (line 9) | @Override
method getMainComponentName (line 18) | @Override
method createReactActivityDelegate (line 29) | @Override
class MainActivityDelegate (line 34) | public static class MainActivityDelegate extends ReactActivityDelegate {
method MainActivityDelegate (line 35) | public MainActivityDelegate(ReactActivity activity, String mainCompo...
method createRootView (line 39) | @Override
method isConcurrentRootEnabled (line 46) | @Override
FILE: android/app/src/main/java/com/rnmail/MainApplication.java
class MainApplication (line 16) | public class MainApplication extends Application implements ReactApplica...
method getUseDeveloperSupport (line 20) | @Override
method getPackages (line 25) | @Override
method getJSMainModuleName (line 34) | @Override
method getReactNativeHost (line 43) | @Override
method onCreate (line 52) | @Override
method initializeFlipper (line 68) | private static void initializeFlipper(
FILE: android/app/src/main/java/com/rnmail/newarchitecture/MainApplicationReactNativeHost.java
class MainApplicationReactNativeHost (line 35) | public class MainApplicationReactNativeHost extends ReactNativeHost {
method MainApplicationReactNativeHost (line 36) | public MainApplicationReactNativeHost(Application application) {
method getUseDeveloperSupport (line 40) | @Override
method getPackages (line 45) | @Override
method getJSMainModuleName (line 57) | @Override
method getReactPackageTurboModuleManagerDelegateBuilder (line 62) | @NonNull
method getJSIModulePackage (line 71) | @Override
FILE: android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java
class MainComponentsRegistry (line 16) | @DoNotStrip
method initHybrid (line 24) | @DoNotStrip
method MainComponentsRegistry (line 27) | @DoNotStrip
method register (line 32) | @DoNotStrip
FILE: android/app/src/main/java/com/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
class MainApplicationTurboModuleManagerDelegate (line 18) | public class MainApplicationTurboModuleManagerDelegate
method MainApplicationTurboModuleManagerDelegate (line 23) | protected MainApplicationTurboModuleManagerDelegate(
method initHybrid (line 28) | protected native HybridData initHybrid();
method canCreateTurboModule (line 30) | native boolean canCreateTurboModule(String moduleName);
class Builder (line 32) | public static class Builder extends ReactPackageTurboModuleManagerDele...
method build (line 33) | protected MainApplicationTurboModuleManagerDelegate build(
method maybeLoadOtherSoLibraries (line 39) | @Override
FILE: android/app/src/main/jni/MainApplicationModuleProvider.cpp
type facebook (line 6) | namespace facebook {
type react (line 7) | namespace react {
function MainApplicationModuleProvider (line 9) | std::shared_ptr<TurboModule> MainApplicationModuleProvider(
FILE: android/app/src/main/jni/MainApplicationModuleProvider.h
function namespace (line 8) | namespace facebook {
FILE: android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
type facebook (line 4) | namespace facebook {
type react (line 5) | namespace react {
FILE: android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
function namespace (line 7) | namespace facebook {
FILE: android/app/src/main/jni/MainComponentsRegistry.cpp
type facebook (line 9) | namespace facebook {
type react (line 10) | namespace react {
FILE: android/app/src/main/jni/MainComponentsRegistry.h
function namespace (line 8) | namespace facebook {
FILE: android/app/src/main/jni/OnLoad.cpp
function JNIEXPORT (line 5) | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
FILE: src/atoms/animated-box.ts
type AnimatedBoxProps (line 9) | type AnimatedBoxProps = React.ComponentProps<typeof AnimatedBox>
FILE: src/atoms/bottom-sheet.tsx
type Props (line 6) | type Props = BottomSheetProps & ColorProps<Theme>
FILE: src/atoms/box.ts
type BoxProps (line 5) | type BoxProps = React.ComponentProps<typeof Box>
FILE: src/atoms/container.tsx
type Props (line 6) | type Props = BoxProps<Theme> & {
FILE: src/atoms/pressable.ts
type PressableProps (line 9) | type PressableProps = React.ComponentProps<typeof Pressable>
FILE: src/atoms/safe-area-view.ts
type SafeAreaViewProps (line 6) | type SafeAreaViewProps = React.ComponentProps<typeof SafeAreaView>
FILE: src/atoms/scroll-view.ts
type ScrollViewProps (line 9) | type ScrollViewProps = React.ComponentProps<typeof ScrollView>
FILE: src/atoms/text-input.tsx
type RestyleProps (line 28) | type RestyleProps = SpacingProps<Theme> &
type TextInputProps (line 48) | type TextInputProps = React.ComponentPropsWithRef<typeof RNTextInput> &
FILE: src/atoms/touchable.tsx
type RestyleProps (line 21) | type RestyleProps = BackgroundColorProps<Theme> &
type Props (line 33) | interface Props extends PressableProps {
FILE: src/components/book-list-item.tsx
type ListItemProps (line 7) | type ListItemProps = Book &
FILE: src/components/book-list.tsx
type Props (line 15) | type Props = {
FILE: src/components/header-bar-left-button.tsx
type Props (line 7) | type Props = AnimatedBoxProps & {
FILE: src/components/header-bar.tsx
type Props (line 14) | type Props = AnimatedBoxProps & {
FILE: src/components/icon.tsx
type IconProps (line 6) | type IconProps = React.ComponentProps<typeof Feather>
type Props (line 7) | type Props = Omit<IconProps, 'color'> & ColorProps<Theme>
FILE: src/components/inkdrop-logo.tsx
type Props (line 7) | type Props = Omit<SvgProps, 'color'> & ColorProps<Theme>
FILE: src/components/move-note-sheet.tsx
type Props (line 13) | interface Props {
type MoveNoteSheetHandle (line 17) | interface MoveNoteSheetHandle {
type MoveNoteSheet (line 75) | type MoveNoteSheet = MoveNoteSheetHandle
FILE: src/components/navbar.tsx
type Props (line 5) | interface Props {
FILE: src/components/note-list-header-title-bar.tsx
type Props (line 4) | type Props = {}
FILE: src/components/note-list-item-action-view.tsx
type Props (line 6) | interface Props {
FILE: src/components/note-list-item.tsx
type ListItemProps (line 7) | interface ListItemProps extends Note {
FILE: src/components/note-list.tsx
type Props (line 19) | interface Props {
FILE: src/components/responsive-layout.tsx
type Props (line 5) | type Props = {
FILE: src/components/sidebar.tsx
type Props (line 13) | type Props = {}
FILE: src/components/status-bar.tsx
function StatusBar (line 6) | function StatusBar() {
FILE: src/components/swipeable-view.tsx
type SwipeLeftCallback (line 21) | type SwipeLeftCallback = () => any
type BackViewProps (line 23) | interface BackViewProps {
type Props (line 27) | interface Props
type SwipeableViewHandle (line 36) | interface SwipeableViewHandle {
constant SWIPE_THREASHOLD (line 41) | const SWIPE_THREASHOLD = -0.2
FILE: src/components/theme-list-item.tsx
type Props (line 9) | interface Props {
FILE: src/components/three-column-layout.tsx
type ThreeColumnLayoutProps (line 4) | type ThreeColumnLayoutProps = {
type RenderView (line 9) | type RenderView = (callbacks: ThreeColumnLayoutProps) => React.ReactNode
type Props (line 10) | type Props = {
FILE: src/consts.ts
constant RESPONSIVE_SCREEN_BREAKPOINT (line 1) | const RESPONSIVE_SCREEN_BREAKPOINT = 1024
FILE: src/fixtures/books.ts
constant DATA (line 5) | const DATA: Array<Book> = []
FILE: src/fixtures/notes.ts
constant DATA (line 5) | const DATA: Array<Note> = []
FILE: src/hooks/use-sticky-header.ts
constant ANCHOR_INIT (line 12) | const ANCHOR_INIT = -9999
function useStickyHeader (line 14) | function useStickyHeader() {
FILE: src/models.ts
type Note (line 1) | interface Note {
type Book (line 7) | interface Book {
FILE: src/navs.tsx
type HomeDrawerParamList (line 11) | type HomeDrawerParamList = {
type RootStackParamList (line 15) | type RootStackParamList = {
function Home (line 23) | function Home() {
function Navigations (line 51) | function Navigations() {
FILE: src/screens/detail-phone.tsx
type Props (line 9) | type Props = {}
FILE: src/screens/detail-tablet.tsx
type Props (line 7) | type Props = ThreeColumnLayoutProps & { onDistractionFreeModeToggle: () ...
FILE: src/screens/detail.tsx
type Props (line 8) | type Props = {
function DetailScreen (line 12) | function DetailScreen(props: Props) {
FILE: src/screens/main-phone.tsx
type Props (line 8) | type Props = CompositeScreenProps<
function MainScreenForPhone (line 13) | function MainScreenForPhone({ navigation }: Props) {
FILE: src/screens/main-tablet.tsx
type Props (line 12) | type Props = CompositeScreenProps<
function MainScreenForTablet (line 17) | function MainScreenForTablet({ navigation }: Props) {
FILE: src/screens/main.tsx
type Props (line 11) | type Props = CompositeScreenProps<
function MainScreen (line 16) | function MainScreen(props: Props) {
FILE: src/screens/note-list-phone.tsx
type Props (line 10) | interface Props {
FILE: src/screens/note-list-tablet.tsx
type Props (line 11) | type Props = {
FILE: src/screens/note-list.tsx
type Props (line 9) | type Props = {
FILE: src/themes/index.ts
type ThemeNames (line 6) | type ThemeNames = 'light' | 'dark' | 'nord' | 'solarized-dark'
type ThemeMeta (line 7) | interface ThemeMeta {
FILE: src/themes/light.ts
type Theme (line 88) | type Theme = typeof theme
Condensed preview — 119 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (214K chars).
[
{
"path": ".buckconfig",
"chars": 114,
"preview": "\n[android]\n target = Google Inc.:Google APIs:23\n\n[maven_repositories]\n central = https://repo1.maven.org/maven2\n"
},
{
"path": ".eslintrc.js",
"chars": 394,
"preview": "module.exports = {\n root: true,\n parser: \"@typescript-eslint/parser\",\n plugins: [\"@typescript-eslint/eslint-plugin\"],"
},
{
"path": ".gitignore",
"chars": 898,
"preview": "# OSX\n#\n.DS_Store\n\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.p"
},
{
"path": ".ruby-version",
"chars": 6,
"preview": "2.7.5\n"
},
{
"path": ".watchmanconfig",
"chars": 2,
"preview": "{}"
},
{
"path": "Gemfile",
"chars": 168,
"preview": "source 'https://rubygems.org'\n\n# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version\nruby '"
},
{
"path": "LICENSE",
"chars": 11346,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 2513,
"preview": "# Gmail-like UI with React Native\n\nA UI mockup for the new version of [Inkdrop](https://www.inkdrop.app/) for mobile, in"
},
{
"path": "__tests__/App-test.tsx",
"chars": 266,
"preview": "/**\n * @format\n */\n\nimport 'react-native';\nimport React from 'react';\nimport App from '../App';\n\n// Note: test renderer "
},
{
"path": "android/app/_BUCK",
"chars": 1306,
"preview": "# To learn about Buck see [Docs](https://buckbuild.com/).\n# To run your application with Buck:\n# - install Buck\n# - `npm"
},
{
"path": "android/app/build.gradle",
"chars": 13689,
"preview": "apply plugin: \"com.android.application\"\n\nimport com.android.build.OutputFile\nimport org.apache.tools.ant.taskdefs.condit"
},
{
"path": "android/app/build_defs.bzl",
"chars": 602,
"preview": "\"\"\"Helper definitions to glob .aar and .jar targets\"\"\"\n\ndef create_aar_targets(aarfiles):\n for aarfile in aarfiles:\n "
},
{
"path": "android/app/proguard-rules.pro",
"chars": 435,
"preview": "# Add project specific ProGuard rules here.\n# By default, the flags in this file are appended to flags specified\n# in /u"
},
{
"path": "android/app/src/debug/AndroidManifest.xml",
"chars": 520,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:to"
},
{
"path": "android/app/src/debug/java/com/rnmail/ReactNativeFlipper.java",
"chars": 3296,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * <p>This source code is licensed under the MIT license fo"
},
{
"path": "android/app/src/main/AndroidManifest.xml",
"chars": 994,
"preview": "<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n package=\"com.rnmail\">\n\n <uses-permission andro"
},
{
"path": "android/app/src/main/java/com/rnmail/MainActivity.java",
"chars": 1750,
"preview": "package com.rnmail;\n\nimport android.os.Bundle;\nimport com.facebook.react.ReactActivity;\nimport com.facebook.react.ReactA"
},
{
"path": "android/app/src/main/java/com/rnmail/MainApplication.java",
"chars": 3099,
"preview": "package com.rnmail;\n\nimport android.app.Application;\nimport android.content.Context;\nimport com.facebook.react.PackageLi"
},
{
"path": "android/app/src/main/java/com/rnmail/newarchitecture/MainApplicationReactNativeHost.java",
"chars": 4606,
"preview": "package com.rnmail.newarchitecture;\n\nimport android.app.Application;\nimport androidx.annotation.NonNull;\nimport com.face"
},
{
"path": "android/app/src/main/java/com/rnmail/newarchitecture/components/MainComponentsRegistry.java",
"chars": 1153,
"preview": "package com.rnmail.newarchitecture.components;\n\nimport com.facebook.jni.HybridData;\nimport com.facebook.proguard.annotat"
},
{
"path": "android/app/src/main/java/com/rnmail/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java",
"chars": 1781,
"preview": "package com.rnmail.newarchitecture.modules;\n\nimport com.facebook.jni.HybridData;\nimport com.facebook.react.ReactPackage;"
},
{
"path": "android/app/src/main/jni/Android.mk",
"chars": 1524,
"preview": "THIS_DIR := $(call my-dir)\n\ninclude $(REACT_ANDROID_DIR)/Android-prebuilt.mk\n\n# If you wish to add a custom TurboModule "
},
{
"path": "android/app/src/main/jni/CMakeLists.txt",
"chars": 271,
"preview": "cmake_minimum_required(VERSION 3.13)\n# Define the library name here.\nproject(rndiffapp_appmodules)\n# This file includes "
},
{
"path": "android/app/src/main/jni/MainApplicationModuleProvider.cpp",
"chars": 960,
"preview": "#include \"MainApplicationModuleProvider.h\"\n\n#include <rncli.h>\n#include <rncore.h>\n\nnamespace facebook {\nnamespace react"
},
{
"path": "android/app/src/main/jni/MainApplicationModuleProvider.h",
"chars": 322,
"preview": "#pragma once\n\n#include <memory>\n#include <string>\n\n#include <ReactCommon/JavaTurboModule.h>\n\nnamespace facebook {\nnamesp"
},
{
"path": "android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp",
"chars": 1406,
"preview": "#include \"MainApplicationTurboModuleManagerDelegate.h\"\n#include \"MainApplicationModuleProvider.h\"\n\nnamespace facebook {\n"
},
{
"path": "android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h",
"chars": 1149,
"preview": "#include <memory>\n#include <string>\n\n#include <ReactCommon/TurboModuleManagerDelegate.h>\n#include <fbjni/fbjni.h>\n\nnames"
},
{
"path": "android/app/src/main/jni/MainComponentsRegistry.cpp",
"chars": 2164,
"preview": "#include \"MainComponentsRegistry.h\"\n\n#include <CoreComponentsRegistry.h>\n#include <fbjni/fbjni.h>\n#include <react/render"
},
{
"path": "android/app/src/main/jni/MainComponentsRegistry.h",
"chars": 903,
"preview": "#pragma once\n\n#include <ComponentFactory.h>\n#include <fbjni/fbjni.h>\n#include <react/renderer/componentregistry/Componen"
},
{
"path": "android/app/src/main/jni/OnLoad.cpp",
"chars": 381,
"preview": "#include <fbjni/fbjni.h>\n#include \"MainApplicationTurboModuleManagerDelegate.h\"\n#include \"MainComponentsRegistry.h\"\n\nJNI"
},
{
"path": "android/app/src/main/res/drawable/rn_edit_text_material.xml",
"chars": 1910,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- Copyright (C) 2014 The Android Open Source Project\n\n Licensed under the "
},
{
"path": "android/app/src/main/res/values/strings.xml",
"chars": 69,
"preview": "<resources>\n <string name=\"app_name\">RNMail</string>\n</resources>\n"
},
{
"path": "android/app/src/main/res/values/styles.xml",
"chars": 282,
"preview": "<resources>\n\n <!-- Base application theme. -->\n <style name=\"AppTheme\" parent=\"Theme.AppCompat.DayNight.NoActionBa"
},
{
"path": "android/build.gradle",
"chars": 1720,
"preview": "import org.apache.tools.ant.taskdefs.condition.Os\n\n// Top-level build file where you can add configuration options commo"
},
{
"path": "android/gradle/wrapper/gradle-wrapper.properties",
"chars": 202,
"preview": "distributionBase=GRADLE_USER_HOME\ndistributionPath=wrapper/dists\ndistributionUrl=https\\://services.gradle.org/distributi"
},
{
"path": "android/gradle.properties",
"chars": 1769,
"preview": "# Project-wide Gradle settings.\n\n# IDE (e.g. Android Studio) users:\n# Gradle settings configured through the IDE *will o"
},
{
"path": "android/gradlew",
"chars": 8047,
"preview": "#!/bin/sh\n\n#\n# Copyright © 2015-2021 the original authors.\n#\n# Licensed under the Apache License, Version 2.0 (the \"Lice"
},
{
"path": "android/gradlew.bat",
"chars": 2763,
"preview": "@rem\r\n@rem Copyright 2015 the original author or authors.\r\n@rem\r\n@rem Licensed under the Apache License, Version 2.0 (th"
},
{
"path": "android/settings.gradle",
"chars": 619,
"preview": "rootProject.name = 'RNMail'\napply from: file(\"../node_modules/@react-native-community/cli-platform-android/native_module"
},
{
"path": "app.json",
"chars": 49,
"preview": "{\n \"name\": \"RNMail\",\n \"displayName\": \"RNMail\"\n}"
},
{
"path": "babel.config.js",
"chars": 261,
"preview": "module.exports = {\n presets: ['module:metro-react-native-babel-preset'],\n plugins: [\n [\n 'module-resolver',\n "
},
{
"path": "declarations.d.ts",
"chars": 134,
"preview": "declare module '*.svg' {\n import { SvgProps } from 'react-native-svg'\n const content: React.FC<SvgProps>\n export defa"
},
{
"path": "index.js",
"chars": 225,
"preview": "/**\n * @format\n */\n\nimport 'react-native-gesture-handler'\nimport { AppRegistry } from 'react-native'\nimport App from './"
},
{
"path": "ios/Podfile",
"chars": 1446,
"preview": "require_relative '../node_modules/react-native/scripts/react_native_pods'\nrequire_relative '../node_modules/@react-nativ"
},
{
"path": "ios/RNMail/AppDelegate.h",
"chars": 196,
"preview": "#import <React/RCTBridgeDelegate.h>\n#import <UIKit/UIKit.h>\n\n@interface AppDelegate : UIResponder <UIApplicationDelegate"
},
{
"path": "ios/RNMail/AppDelegate.mm",
"chars": 4440,
"preview": "#import \"AppDelegate.h\"\n\n#import <React/RCTBridge.h>\n#import <React/RCTBundleURLProvider.h>\n#import <React/RCTRootView.h"
},
{
"path": "ios/RNMail/Images.xcassets/AppIcon.appiconset/Contents.json",
"chars": 849,
"preview": "{\n \"images\" : [\n {\n \"idiom\" : \"iphone\",\n \"scale\" : \"2x\",\n \"size\" : \"20x20\"\n },\n {\n \"idiom\""
},
{
"path": "ios/RNMail/Images.xcassets/Contents.json",
"chars": 63,
"preview": "{\n \"info\" : {\n \"version\" : 1,\n \"author\" : \"xcode\"\n }\n}\n"
},
{
"path": "ios/RNMail/Info.plist",
"chars": 1679,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "ios/RNMail/LaunchScreen.storyboard",
"chars": 4230,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<document type=\"com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB\" version=\"3"
},
{
"path": "ios/RNMail/main.m",
"chars": 199,
"preview": "#import <UIKit/UIKit.h>\n\n#import \"AppDelegate.h\"\n\nint main(int argc, char *argv[])\n{\n @autoreleasepool {\n return UIA"
},
{
"path": "ios/RNMail.xcodeproj/project.pbxproj",
"chars": 28870,
"preview": "// !$*UTF8*$!\n{\n\tarchiveVersion = 1;\n\tclasses = {\n\t};\n\tobjectVersion = 54;\n\tobjects = {\n\n/* Begin PBXBuildFile section *"
},
{
"path": "ios/RNMail.xcodeproj/xcshareddata/xcschemes/RNMail.xcscheme",
"chars": 3258,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n LastUpgradeVersion = \"1210\"\n version = \"1.3\">\n <BuildAction\n "
},
{
"path": "ios/RNMail.xcworkspace/contents.xcworkspacedata",
"chars": 224,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Workspace\n version = \"1.0\">\n <FileRef\n location = \"group:RNMail.xcodepr"
},
{
"path": "ios/RNMail.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist",
"chars": 238,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "ios/RNMailTests/Info.plist",
"chars": 733,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/P"
},
{
"path": "ios/RNMailTests/RNMailTests.m",
"chars": 1988,
"preview": "#import <UIKit/UIKit.h>\n#import <XCTest/XCTest.h>\n\n#import <React/RCTLog.h>\n#import <React/RCTRootView.h>\n\n#define TIMEO"
},
{
"path": "metro.config.js",
"chars": 675,
"preview": "/**\n * Metro configuration for React Native\n * https://github.com/facebook/react-native\n *\n * @format\n */\nconst {getDefa"
},
{
"path": "package.json",
"chars": 1981,
"preview": "{\n \"name\": \"inkdrop-ui-mockup\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"license\": \"Apache-2.0\",\n \"author\": \"Takuya"
},
{
"path": "prettier.config.js",
"chars": 187,
"preview": "const options = {\n arrowParens: 'avoid',\n singleQuote: true,\n bracketSpacing: true,\n endOfLine: 'lf',\n semi: false,"
},
{
"path": "src/app.tsx",
"chars": 571,
"preview": "import React from 'react'\nimport { NavigationContainer } from '@react-navigation/native'\nimport Navigations from './navs"
},
{
"path": "src/atoms/animated-box.ts",
"chars": 393,
"preview": "import * as React from 'react'\nimport { Theme } from '@/themes'\nimport { ViewProps } from 'react-native'\nimport Animated"
},
{
"path": "src/atoms/bar.ts",
"chars": 331,
"preview": "import { Theme } from '@/themes'\nimport {\n createRestyleComponent,\n createVariant,\n VariantProps\n} from '@shopify/res"
},
{
"path": "src/atoms/bottom-sheet.tsx",
"chars": 731,
"preview": "import { Theme } from '@/themes'\nimport RNBottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet'\nimport { ColorPr"
},
{
"path": "src/atoms/box.ts",
"chars": 186,
"preview": "import { Theme } from '@/themes'\nimport { createBox } from '@shopify/restyle'\n\nconst Box = createBox<Theme>()\nexport typ"
},
{
"path": "src/atoms/container.tsx",
"chars": 359,
"preview": "import * as React from 'react'\nimport { BoxProps } from '@shopify/restyle'\nimport { Theme } from '@/themes'\nimport Box f"
},
{
"path": "src/atoms/index.ts",
"chars": 515,
"preview": "import Box from './box'\nimport Text from './text'\nimport TextInput from './text-input'\nimport Container from './containe"
},
{
"path": "src/atoms/pressable.ts",
"chars": 351,
"preview": "import {\n Pressable as NativePressable,\n PressableProps as NativePressableProps\n} from 'react-native'\nimport { Theme }"
},
{
"path": "src/atoms/safe-area-view.ts",
"chars": 328,
"preview": "import { Theme } from '@/themes'\nimport { SafeAreaView as NativeSafeAreaView, ViewProps } from 'react-native'\nimport { c"
},
{
"path": "src/atoms/scroll-view.ts",
"chars": 361,
"preview": "import { Theme } from '@/themes'\nimport {\n ScrollView as NativeScrollView,\n ScrollViewProps as NativeScrollViewProps\n}"
},
{
"path": "src/atoms/text-input.tsx",
"chars": 1726,
"preview": "import { Theme } from '@/themes'\nimport React, { forwardRef } from 'react'\nimport {\n ColorProps,\n useRestyle,\n spacin"
},
{
"path": "src/atoms/text.ts",
"chars": 134,
"preview": "import { Theme } from '@/themes'\nimport { createText } from '@shopify/restyle'\n\nconst Text = createText<Theme>()\n\nexport"
},
{
"path": "src/atoms/touchable.tsx",
"chars": 1768,
"preview": "import React from 'react'\nimport Pressable, { PressableProps } from './pressable'\nimport { Platform, StyleProp, ViewStyl"
},
{
"path": "src/components/book-list-item.tsx",
"chars": 752,
"preview": "import { Text, TouchableOpacity } from '@/atoms'\nimport { Book } from '@/models'\nimport { Theme } from '@/themes'\nimport"
},
{
"path": "src/components/book-list.tsx",
"chars": 1351,
"preview": "import { Book } from '@/models'\nimport { Theme } from '@/themes'\nimport { BottomSheetFlatList } from '@gorhom/bottom-she"
},
{
"path": "src/components/header-bar-left-button.tsx",
"chars": 1749,
"preview": "import React from 'react'\nimport { AnimatedBox, Box, TouchableOpacity } from '@/atoms'\nimport { AnimatedBoxProps } from "
},
{
"path": "src/components/header-bar.tsx",
"chars": 3467,
"preview": "import React, { useCallback, useRef } from 'react'\nimport { TextInput as RNTextInput } from 'react-native'\nimport { Text"
},
{
"path": "src/components/icon.tsx",
"chars": 608,
"preview": "import { Theme } from '@/themes'\nimport { ColorProps, useResponsiveProp, useTheme } from '@shopify/restyle'\nimport * as "
},
{
"path": "src/components/inkdrop-logo.tsx",
"chars": 578,
"preview": "import React from 'react'\nimport LogoSVG from '@/images/inkdrop-logo.svg'\nimport { Theme } from '@/themes'\nimport { Colo"
},
{
"path": "src/components/move-note-sheet.tsx",
"chars": 1851,
"preview": "import React, {\n forwardRef,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef\n} from 'react'\nimport RNBottomSh"
},
{
"path": "src/components/navbar.tsx",
"chars": 550,
"preview": "import * as React from 'react'\nimport { Box, SafeAreaView } from '@/atoms'\nimport { StyleSheet } from 'react-native'\n\nin"
},
{
"path": "src/components/note-list-header-title-bar.tsx",
"chars": 558,
"preview": "import * as React from 'react'\nimport { Box, Text } from '@/atoms'\n\ntype Props = {}\n\nconst NoteListHeaderTitleBar = (_pr"
},
{
"path": "src/components/note-list-item-action-view.tsx",
"chars": 934,
"preview": "import { AnimatedBox, Box } from '@/atoms'\nimport React from 'react'\nimport { SharedValue, useAnimatedStyle } from 'reac"
},
{
"path": "src/components/note-list-item.tsx",
"chars": 1638,
"preview": "import { Box, Text, TouchableOpacity } from '@/atoms'\nimport { Note } from '@/models'\nimport React, { memo, useCallback "
},
{
"path": "src/components/note-list.tsx",
"chars": 1708,
"preview": "import React, { useCallback } from 'react'\nimport { Theme } from '@/themes'\nimport { createBox } from '@shopify/restyle'"
},
{
"path": "src/components/responsive-layout.tsx",
"chars": 995,
"preview": "import useResponsiveLayout from '@/hooks/use-responsive-layout'\nimport React, { ReactElement } from 'react'\nimport { use"
},
{
"path": "src/components/sidebar.tsx",
"chars": 1973,
"preview": "import { Box, Text } from '@/atoms'\nimport activeThemeId from '@/states/theme'\nimport { Theme, ThemeMeta, ThemeNames, th"
},
{
"path": "src/components/status-bar.tsx",
"chars": 418,
"preview": "import { Theme } from '@/themes'\nimport { useTheme } from '@shopify/restyle'\nimport * as React from 'react'\nimport { Sta"
},
{
"path": "src/components/swipeable-view.tsx",
"chars": 2930,
"preview": "import { Box } from '@/atoms'\nimport AnimatedBox, { AnimatedBoxProps } from '@/atoms/animated-box'\nimport React, { forwa"
},
{
"path": "src/components/theme-list-item.tsx",
"chars": 1107,
"preview": "import { Box, Text, TouchableOpacity } from '@/atoms'\nimport activeThemeId from '@/states/theme'\nimport { ThemeMeta, The"
},
{
"path": "src/components/three-column-layout.tsx",
"chars": 3380,
"preview": "import * as React from 'react'\nimport { memo, useCallback, useEffect, useRef } from 'react'\nimport { Animated, View, Sty"
},
{
"path": "src/consts.ts",
"chars": 49,
"preview": "export const RESPONSIVE_SCREEN_BREAKPOINT = 1024\n"
},
{
"path": "src/fixtures/books.ts",
"chars": 526,
"preview": "import { Book } from '@/models'\nimport { LoremIpsum } from 'lorem-ipsum'\nimport shortid from 'shortid'\n\nconst DATA: Arra"
},
{
"path": "src/fixtures/notes.ts",
"chars": 689,
"preview": "import { Note } from '@/models'\nimport { LoremIpsum } from 'lorem-ipsum'\nimport shortid from 'shortid'\n\nconst DATA: Arra"
},
{
"path": "src/hooks/use-drawer-enabled.ts",
"chars": 430,
"preview": "import { searchInputHasFocusAtom } from '@/states/search-bar'\nimport { useAtom } from 'jotai'\nimport useResponsiveLayout"
},
{
"path": "src/hooks/use-responsive-layout.ts",
"chars": 446,
"preview": "import { useWindowDimensions } from 'react-native'\nimport { RESPONSIVE_SCREEN_BREAKPOINT } from '@/consts'\n\nconst useRes"
},
{
"path": "src/hooks/use-sticky-header.ts",
"chars": 2062,
"preview": "import { useCallback, useState } from 'react'\nimport { LayoutChangeEvent, NativeScrollEvent } from 'react-native'\nimport"
},
{
"path": "src/models.ts",
"chars": 125,
"preview": "export interface Note {\n id: string\n title: string\n body: string\n}\n\nexport interface Book {\n id: string\n name: stri"
},
{
"path": "src/navs.tsx",
"chars": 1789,
"preview": "import { createDrawerNavigator } from '@react-navigation/drawer'\nimport { NavigatorScreenParams } from '@react-navigatio"
},
{
"path": "src/screens/detail-phone.tsx",
"chars": 848,
"preview": "import React, { useCallback } from 'react'\nimport DetailScreen from './detail'\nimport FeatherIcon from '@/components/ico"
},
{
"path": "src/screens/detail-tablet.tsx",
"chars": 874,
"preview": "import React from 'react'\nimport { ThreeColumnLayoutProps } from 'react-native-three-column-layout'\nimport DetailScreen "
},
{
"path": "src/screens/detail.tsx",
"chars": 1005,
"preview": "import React, { ReactNode } from 'react'\nimport { Box, Container, ScrollView, Text } from '@/atoms'\nimport Navbar from '"
},
{
"path": "src/screens/main-phone.tsx",
"chars": 607,
"preview": "import { HomeDrawerParamList, RootStackParamList } from '@/navs'\nimport { DrawerScreenProps } from '@react-navigation/dr"
},
{
"path": "src/screens/main-tablet.tsx",
"chars": 1787,
"preview": "import Sidebar from '@/components/sidebar'\nimport ThreeColumnLayout from 'react-native-three-column-layout'\nimport useRe"
},
{
"path": "src/screens/main.tsx",
"chars": 878,
"preview": "import { Container } from '@/atoms'\nimport ResponsiveLayout from '@/components/responsive-layout'\nimport { HomeDrawerPar"
},
{
"path": "src/screens/note-list-phone.tsx",
"chars": 1135,
"preview": "import { HomeDrawerParamList, RootStackParamList } from '@/navs'\nimport { editingNoteIdAtom } from '@/states/editor'\nimp"
},
{
"path": "src/screens/note-list-tablet.tsx",
"chars": 1377,
"preview": "import React, { memo, useCallback } from 'react'\nimport NoteListScreen from './note-list'\nimport useResponsiveLayout fro"
},
{
"path": "src/screens/note-list.tsx",
"chars": 1921,
"preview": "import React, { useCallback, useRef, useState } from 'react'\nimport { Container } from '@/atoms'\nimport NoteList, { Prop"
},
{
"path": "src/states/editor.ts",
"chars": 106,
"preview": "import { atom } from 'jotai'\n\nexport const editingNoteIdAtom = atom<string | null | undefined>(undefined)\n"
},
{
"path": "src/states/search-bar.ts",
"chars": 138,
"preview": "import { atom } from 'jotai'\n\nexport const searchQueryAtom = atom<string>('')\nexport const searchInputHasFocusAtom = ato"
},
{
"path": "src/states/theme.ts",
"chars": 417,
"preview": "import { Theme, ThemeNames, themes } from '@/themes'\nimport { atom } from 'jotai'\n\nconst activeThemeId = atom<ThemeNames"
},
{
"path": "src/themes/dark.ts",
"chars": 1270,
"preview": "import { createTheme } from '@shopify/restyle'\nimport { StatusBarStyle } from 'react-native'\nimport light, { Theme } fro"
},
{
"path": "src/themes/index.ts",
"chars": 640,
"preview": "import light, { Theme } from './light'\nimport dark from './dark'\nimport nord from './nord'\nimport solarizedDark from './"
},
{
"path": "src/themes/light.ts",
"chars": 1627,
"preview": "import { createTheme } from '@shopify/restyle'\nimport { StatusBarStyle } from 'react-native'\n\n// Palette\nconst p = {\n w"
},
{
"path": "src/themes/nord.ts",
"chars": 1243,
"preview": "import { createTheme } from '@shopify/restyle'\nimport { StatusBarStyle } from 'react-native'\nimport light, { Theme } fro"
},
{
"path": "src/themes/solarized-dark.ts",
"chars": 1341,
"preview": "import { createTheme } from '@shopify/restyle'\nimport { StatusBarStyle } from 'react-native'\nimport light, { Theme } fro"
},
{
"path": "tsconfig.json",
"chars": 11136,
"preview": "// prettier-ignore\n{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig.json to read more about this file */\n\n "
}
]
// ... and 2 more files (download for full content)
About this extraction
This page contains the full source code of the craftzdog/inkdrop-ui-mockup-react-native GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 119 files (191.5 KB), approximately 52.9k tokens, and a symbol index with 111 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.