├── .buckconfig
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── Gemfile
├── 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
│ │ │ └── reactnativecomponents
│ │ │ └── ReactNativeFlipper.java
│ │ └── main
│ │ ├── AndroidManifest.xml
│ │ ├── assets
│ │ └── fonts
│ │ │ └── MrRobot.otf
│ │ ├── java
│ │ └── com
│ │ │ └── reactnativecomponents
│ │ │ ├── MainActivity.java
│ │ │ ├── MainApplication.java
│ │ │ └── newarchitecture
│ │ │ ├── MainApplicationReactNativeHost.java
│ │ │ ├── components
│ │ │ └── MainComponentsRegistry.java
│ │ │ └── modules
│ │ │ └── MainApplicationTurboModuleManagerDelegate.java
│ │ ├── jni
│ │ ├── CMakeLists.txt
│ │ ├── MainApplicationModuleProvider.cpp
│ │ ├── MainApplicationModuleProvider.h
│ │ ├── MainApplicationTurboModuleManagerDelegate.cpp
│ │ ├── MainApplicationTurboModuleManagerDelegate.h
│ │ ├── MainComponentsRegistry.cpp
│ │ ├── MainComponentsRegistry.h
│ │ └── OnLoad.cpp
│ │ └── res
│ │ ├── drawable
│ │ └── rn_edit_text_material.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ └── values
│ │ ├── strings.xml
│ │ └── styles.xml
├── build.gradle
├── gradle.properties
├── gradle
│ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── link-assets-manifest.json
└── settings.gradle
├── app.json
├── babel.config.js
├── index.js
├── ios
├── .xcode.env
├── Podfile
├── Podfile.lock
├── link-assets-manifest.json
├── reactNativeComponents.xcodeproj
│ ├── project.pbxproj
│ └── xcshareddata
│ │ └── xcschemes
│ │ └── reactNativeComponents.xcscheme
├── reactNativeComponents.xcworkspace
│ └── contents.xcworkspacedata
├── reactNativeComponents
│ ├── AppDelegate.h
│ ├── AppDelegate.mm
│ ├── Images.xcassets
│ │ ├── AppIcon.appiconset
│ │ │ └── Contents.json
│ │ └── Contents.json
│ ├── Info.plist
│ ├── LaunchScreen.storyboard
│ └── main.m
└── reactNativeComponentsTests
│ ├── Info.plist
│ └── reactNativeComponentsTests.m
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
├── src
├── assets
│ ├── bouncing-fruits.json
│ ├── fonts
│ │ └── MrRobot.otf
│ └── slides
│ │ ├── slide-1.png
│ │ ├── slide-2.png
│ │ └── slide-3.png
├── components
│ ├── Badge.tsx
│ ├── ButtonIcon.tsx
│ ├── CustomSwitch.tsx
│ ├── FadeInImage.tsx
│ ├── FlatListMenuItem.tsx
│ ├── ItemDivider.tsx
│ ├── PullRefreshControl.tsx
│ ├── Spacer.tsx
│ └── TitleHeader.tsx
├── context
│ └── theme
│ │ ├── ThemeContext.tsx
│ │ └── themeReducer.tsx
├── data
│ ├── menuItems.tsx
│ └── strings.tsx
├── hooks
│ ├── useAnimated.tsx
│ ├── useForm.tsx
│ └── useRefresh.tsx
├── interfaces
│ └── FlatListMenuItem.tsx
├── navigator
│ ├── HeaderLeft.tsx
│ ├── StackNavigator.tsx
│ └── types.tsx
├── screens
│ ├── AlertScreen.tsx
│ ├── Animation101Screen.tsx
│ ├── Animation102Screen.tsx
│ ├── HomeScreen.tsx
│ ├── InfiniteScrollScreen.tsx
│ ├── ModalScreen.tsx
│ ├── PullRefreshScreen.tsx
│ ├── SectionListScreen.tsx
│ ├── SliderScreen.tsx
│ ├── SwitchScreen.tsx
│ ├── TextInputScreen.tsx
│ ├── ThemeScreen.tsx
│ └── index.ts
└── theme
│ └── appTheme.tsx
├── tsconfig.json
└── yarn.lock
/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Windows files
2 | [*.bat]
3 | end_of_line = crlf
4 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: '@react-native-community',
4 | };
5 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Windows files should use crlf line endings
2 | # https://help.github.com/articles/dealing-with-line-endings/
3 | *.bat text eol=crlf
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 |
24 | # Android/IntelliJ
25 | #
26 | build/
27 | .idea
28 | .gradle
29 | local.properties
30 | *.iml
31 | *.hprof
32 |
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | !debug.keystore
44 |
45 | # fastlane
46 | #
47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
48 | # screenshots whenever they are needed.
49 | # For more information about the recommended setup visit:
50 | # https://docs.fastlane.tools/best-practices/source-control/
51 |
52 | */fastlane/report.xml
53 | */fastlane/Preview.html
54 | */fastlane/screenshots
55 |
56 | # Bundle artifact
57 | *.jsbundle
58 |
59 | # CocoaPods
60 | /ios/Pods/
61 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | bracketSpacing: false,
3 | jsxBracketSameLine: true,
4 | singleQuote: true,
5 | trailingComma: 'all',
6 | arrowParens: 'avoid',
7 | };
8 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
1 | import 'react-native-gesture-handler';
2 | import React from 'react'
3 | import { StackNavigator } from './src/navigator/StackNavigator';
4 | import { ThemeProvider } from './src/context/theme/ThemeContext';
5 |
6 | const App = () => {
7 | return (
8 |
9 |
10 |
11 | )
12 | }
13 |
14 | const AppState = ({children}:any) => {
15 | return(
16 |
17 | {children}
18 |
19 | )
20 | }
21 |
22 | export default App
23 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4 | ruby '2.7.5'
5 |
6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2'
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ⚛️ React Native Components (Updated)
2 |
3 | This project was created with [React Native CLI](https://reactnative.dev/) and [TypeScript](https://www.typescriptlang.org/) template.
4 |
5 |
7 |
8 | ## 1. Description
9 | This project it's a new practical React Native App (CLI) with plenty components and functionality:
10 | - react native v0.70.5
11 | - [stack-navigator](https://reactnavigation.org/docs/stack-navigator/) - (to make transitions between screens)
12 | - [react-native-image-colors](https://github.com/osamaqarem/react-native-image-colors) - (to get primary colors from an image)
13 | - [react-native-elements](https://reactnativeelements.com/) - (UI Toolkit for RN apps)
14 | - [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - (UI buttons and logos)
15 | - [react-native-prompt-android](https://github.com/shimohq/react-native-prompt-android#readme) - (To show prompt in Android and iOS platform)
16 | - [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) - (Library for parsing animations as JSON with real rendering)
17 | - [react-native-community/slider](https://github.com/callstack/react-native-slider) - (Component used to select a single value from a range of values)
18 | - More things: Custom hooks, components, helpers, interfaces, navigator, etc, etc.
19 |
20 |
21 | ## 2. Theme App
22 |
For this app, you'll find context use to set light and black theme generally. I recommend read the next article to have more idea about it:
23 |
24 | - [react-native-state-management-with-context-api](https://blog.devgenius.io/react-native-state-management-with-context-api-61f63f5b099) - (React Native state management with Context API)
25 |
26 |
27 | ## 3. Available Scripts
28 |
29 |
30 | The project has been tested on Android device
31 |
32 |
33 |
34 |
35 |
36 | In the project directory, you can run special commands like these:
37 |
38 | To install dependencies
39 |
40 |
41 | $ npm install | $ yarn install
42 | $ npx react-native run-android
43 | $ npx react-native run-ios (iOS)
44 |
45 | $ cd project/ios/ and run $ pod install
46 |
47 |
48 |
49 | To start the development server (Metro Bundler)
50 |
51 | $ npx react-native start
52 |
53 |
54 | ## 4. Notice
55 |
56 |
57 | Developed by Parterdev
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/__tests__/App-test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @format
3 | */
4 |
5 | import 'react-native';
6 | import React from 'react';
7 | import App from '../App';
8 |
9 | // Note: test renderer must be required after react-native.
10 | import renderer from 'react-test-renderer';
11 |
12 | it('renders correctly', () => {
13 | renderer.create( );
14 | });
15 |
--------------------------------------------------------------------------------
/android/app/_BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
12 |
13 | lib_deps = []
14 |
15 | create_aar_targets(glob(["libs/*.aar"]))
16 |
17 | create_jar_targets(glob(["libs/*.jar"]))
18 |
19 | android_library(
20 | name = "all-libs",
21 | exported_deps = lib_deps,
22 | )
23 |
24 | android_library(
25 | name = "app-code",
26 | srcs = glob([
27 | "src/main/java/**/*.java",
28 | ]),
29 | deps = [
30 | ":all-libs",
31 | ":build_config",
32 | ":res",
33 | ],
34 | )
35 |
36 | android_build_config(
37 | name = "build_config",
38 | package = "com.reactnativecomponents",
39 | )
40 |
41 | android_resource(
42 | name = "res",
43 | package = "com.reactnativecomponents",
44 | res = "src/main/res",
45 | )
46 |
47 | android_binary(
48 | name = "app",
49 | keystore = "//android/keystores:debug",
50 | manifest = "src/main/AndroidManifest.xml",
51 | package_type = "debug",
52 | deps = [
53 | ":app-code",
54 | ],
55 | )
56 |
--------------------------------------------------------------------------------
/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 | apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
3 |
4 | project.ext.vectoricons = [
5 | iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to copy
6 | ]
7 |
8 | import com.android.build.OutputFile
9 | import org.apache.tools.ant.taskdefs.condition.Os
10 |
11 | /**
12 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
13 | * and bundleReleaseJsAndAssets).
14 | * These basically call `react-native bundle` with the correct arguments during the Android build
15 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
16 | * bundle directly from the development server. Below you can see all the possible configurations
17 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
18 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
19 | *
20 | * project.ext.react = [
21 | * // the name of the generated asset file containing your JS bundle
22 | * bundleAssetName: "index.android.bundle",
23 | *
24 | * // the entry file for bundle generation. If none specified and
25 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is
26 | * // default. Can be overridden with ENTRY_FILE environment variable.
27 | * entryFile: "index.android.js",
28 | *
29 | * // https://reactnative.dev/docs/performance#enable-the-ram-format
30 | * bundleCommand: "ram-bundle",
31 | *
32 | * // whether to bundle JS and assets in debug mode
33 | * bundleInDebug: false,
34 | *
35 | * // whether to bundle JS and assets in release mode
36 | * bundleInRelease: true,
37 | *
38 | * // whether to bundle JS and assets in another build variant (if configured).
39 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
40 | * // The configuration property can be in the following formats
41 | * // 'bundleIn${productFlavor}${buildType}'
42 | * // 'bundleIn${buildType}'
43 | * // bundleInFreeDebug: true,
44 | * // bundleInPaidRelease: true,
45 | * // bundleInBeta: true,
46 | *
47 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
48 | * // for example: to disable dev mode in the staging build type (if configured)
49 | * devDisabledInStaging: true,
50 | * // The configuration property can be in the following formats
51 | * // 'devDisabledIn${productFlavor}${buildType}'
52 | * // 'devDisabledIn${buildType}'
53 | *
54 | * // the root of your project, i.e. where "package.json" lives
55 | * root: "../../",
56 | *
57 | * // where to put the JS bundle asset in debug mode
58 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
59 | *
60 | * // where to put the JS bundle asset in release mode
61 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
62 | *
63 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
64 | * // require('./image.png')), in debug mode
65 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
66 | *
67 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
68 | * // require('./image.png')), in release mode
69 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
70 | *
71 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
72 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
73 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
74 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
75 | * // for example, you might want to remove it from here.
76 | * inputExcludes: ["android/**", "ios/**"],
77 | *
78 | * // override which node gets called and with what additional arguments
79 | * nodeExecutableAndArgs: ["node"],
80 | *
81 | * // supply additional arguments to the packager
82 | * extraPackagerArgs: []
83 | * ]
84 | */
85 |
86 | project.ext.react = [
87 | enableHermes: true, // clean and rebuild if changing
88 | ]
89 |
90 | apply from: "../../node_modules/react-native/react.gradle"
91 |
92 | /**
93 | * Set this to true to create two separate APKs instead of one:
94 | * - An APK that only works on ARM devices
95 | * - An APK that only works on x86 devices
96 | * The advantage is the size of the APK is reduced by about 4MB.
97 | * Upload all the APKs to the Play Store and people will download
98 | * the correct one based on the CPU architecture of their device.
99 | */
100 | def enableSeparateBuildPerCPUArchitecture = false
101 |
102 | /**
103 | * Run Proguard to shrink the Java bytecode in release builds.
104 | */
105 | def enableProguardInReleaseBuilds = false
106 |
107 | /**
108 | * The preferred build flavor of JavaScriptCore.
109 | *
110 | * For example, to use the international variant, you can use:
111 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
112 | *
113 | * The international variant includes ICU i18n library and necessary data
114 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
115 | * give correct results when using with locales other than en-US. Note that
116 | * this variant is about 6MiB larger per architecture than default.
117 | */
118 | def jscFlavor = 'org.webkit:android-jsc:+'
119 |
120 | /**
121 | * Whether to enable the Hermes VM.
122 | *
123 | * This should be set on project.ext.react and that value will be read here. If it is not set
124 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
125 | * and the benefits of using Hermes will therefore be sharply reduced.
126 | */
127 | def enableHermes = project.ext.react.get("enableHermes", false);
128 |
129 | /**
130 | * Architectures to build native code for.
131 | */
132 | def reactNativeArchitectures() {
133 | def value = project.getProperties().get("reactNativeArchitectures")
134 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
135 | }
136 |
137 | android {
138 | ndkVersion rootProject.ext.ndkVersion
139 |
140 | compileSdkVersion rootProject.ext.compileSdkVersion
141 |
142 | defaultConfig {
143 | applicationId "com.reactnativecomponents"
144 | minSdkVersion rootProject.ext.minSdkVersion
145 | targetSdkVersion rootProject.ext.targetSdkVersion
146 | versionCode 1
147 | versionName "1.0"
148 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
149 |
150 | if (isNewArchitectureEnabled()) {
151 | // We configure the CMake build only if you decide to opt-in for the New Architecture.
152 | externalNativeBuild {
153 | cmake {
154 | arguments "-DPROJECT_BUILD_DIR=$buildDir",
155 | "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
156 | "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
157 | "-DNODE_MODULES_DIR=$rootDir/../node_modules",
158 | "-DANDROID_STL=c++_shared"
159 | }
160 | }
161 | if (!enableSeparateBuildPerCPUArchitecture) {
162 | ndk {
163 | abiFilters (*reactNativeArchitectures())
164 | }
165 | }
166 | }
167 | }
168 |
169 | if (isNewArchitectureEnabled()) {
170 | // We configure the NDK build only if you decide to opt-in for the New Architecture.
171 | externalNativeBuild {
172 | cmake {
173 | path "$projectDir/src/main/jni/CMakeLists.txt"
174 | }
175 | }
176 | def reactAndroidProjectDir = project(':ReactAndroid').projectDir
177 | def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) {
178 | dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck")
179 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
180 | into("$buildDir/react-ndk/exported")
181 | }
182 | def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) {
183 | dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck")
184 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
185 | into("$buildDir/react-ndk/exported")
186 | }
187 | afterEvaluate {
188 | // If you wish to add a custom TurboModule or component locally,
189 | // you should uncomment this line.
190 | // preBuild.dependsOn("generateCodegenArtifactsFromSchema")
191 | preDebugBuild.dependsOn(packageReactNdkDebugLibs)
192 | preReleaseBuild.dependsOn(packageReactNdkReleaseLibs)
193 |
194 | // Due to a bug inside AGP, we have to explicitly set a dependency
195 | // between configureCMakeDebug* tasks and the preBuild tasks.
196 | // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732
197 | configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
198 | configureCMakeDebug.dependsOn(preDebugBuild)
199 | reactNativeArchitectures().each { architecture ->
200 | tasks.findByName("configureCMakeDebug[${architecture}]")?.configure {
201 | dependsOn("preDebugBuild")
202 | }
203 | tasks.findByName("configureCMakeRelWithDebInfo[${architecture}]")?.configure {
204 | dependsOn("preReleaseBuild")
205 | }
206 | }
207 | }
208 | }
209 |
210 | splits {
211 | abi {
212 | reset()
213 | enable enableSeparateBuildPerCPUArchitecture
214 | universalApk false // If true, also generate a universal APK
215 | include (*reactNativeArchitectures())
216 | }
217 | }
218 | signingConfigs {
219 | debug {
220 | storeFile file('debug.keystore')
221 | storePassword 'android'
222 | keyAlias 'androiddebugkey'
223 | keyPassword 'android'
224 | }
225 | }
226 | buildTypes {
227 | debug {
228 | signingConfig signingConfigs.debug
229 | }
230 | release {
231 | // Caution! In production, you need to generate your own keystore file.
232 | // see https://reactnative.dev/docs/signed-apk-android.
233 | signingConfig signingConfigs.debug
234 | minifyEnabled enableProguardInReleaseBuilds
235 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
236 | }
237 | }
238 |
239 | // applicationVariants are e.g. debug, release
240 | applicationVariants.all { variant ->
241 | variant.outputs.each { output ->
242 | // For each separate APK per architecture, set a unique version code as described here:
243 | // https://developer.android.com/studio/build/configure-apk-splits.html
244 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
245 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
246 | def abi = output.getFilter(OutputFile.ABI)
247 | if (abi != null) { // null for the universal-debug, universal-release variants
248 | output.versionCodeOverride =
249 | defaultConfig.versionCode * 1000 + versionCodes.get(abi)
250 | }
251 |
252 | }
253 | }
254 | }
255 |
256 | dependencies {
257 | implementation fileTree(dir: "libs", include: ["*.jar"])
258 |
259 | //noinspection GradleDynamicVersion
260 | implementation "com.facebook.react:react-native:+" // From node_modules
261 |
262 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
263 |
264 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
265 | exclude group:'com.facebook.fbjni'
266 | }
267 |
268 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
269 | exclude group:'com.facebook.flipper'
270 | exclude group:'com.squareup.okhttp3', module:'okhttp'
271 | }
272 |
273 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
274 | exclude group:'com.facebook.flipper'
275 | }
276 |
277 | if (enableHermes) {
278 | //noinspection GradleDynamicVersion
279 | implementation("com.facebook.react:hermes-engine:+") { // From node_modules
280 | exclude group:'com.facebook.fbjni'
281 | }
282 | } else {
283 | implementation jscFlavor
284 | }
285 | }
286 |
287 | if (isNewArchitectureEnabled()) {
288 | // If new architecture is enabled, we let you build RN from source
289 | // Otherwise we fallback to a prebuilt .aar bundled in the NPM package.
290 | // This will be applied to all the imported transtitive dependency.
291 | configurations.all {
292 | resolutionStrategy.dependencySubstitution {
293 | substitute(module("com.facebook.react:react-native"))
294 | .using(project(":ReactAndroid"))
295 | .because("On New Architecture we're building React Native from source")
296 | substitute(module("com.facebook.react:hermes-engine"))
297 | .using(project(":ReactAndroid:hermes-engine"))
298 | .because("On New Architecture we're building Hermes from source")
299 | }
300 | }
301 | }
302 |
303 | // Run this once to be able to run the application with BUCK
304 | // puts all compile dependencies into folder libs for BUCK to use
305 | task copyDownloadableDepsToLibs(type: Copy) {
306 | from configurations.implementation
307 | into 'libs'
308 | }
309 |
310 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
311 |
312 | def isNewArchitectureEnabled() {
313 | // To opt-in for the New Architecture, you can either:
314 | // - Set `newArchEnabled` to true inside the `gradle.properties` file
315 | // - Invoke gradle with `-newArchEnabled=true`
316 | // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
317 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
318 | }
319 |
--------------------------------------------------------------------------------
/android/app/build_defs.bzl:
--------------------------------------------------------------------------------
1 | """Helper definitions to glob .aar and .jar targets"""
2 |
3 | def create_aar_targets(aarfiles):
4 | for aarfile in aarfiles:
5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
6 | lib_deps.append(":" + name)
7 | android_prebuilt_aar(
8 | name = name,
9 | aar = aarfile,
10 | )
11 |
12 | def create_jar_targets(jarfiles):
13 | for jarfile in jarfiles:
14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
15 | lib_deps.append(":" + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
--------------------------------------------------------------------------------
/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/debug.keystore
--------------------------------------------------------------------------------
/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/android/app/src/debug/java/com/reactnativecomponents/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.reactnativecomponents;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
22 | import com.facebook.react.ReactInstanceEventListener;
23 | import com.facebook.react.ReactInstanceManager;
24 | import com.facebook.react.bridge.ReactContext;
25 | import com.facebook.react.modules.network.NetworkingModule;
26 | import okhttp3.OkHttpClient;
27 |
28 | public class ReactNativeFlipper {
29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
30 | if (FlipperUtils.shouldEnableFlipper(context)) {
31 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
32 |
33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
34 | client.addPlugin(new ReactFlipperPlugin());
35 | client.addPlugin(new DatabasesFlipperPlugin(context));
36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
37 | client.addPlugin(CrashReporterPlugin.getInstance());
38 |
39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
40 | NetworkingModule.setCustomClientBuilder(
41 | new NetworkingModule.CustomClientBuilder() {
42 | @Override
43 | public void apply(OkHttpClient.Builder builder) {
44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
45 | }
46 | });
47 | client.addPlugin(networkFlipperPlugin);
48 | client.start();
49 |
50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
51 | // Hence we run if after all native modules have been initialized
52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
53 | if (reactContext == null) {
54 | reactInstanceManager.addReactInstanceEventListener(
55 | new ReactInstanceEventListener() {
56 | @Override
57 | public void onReactContextInitialized(ReactContext reactContext) {
58 | reactInstanceManager.removeReactInstanceEventListener(this);
59 | reactContext.runOnNativeModulesQueueThread(
60 | new Runnable() {
61 | @Override
62 | public void run() {
63 | client.addPlugin(new FrescoFlipperPlugin());
64 | }
65 | });
66 | }
67 | });
68 | } else {
69 | client.addPlugin(new FrescoFlipperPlugin());
70 | }
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
13 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/android/app/src/main/assets/fonts/MrRobot.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/assets/fonts/MrRobot.otf
--------------------------------------------------------------------------------
/android/app/src/main/java/com/reactnativecomponents/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.reactnativecomponents;
2 |
3 | import com.facebook.react.ReactActivity;
4 | import com.facebook.react.ReactActivityDelegate;
5 | import com.facebook.react.ReactRootView;
6 | import android.os.Bundle;
7 |
8 | public class MainActivity extends ReactActivity {
9 |
10 | /**
11 | * Returns the name of the main component registered from JavaScript. This is used to schedule
12 | * rendering of the component.
13 | */
14 | @Override
15 | protected String getMainComponentName() {
16 | return "reactNativeComponents";
17 | }
18 |
19 | /**
20 | * Aditional step to RN screens package
21 | */
22 | @Override
23 | protected void onCreate(Bundle savedInstanceState) {
24 | super.onCreate(null);
25 | }
26 |
27 | /**
28 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
29 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer
30 | * (Paper).
31 | */
32 | @Override
33 | protected ReactActivityDelegate createReactActivityDelegate() {
34 | return new MainActivityDelegate(this, getMainComponentName());
35 | }
36 |
37 | public static class MainActivityDelegate extends ReactActivityDelegate {
38 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
39 | super(activity, mainComponentName);
40 | }
41 |
42 | @Override
43 | protected ReactRootView createRootView() {
44 | ReactRootView reactRootView = new ReactRootView(getContext());
45 | // If you opted-in for the New Architecture, we enable the Fabric Renderer.
46 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
47 | return reactRootView;
48 | }
49 |
50 | @Override
51 | protected boolean isConcurrentRootEnabled() {
52 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
53 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
54 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/reactnativecomponents/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.reactnativecomponents;
2 |
3 | import android.app.Application;
4 | import android.content.Context;
5 | import com.facebook.react.PackageList;
6 | import com.facebook.react.ReactApplication;
7 | import com.facebook.react.ReactInstanceManager;
8 | import com.facebook.react.ReactNativeHost;
9 | import com.facebook.react.ReactPackage;
10 | import com.facebook.react.config.ReactFeatureFlags;
11 | import com.facebook.soloader.SoLoader;
12 | import com.reactnativecomponents.newarchitecture.MainApplicationReactNativeHost;
13 | import java.lang.reflect.InvocationTargetException;
14 | import java.util.List;
15 |
16 | public class MainApplication extends Application implements ReactApplication {
17 |
18 | private final ReactNativeHost mReactNativeHost =
19 | new ReactNativeHost(this) {
20 | @Override
21 | public boolean getUseDeveloperSupport() {
22 | return BuildConfig.DEBUG;
23 | }
24 |
25 | @Override
26 | protected List getPackages() {
27 | @SuppressWarnings("UnnecessaryLocalVariable")
28 | List packages = new PackageList(this).getPackages();
29 | // Packages that cannot be autolinked yet can be added manually here, for example:
30 | // packages.add(new MyReactNativePackage());
31 | return packages;
32 | }
33 |
34 | @Override
35 | protected String getJSMainModuleName() {
36 | return "index";
37 | }
38 | };
39 |
40 | private final ReactNativeHost mNewArchitectureNativeHost =
41 | new MainApplicationReactNativeHost(this);
42 |
43 | @Override
44 | public ReactNativeHost getReactNativeHost() {
45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
46 | return mNewArchitectureNativeHost;
47 | } else {
48 | return mReactNativeHost;
49 | }
50 | }
51 |
52 | @Override
53 | public void onCreate() {
54 | super.onCreate();
55 | // If you opted-in for the New Architecture, we enable the TurboModule system
56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
57 | SoLoader.init(this, /* native exopackage */ false);
58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
59 | }
60 |
61 | /**
62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like
63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
64 | *
65 | * @param context
66 | * @param reactInstanceManager
67 | */
68 | private static void initializeFlipper(
69 | Context context, ReactInstanceManager reactInstanceManager) {
70 | if (BuildConfig.DEBUG) {
71 | try {
72 | /*
73 | We use reflection here to pick up the class that initializes Flipper,
74 | since Flipper library is not available in release mode
75 | */
76 | Class> aClass = Class.forName("com.reactnativecomponents.ReactNativeFlipper");
77 | aClass
78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
79 | .invoke(null, context, reactInstanceManager);
80 | } catch (ClassNotFoundException e) {
81 | e.printStackTrace();
82 | } catch (NoSuchMethodException e) {
83 | e.printStackTrace();
84 | } catch (IllegalAccessException e) {
85 | e.printStackTrace();
86 | } catch (InvocationTargetException e) {
87 | e.printStackTrace();
88 | }
89 | }
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/reactnativecomponents/newarchitecture/MainApplicationReactNativeHost.java:
--------------------------------------------------------------------------------
1 | package com.reactnativecomponents.newarchitecture;
2 |
3 | import android.app.Application;
4 | import androidx.annotation.NonNull;
5 | import com.facebook.react.PackageList;
6 | import com.facebook.react.ReactInstanceManager;
7 | import com.facebook.react.ReactNativeHost;
8 | import com.facebook.react.ReactPackage;
9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
10 | import com.facebook.react.bridge.JSIModulePackage;
11 | import com.facebook.react.bridge.JSIModuleProvider;
12 | import com.facebook.react.bridge.JSIModuleSpec;
13 | import com.facebook.react.bridge.JSIModuleType;
14 | import com.facebook.react.bridge.JavaScriptContextHolder;
15 | import com.facebook.react.bridge.ReactApplicationContext;
16 | import com.facebook.react.bridge.UIManager;
17 | import com.facebook.react.fabric.ComponentFactory;
18 | import com.facebook.react.fabric.CoreComponentsRegistry;
19 | import com.facebook.react.fabric.FabricJSIModuleProvider;
20 | import com.facebook.react.fabric.ReactNativeConfig;
21 | import com.facebook.react.uimanager.ViewManagerRegistry;
22 | import com.reactnativecomponents.BuildConfig;
23 | import com.reactnativecomponents.newarchitecture.components.MainComponentsRegistry;
24 | import com.reactnativecomponents.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
25 | import java.util.ArrayList;
26 | import java.util.List;
27 |
28 | /**
29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
30 | * TurboModule delegates and the Fabric Renderer.
31 | *
32 | * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
33 | * `newArchEnabled` property). Is ignored otherwise.
34 | */
35 | public class MainApplicationReactNativeHost extends ReactNativeHost {
36 | public MainApplicationReactNativeHost(Application application) {
37 | super(application);
38 | }
39 |
40 | @Override
41 | public boolean getUseDeveloperSupport() {
42 | return BuildConfig.DEBUG;
43 | }
44 |
45 | @Override
46 | protected List getPackages() {
47 | List packages = new PackageList(this).getPackages();
48 | // Packages that cannot be autolinked yet can be added manually here, for example:
49 | // packages.add(new MyReactNativePackage());
50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
51 | // packages.add(new TurboReactPackage() { ... });
52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here
53 | // inside a ReactPackage.
54 | return packages;
55 | }
56 |
57 | @Override
58 | protected String getJSMainModuleName() {
59 | return "index";
60 | }
61 |
62 | @NonNull
63 | @Override
64 | protected ReactPackageTurboModuleManagerDelegate.Builder
65 | getReactPackageTurboModuleManagerDelegateBuilder() {
66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
67 | // for the new architecture and to use TurboModules correctly.
68 | return new MainApplicationTurboModuleManagerDelegate.Builder();
69 | }
70 |
71 | @Override
72 | protected JSIModulePackage getJSIModulePackage() {
73 | return new JSIModulePackage() {
74 | @Override
75 | public List getJSIModules(
76 | final ReactApplicationContext reactApplicationContext,
77 | final JavaScriptContextHolder jsContext) {
78 | final List specs = new ArrayList<>();
79 |
80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the
81 | // custom Fabric Components.
82 | specs.add(
83 | new JSIModuleSpec() {
84 | @Override
85 | public JSIModuleType getJSIModuleType() {
86 | return JSIModuleType.UIManager;
87 | }
88 |
89 | @Override
90 | public JSIModuleProvider getJSIModuleProvider() {
91 | final ComponentFactory componentFactory = new ComponentFactory();
92 | CoreComponentsRegistry.register(componentFactory);
93 |
94 | // Here we register a Components Registry.
95 | // The one that is generated with the template contains no components
96 | // and just provides you the one from React Native core.
97 | MainComponentsRegistry.register(componentFactory);
98 |
99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
100 |
101 | ViewManagerRegistry viewManagerRegistry =
102 | new ViewManagerRegistry(
103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
104 |
105 | return new FabricJSIModuleProvider(
106 | reactApplicationContext,
107 | componentFactory,
108 | ReactNativeConfig.DEFAULT_CONFIG,
109 | viewManagerRegistry);
110 | }
111 | });
112 | return specs;
113 | }
114 | };
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/reactnativecomponents/newarchitecture/components/MainComponentsRegistry.java:
--------------------------------------------------------------------------------
1 | package com.reactnativecomponents.newarchitecture.components;
2 |
3 | import com.facebook.jni.HybridData;
4 | import com.facebook.proguard.annotations.DoNotStrip;
5 | import com.facebook.react.fabric.ComponentFactory;
6 | import com.facebook.soloader.SoLoader;
7 |
8 | /**
9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a
10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
11 | * folder for you).
12 | *
13 | * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
14 | * `newArchEnabled` property). Is ignored otherwise.
15 | */
16 | @DoNotStrip
17 | public class MainComponentsRegistry {
18 | static {
19 | SoLoader.loadLibrary("fabricjni");
20 | }
21 |
22 | @DoNotStrip private final HybridData mHybridData;
23 |
24 | @DoNotStrip
25 | private native HybridData initHybrid(ComponentFactory componentFactory);
26 |
27 | @DoNotStrip
28 | private MainComponentsRegistry(ComponentFactory componentFactory) {
29 | mHybridData = initHybrid(componentFactory);
30 | }
31 |
32 | @DoNotStrip
33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) {
34 | return new MainComponentsRegistry(componentFactory);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/reactnativecomponents/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java:
--------------------------------------------------------------------------------
1 | package com.reactnativecomponents.newarchitecture.modules;
2 |
3 | import com.facebook.jni.HybridData;
4 | import com.facebook.react.ReactPackage;
5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
6 | import com.facebook.react.bridge.ReactApplicationContext;
7 | import com.facebook.soloader.SoLoader;
8 | import java.util.List;
9 |
10 | /**
11 | * Class responsible to load the TurboModules. This class has native methods and needs a
12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
13 | * folder for you).
14 | *
15 | *
Please note that this class is used ONLY if you opt-in for the New Architecture (see the
16 | * `newArchEnabled` property). Is ignored otherwise.
17 | */
18 | public class MainApplicationTurboModuleManagerDelegate
19 | extends ReactPackageTurboModuleManagerDelegate {
20 |
21 | private static volatile boolean sIsSoLibraryLoaded;
22 |
23 | protected MainApplicationTurboModuleManagerDelegate(
24 | ReactApplicationContext reactApplicationContext, List packages) {
25 | super(reactApplicationContext, packages);
26 | }
27 |
28 | protected native HybridData initHybrid();
29 |
30 | native boolean canCreateTurboModule(String moduleName);
31 |
32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
33 | protected MainApplicationTurboModuleManagerDelegate build(
34 | ReactApplicationContext context, List packages) {
35 | return new MainApplicationTurboModuleManagerDelegate(context, packages);
36 | }
37 | }
38 |
39 | @Override
40 | protected synchronized void maybeLoadOtherSoLibraries() {
41 | if (!sIsSoLibraryLoaded) {
42 | // If you change the name of your application .so file in the Android.mk file,
43 | // make sure you update the name here as well.
44 | SoLoader.loadLibrary("reactnativecomponents_appmodules");
45 | sIsSoLibraryLoaded = true;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/CMakeLists.txt:
--------------------------------------------------------------------------------
1 | cmake_minimum_required(VERSION 3.13)
2 |
3 | # Define the library name here.
4 | project(reactnativecomponents_appmodules)
5 |
6 | # This file includes all the necessary to let you build your application with the New Architecture.
7 | include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
8 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainApplicationModuleProvider.cpp:
--------------------------------------------------------------------------------
1 | #include "MainApplicationModuleProvider.h"
2 |
3 | #include
4 | #include
5 |
6 | namespace facebook {
7 | namespace react {
8 |
9 | std::shared_ptr MainApplicationModuleProvider(
10 | const std::string &moduleName,
11 | const JavaTurboModule::InitParams ¶ms) {
12 | // Here you can provide your own module provider for TurboModules coming from
13 | // either your application or from external libraries. The approach to follow
14 | // is similar to the following (for a library called `samplelibrary`:
15 | //
16 | // auto module = samplelibrary_ModuleProvider(moduleName, params);
17 | // if (module != nullptr) {
18 | // return module;
19 | // }
20 | // return rncore_ModuleProvider(moduleName, params);
21 |
22 | // Module providers autolinked by RN CLI
23 | auto rncli_module = rncli_ModuleProvider(moduleName, params);
24 | if (rncli_module != nullptr) {
25 | return rncli_module;
26 | }
27 |
28 | return rncore_ModuleProvider(moduleName, params);
29 | }
30 |
31 | } // namespace react
32 | } // namespace facebook
33 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainApplicationModuleProvider.h:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 | #include
5 |
6 | #include
7 |
8 | namespace facebook {
9 | namespace react {
10 |
11 | std::shared_ptr MainApplicationModuleProvider(
12 | const std::string &moduleName,
13 | const JavaTurboModule::InitParams ¶ms);
14 |
15 | } // namespace react
16 | } // namespace facebook
17 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp:
--------------------------------------------------------------------------------
1 | #include "MainApplicationTurboModuleManagerDelegate.h"
2 | #include "MainApplicationModuleProvider.h"
3 |
4 | namespace facebook {
5 | namespace react {
6 |
7 | jni::local_ref
8 | MainApplicationTurboModuleManagerDelegate::initHybrid(
9 | jni::alias_ref) {
10 | return makeCxxInstance();
11 | }
12 |
13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() {
14 | registerHybrid({
15 | makeNativeMethod(
16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
17 | makeNativeMethod(
18 | "canCreateTurboModule",
19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
20 | });
21 | }
22 |
23 | std::shared_ptr
24 | MainApplicationTurboModuleManagerDelegate::getTurboModule(
25 | const std::string &name,
26 | const std::shared_ptr &jsInvoker) {
27 | // Not implemented yet: provide pure-C++ NativeModules here.
28 | return nullptr;
29 | }
30 |
31 | std::shared_ptr
32 | MainApplicationTurboModuleManagerDelegate::getTurboModule(
33 | const std::string &name,
34 | const JavaTurboModule::InitParams ¶ms) {
35 | return MainApplicationModuleProvider(name, params);
36 | }
37 |
38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
39 | const std::string &name) {
40 | return getTurboModule(name, nullptr) != nullptr ||
41 | getTurboModule(name, {.moduleName = name}) != nullptr;
42 | }
43 |
44 | } // namespace react
45 | } // namespace facebook
46 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h:
--------------------------------------------------------------------------------
1 | #include
2 | #include
3 |
4 | #include
5 | #include
6 |
7 | namespace facebook {
8 | namespace react {
9 |
10 | class MainApplicationTurboModuleManagerDelegate
11 | : public jni::HybridClass<
12 | MainApplicationTurboModuleManagerDelegate,
13 | TurboModuleManagerDelegate> {
14 | public:
15 | // Adapt it to the package you used for your Java class.
16 | static constexpr auto kJavaDescriptor =
17 | "Lcom/reactnativecomponents/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
18 |
19 | static jni::local_ref initHybrid(jni::alias_ref);
20 |
21 | static void registerNatives();
22 |
23 | std::shared_ptr getTurboModule(
24 | const std::string &name,
25 | const std::shared_ptr &jsInvoker) override;
26 | std::shared_ptr getTurboModule(
27 | const std::string &name,
28 | const JavaTurboModule::InitParams ¶ms) override;
29 |
30 | /**
31 | * Test-only method. Allows user to verify whether a TurboModule can be
32 | * created by instances of this class.
33 | */
34 | bool canCreateTurboModule(const std::string &name);
35 | };
36 |
37 | } // namespace react
38 | } // namespace facebook
39 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainComponentsRegistry.cpp:
--------------------------------------------------------------------------------
1 | #include "MainComponentsRegistry.h"
2 |
3 | #include
4 | #include
5 | #include
6 | #include
7 | #include
8 |
9 | namespace facebook {
10 | namespace react {
11 |
12 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
13 |
14 | std::shared_ptr
15 | MainComponentsRegistry::sharedProviderRegistry() {
16 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
17 |
18 | // Autolinked providers registered by RN CLI
19 | rncli_registerProviders(providerRegistry);
20 |
21 | // Custom Fabric Components go here. You can register custom
22 | // components coming from your App or from 3rd party libraries here.
23 | //
24 | // providerRegistry->add(concreteComponentDescriptorProvider<
25 | // AocViewerComponentDescriptor>());
26 | return providerRegistry;
27 | }
28 |
29 | jni::local_ref
30 | MainComponentsRegistry::initHybrid(
31 | jni::alias_ref,
32 | ComponentFactory *delegate) {
33 | auto instance = makeCxxInstance(delegate);
34 |
35 | auto buildRegistryFunction =
36 | [](EventDispatcher::Weak const &eventDispatcher,
37 | ContextContainer::Shared const &contextContainer)
38 | -> ComponentDescriptorRegistry::Shared {
39 | auto registry = MainComponentsRegistry::sharedProviderRegistry()
40 | ->createComponentDescriptorRegistry(
41 | {eventDispatcher, contextContainer});
42 |
43 | auto mutableRegistry =
44 | std::const_pointer_cast(registry);
45 |
46 | mutableRegistry->setFallbackComponentDescriptor(
47 | std::make_shared(
48 | ComponentDescriptorParameters{
49 | eventDispatcher, contextContainer, nullptr}));
50 |
51 | return registry;
52 | };
53 |
54 | delegate->buildRegistryFunction = buildRegistryFunction;
55 | return instance;
56 | }
57 |
58 | void MainComponentsRegistry::registerNatives() {
59 | registerHybrid({
60 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
61 | });
62 | }
63 |
64 | } // namespace react
65 | } // namespace facebook
66 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/MainComponentsRegistry.h:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 | #include
5 | #include
6 | #include
7 |
8 | namespace facebook {
9 | namespace react {
10 |
11 | class MainComponentsRegistry
12 | : public facebook::jni::HybridClass {
13 | public:
14 | // Adapt it to the package you used for your Java class.
15 | constexpr static auto kJavaDescriptor =
16 | "Lcom/reactnativecomponents/newarchitecture/components/MainComponentsRegistry;";
17 |
18 | static void registerNatives();
19 |
20 | MainComponentsRegistry(ComponentFactory *delegate);
21 |
22 | private:
23 | static std::shared_ptr
24 | sharedProviderRegistry();
25 |
26 | static jni::local_ref initHybrid(
27 | jni::alias_ref,
28 | ComponentFactory *delegate);
29 | };
30 |
31 | } // namespace react
32 | } // namespace facebook
33 |
--------------------------------------------------------------------------------
/android/app/src/main/jni/OnLoad.cpp:
--------------------------------------------------------------------------------
1 | #include
2 | #include "MainApplicationTurboModuleManagerDelegate.h"
3 | #include "MainComponentsRegistry.h"
4 |
5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
6 | return facebook::jni::initialize(vm, [] {
7 | facebook::react::MainApplicationTurboModuleManagerDelegate::
8 | registerNatives();
9 | facebook::react::MainComponentsRegistry::registerNatives();
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
21 |
22 |
23 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | reactNativeComponents
3 |
4 |
--------------------------------------------------------------------------------
/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | ext {
5 | buildToolsVersion = "31.0.0"
6 | minSdkVersion = 21
7 | compileSdkVersion = 31
8 | targetSdkVersion = 31
9 |
10 | if (System.properties['os.arch'] == "aarch64") {
11 | // For M1 Users we need to use the NDK 24 which added support for aarch64
12 | ndkVersion = "24.0.8215888"
13 | } else {
14 | // Otherwise we default to the side-by-side NDK version from AGP.
15 | ndkVersion = "21.4.7075529"
16 | }
17 | }
18 | repositories {
19 | google()
20 | mavenCentral()
21 | }
22 | dependencies {
23 | classpath("com.android.tools.build:gradle:7.2.1")
24 | classpath("com.facebook.react:react-native-gradle-plugin")
25 | classpath("de.undercouch:gradle-download-task:5.0.1")
26 | // NOTE: Do not place your application dependencies here; they belong
27 | // in the individual module build.gradle files
28 | }
29 | }
30 |
31 | allprojects {
32 | repositories {
33 | maven {
34 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
35 | url("$rootDir/../node_modules/react-native/android")
36 | }
37 | maven {
38 | // Android JSC is installed from npm
39 | url("$rootDir/../node_modules/jsc-android/dist")
40 | }
41 | mavenCentral {
42 | // We don't want to fetch react-native from Maven Central as there are
43 | // older versions over there.
44 | content {
45 | excludeGroup "com.facebook.react"
46 | }
47 | }
48 | google()
49 | maven { url 'https://www.jitpack.io' }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 | # Automatically convert third-party libraries to use AndroidX
25 | android.enableJetifier=true
26 |
27 | # Version of flipper SDK to use with React Native
28 | FLIPPER_VERSION=0.125.0
29 |
30 | # Use this property to specify which architecture you want to build.
31 | # You can also override it from the CLI using
32 | # ./gradlew -PreactNativeArchitectures=x86_64
33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
34 |
35 | # Use this property to enable support to the new architecture.
36 | # This will allow you to use TurboModules and the Fabric render in
37 | # your application. You should enable this flag either if you want
38 | # to write custom TurboModules/Fabric components OR use libraries that
39 | # are providing them.
40 | newArchEnabled=false
41 |
--------------------------------------------------------------------------------
/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | #
4 | # Copyright © 2015-2021 the original authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | #
21 | # Gradle start up script for POSIX generated by Gradle.
22 | #
23 | # Important for running:
24 | #
25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
26 | # noncompliant, but you have some other compliant shell such as ksh or
27 | # bash, then to run this script, type that shell name before the whole
28 | # command line, like:
29 | #
30 | # ksh Gradle
31 | #
32 | # Busybox and similar reduced shells will NOT work, because this script
33 | # requires all of these POSIX shell features:
34 | # * functions;
35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»;
37 | # * compound commands having a testable exit status, especially «case»;
38 | # * various built-in commands including «command», «set», and «ulimit».
39 | #
40 | # Important for patching:
41 | #
42 | # (2) This script targets any POSIX shell, so it avoids extensions provided
43 | # by Bash, Ksh, etc; in particular arrays are avoided.
44 | #
45 | # The "traditional" practice of packing multiple parameters into a
46 | # space-separated string is a well documented source of bugs and security
47 | # problems, so this is (mostly) avoided, by progressively accumulating
48 | # options in "$@", and eventually passing that to Java.
49 | #
50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
52 | # see the in-line comments for details.
53 | #
54 | # There are tweaks for specific operating systems such as AIX, CygWin,
55 | # Darwin, MinGW, and NonStop.
56 | #
57 | # (3) This script is generated from the Groovy template
58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
59 | # within the Gradle project.
60 | #
61 | # You can find Gradle at https://github.com/gradle/gradle/.
62 | #
63 | ##############################################################################
64 |
65 | # Attempt to set APP_HOME
66 |
67 | # Resolve links: $0 may be a link
68 | app_path=$0
69 |
70 | # Need this for daisy-chained symlinks.
71 | while
72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
73 | [ -h "$app_path" ]
74 | do
75 | ls=$( ls -ld "$app_path" )
76 | link=${ls#*' -> '}
77 | case $link in #(
78 | /*) app_path=$link ;; #(
79 | *) app_path=$APP_HOME$link ;;
80 | esac
81 | done
82 |
83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
84 |
85 | APP_NAME="Gradle"
86 | APP_BASE_NAME=${0##*/}
87 |
88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
90 |
91 | # Use the maximum available, or set MAX_FD != -1 to use that value.
92 | MAX_FD=maximum
93 |
94 | warn () {
95 | echo "$*"
96 | } >&2
97 |
98 | die () {
99 | echo
100 | echo "$*"
101 | echo
102 | exit 1
103 | } >&2
104 |
105 | # OS specific support (must be 'true' or 'false').
106 | cygwin=false
107 | msys=false
108 | darwin=false
109 | nonstop=false
110 | case "$( uname )" in #(
111 | CYGWIN* ) cygwin=true ;; #(
112 | Darwin* ) darwin=true ;; #(
113 | MSYS* | MINGW* ) msys=true ;; #(
114 | NONSTOP* ) nonstop=true ;;
115 | esac
116 |
117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
118 |
119 |
120 | # Determine the Java command to use to start the JVM.
121 | if [ -n "$JAVA_HOME" ] ; then
122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
123 | # IBM's JDK on AIX uses strange locations for the executables
124 | JAVACMD=$JAVA_HOME/jre/sh/java
125 | else
126 | JAVACMD=$JAVA_HOME/bin/java
127 | fi
128 | if [ ! -x "$JAVACMD" ] ; then
129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
130 |
131 | Please set the JAVA_HOME variable in your environment to match the
132 | location of your Java installation."
133 | fi
134 | else
135 | JAVACMD=java
136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
137 |
138 | Please set the JAVA_HOME variable in your environment to match the
139 | location of your Java installation."
140 | fi
141 |
142 | # Increase the maximum file descriptors if we can.
143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
144 | case $MAX_FD in #(
145 | max*)
146 | MAX_FD=$( ulimit -H -n ) ||
147 | warn "Could not query maximum file descriptor limit"
148 | esac
149 | case $MAX_FD in #(
150 | '' | soft) :;; #(
151 | *)
152 | ulimit -n "$MAX_FD" ||
153 | warn "Could not set maximum file descriptor limit to $MAX_FD"
154 | esac
155 | fi
156 |
157 | # Collect all arguments for the java command, stacking in reverse order:
158 | # * args from the command line
159 | # * the main class name
160 | # * -classpath
161 | # * -D...appname settings
162 | # * --module-path (only if needed)
163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
164 |
165 | # For Cygwin or MSYS, switch paths to Windows format before running java
166 | if "$cygwin" || "$msys" ; then
167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
169 |
170 | JAVACMD=$( cygpath --unix "$JAVACMD" )
171 |
172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
173 | for arg do
174 | if
175 | case $arg in #(
176 | -*) false ;; # don't mess with options #(
177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
178 | [ -e "$t" ] ;; #(
179 | *) false ;;
180 | esac
181 | then
182 | arg=$( cygpath --path --ignore --mixed "$arg" )
183 | fi
184 | # Roll the args list around exactly as many times as the number of
185 | # args, so each arg winds up back in the position where it started, but
186 | # possibly modified.
187 | #
188 | # NB: a `for` loop captures its iteration list before it begins, so
189 | # changing the positional parameters here affects neither the number of
190 | # iterations, nor the values presented in `arg`.
191 | shift # remove old arg
192 | set -- "$@" "$arg" # push replacement arg
193 | done
194 | fi
195 |
196 | # Collect all arguments for the java command;
197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
198 | # shell script including quotes and variable substitutions, so put them in
199 | # double quotes to make sure that they get re-expanded; and
200 | # * put everything else in single quotes, so that it's not re-expanded.
201 |
202 | set -- \
203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \
204 | -classpath "$CLASSPATH" \
205 | org.gradle.wrapper.GradleWrapperMain \
206 | "$@"
207 |
208 | # Use "xargs" to parse quoted args.
209 | #
210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
211 | #
212 | # In Bash we could simply go:
213 | #
214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) &&
215 | # set -- "${ARGS[@]}" "$@"
216 | #
217 | # but POSIX shell has neither arrays nor command substitution, so instead we
218 | # post-process each arg (as a line of input to sed) to backslash-escape any
219 | # character that might be a shell metacharacter, then use eval to reverse
220 | # that process (while maintaining the separation between arguments), and wrap
221 | # the whole thing up as a single "set" statement.
222 | #
223 | # This will of course break if any of these variables contains a newline or
224 | # an unmatched quote.
225 | #
226 |
227 | eval "set -- $(
228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
229 | xargs -n1 |
230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
231 | tr '\n' ' '
232 | )" '"$@"'
233 |
234 | exec "$JAVACMD" "$@"
235 |
--------------------------------------------------------------------------------
/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/android/link-assets-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "migIndex": 1,
3 | "data": [
4 | {
5 | "path": "src/assets/fonts/MrRobot.otf",
6 | "sha1": "d720e687984226ed91febcc09a7e95327ea8029e"
7 | }
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'reactNativeComponents'
2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
3 | include ':app'
4 | includeBuild('../node_modules/react-native-gradle-plugin')
5 |
6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
7 | include(":ReactAndroid")
8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
9 | include(":ReactAndroid:hermes-engine")
10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
11 | }
12 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactNativeComponents",
3 | "displayName": "reactNativeComponents"
4 | }
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['module:metro-react-native-babel-preset'],
3 | };
4 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @format
3 | */
4 |
5 | import {AppRegistry} from 'react-native';
6 | import App from './App';
7 | import {name as appName} from './app.json';
8 |
9 | AppRegistry.registerComponent(appName, () => App);
10 |
--------------------------------------------------------------------------------
/ios/.xcode.env:
--------------------------------------------------------------------------------
1 | # This `.xcode.env` file is versioned and is used to source the environment
2 | # used when running script phases inside Xcode.
3 | # To customize your local environment, you can create an `.xcode.env.local`
4 | # file that is not versioned.
5 |
6 | # NODE_BINARY variable contains the PATH to the node executable.
7 | #
8 | # Customize the NODE_BINARY variable here.
9 | # For example, to use nvm with brew, add the following line
10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use
11 | export NODE_BINARY=$(command -v node)
12 |
--------------------------------------------------------------------------------
/ios/Podfile:
--------------------------------------------------------------------------------
1 | require_relative '../node_modules/react-native/scripts/react_native_pods'
2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
3 |
4 | platform :ios, '12.4'
5 | install! 'cocoapods', :deterministic_uuids => false
6 |
7 | target 'reactNativeComponents' do
8 | config = use_native_modules!
9 |
10 | # Flags change depending on the env values.
11 | flags = get_default_flags()
12 |
13 | use_react_native!(
14 | :path => config[:reactNativePath],
15 | # Hermes is now enabled by default. Disable by setting this flag to false.
16 | # Upcoming versions of React Native may rely on get_default_flags(), but
17 | # we make it explicit here to aid in the React Native upgrade process.
18 | :hermes_enabled => true,
19 | :fabric_enabled => flags[:fabric_enabled],
20 | # Enables Flipper.
21 | #
22 | # Note that if you have use_frameworks! enabled, Flipper will not work and
23 | # you should disable the next line.
24 | :flipper_configuration => FlipperConfiguration.enabled,
25 | # An absolute path to your application root.
26 | :app_path => "#{Pod::Config.instance.installation_root}/.."
27 | )
28 |
29 | target 'reactNativeComponentsTests' do
30 | inherit! :complete
31 | # Pods for testing
32 | end
33 |
34 | post_install do |installer|
35 | react_native_post_install(
36 | installer,
37 | # Set `mac_catalyst_enabled` to `true` in order to apply patches
38 | # necessary for Mac Catalyst builds
39 | :mac_catalyst_enabled => false
40 | )
41 | __apply_Xcode_12_5_M1_post_install_workaround(installer)
42 | end
43 | end
44 |
--------------------------------------------------------------------------------
/ios/Podfile.lock:
--------------------------------------------------------------------------------
1 | PODS:
2 | - boost (1.76.0)
3 | - CocoaAsyncSocket (7.6.5)
4 | - DoubleConversion (1.1.6)
5 | - FBLazyVector (0.70.5)
6 | - FBReactNativeSpec (0.70.5):
7 | - RCT-Folly (= 2021.07.22.00)
8 | - RCTRequired (= 0.70.5)
9 | - RCTTypeSafety (= 0.70.5)
10 | - React-Core (= 0.70.5)
11 | - React-jsi (= 0.70.5)
12 | - ReactCommon/turbomodule/core (= 0.70.5)
13 | - Flipper (0.125.0):
14 | - Flipper-Folly (~> 2.6)
15 | - Flipper-RSocket (~> 1.4)
16 | - Flipper-Boost-iOSX (1.76.0.1.11)
17 | - Flipper-DoubleConversion (3.2.0.1)
18 | - Flipper-Fmt (7.1.7)
19 | - Flipper-Folly (2.6.10):
20 | - Flipper-Boost-iOSX
21 | - Flipper-DoubleConversion
22 | - Flipper-Fmt (= 7.1.7)
23 | - Flipper-Glog
24 | - libevent (~> 2.1.12)
25 | - OpenSSL-Universal (= 1.1.1100)
26 | - Flipper-Glog (0.5.0.5)
27 | - Flipper-PeerTalk (0.0.4)
28 | - Flipper-RSocket (1.4.3):
29 | - Flipper-Folly (~> 2.6)
30 | - FlipperKit (0.125.0):
31 | - FlipperKit/Core (= 0.125.0)
32 | - FlipperKit/Core (0.125.0):
33 | - Flipper (~> 0.125.0)
34 | - FlipperKit/CppBridge
35 | - FlipperKit/FBCxxFollyDynamicConvert
36 | - FlipperKit/FBDefines
37 | - FlipperKit/FKPortForwarding
38 | - SocketRocket (~> 0.6.0)
39 | - FlipperKit/CppBridge (0.125.0):
40 | - Flipper (~> 0.125.0)
41 | - FlipperKit/FBCxxFollyDynamicConvert (0.125.0):
42 | - Flipper-Folly (~> 2.6)
43 | - FlipperKit/FBDefines (0.125.0)
44 | - FlipperKit/FKPortForwarding (0.125.0):
45 | - CocoaAsyncSocket (~> 7.6)
46 | - Flipper-PeerTalk (~> 0.0.4)
47 | - FlipperKit/FlipperKitHighlightOverlay (0.125.0)
48 | - FlipperKit/FlipperKitLayoutHelpers (0.125.0):
49 | - FlipperKit/Core
50 | - FlipperKit/FlipperKitHighlightOverlay
51 | - FlipperKit/FlipperKitLayoutTextSearchable
52 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0):
53 | - FlipperKit/Core
54 | - FlipperKit/FlipperKitHighlightOverlay
55 | - FlipperKit/FlipperKitLayoutHelpers
56 | - YogaKit (~> 1.18)
57 | - FlipperKit/FlipperKitLayoutPlugin (0.125.0):
58 | - FlipperKit/Core
59 | - FlipperKit/FlipperKitHighlightOverlay
60 | - FlipperKit/FlipperKitLayoutHelpers
61 | - FlipperKit/FlipperKitLayoutIOSDescriptors
62 | - FlipperKit/FlipperKitLayoutTextSearchable
63 | - YogaKit (~> 1.18)
64 | - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0)
65 | - FlipperKit/FlipperKitNetworkPlugin (0.125.0):
66 | - FlipperKit/Core
67 | - FlipperKit/FlipperKitReactPlugin (0.125.0):
68 | - FlipperKit/Core
69 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0):
70 | - FlipperKit/Core
71 | - FlipperKit/SKIOSNetworkPlugin (0.125.0):
72 | - FlipperKit/Core
73 | - FlipperKit/FlipperKitNetworkPlugin
74 | - fmt (6.2.1)
75 | - glog (0.3.5)
76 | - hermes-engine (0.70.5)
77 | - libevent (2.1.12)
78 | - lottie-ios (3.4.4)
79 | - lottie-react-native (5.1.4):
80 | - lottie-ios (~> 3.4.0)
81 | - React-Core
82 | - OpenSSL-Universal (1.1.1100)
83 | - RCT-Folly (2021.07.22.00):
84 | - boost
85 | - DoubleConversion
86 | - fmt (~> 6.2.1)
87 | - glog
88 | - RCT-Folly/Default (= 2021.07.22.00)
89 | - RCT-Folly/Default (2021.07.22.00):
90 | - boost
91 | - DoubleConversion
92 | - fmt (~> 6.2.1)
93 | - glog
94 | - RCT-Folly/Futures (2021.07.22.00):
95 | - boost
96 | - DoubleConversion
97 | - fmt (~> 6.2.1)
98 | - glog
99 | - libevent
100 | - RCTRequired (0.70.5)
101 | - RCTTypeSafety (0.70.5):
102 | - FBLazyVector (= 0.70.5)
103 | - RCTRequired (= 0.70.5)
104 | - React-Core (= 0.70.5)
105 | - React (0.70.5):
106 | - React-Core (= 0.70.5)
107 | - React-Core/DevSupport (= 0.70.5)
108 | - React-Core/RCTWebSocket (= 0.70.5)
109 | - React-RCTActionSheet (= 0.70.5)
110 | - React-RCTAnimation (= 0.70.5)
111 | - React-RCTBlob (= 0.70.5)
112 | - React-RCTImage (= 0.70.5)
113 | - React-RCTLinking (= 0.70.5)
114 | - React-RCTNetwork (= 0.70.5)
115 | - React-RCTSettings (= 0.70.5)
116 | - React-RCTText (= 0.70.5)
117 | - React-RCTVibration (= 0.70.5)
118 | - React-bridging (0.70.5):
119 | - RCT-Folly (= 2021.07.22.00)
120 | - React-jsi (= 0.70.5)
121 | - React-callinvoker (0.70.5)
122 | - React-Codegen (0.70.5):
123 | - FBReactNativeSpec (= 0.70.5)
124 | - RCT-Folly (= 2021.07.22.00)
125 | - RCTRequired (= 0.70.5)
126 | - RCTTypeSafety (= 0.70.5)
127 | - React-Core (= 0.70.5)
128 | - React-jsi (= 0.70.5)
129 | - React-jsiexecutor (= 0.70.5)
130 | - ReactCommon/turbomodule/core (= 0.70.5)
131 | - React-Core (0.70.5):
132 | - glog
133 | - RCT-Folly (= 2021.07.22.00)
134 | - React-Core/Default (= 0.70.5)
135 | - React-cxxreact (= 0.70.5)
136 | - React-jsi (= 0.70.5)
137 | - React-jsiexecutor (= 0.70.5)
138 | - React-perflogger (= 0.70.5)
139 | - Yoga
140 | - React-Core/CoreModulesHeaders (0.70.5):
141 | - glog
142 | - RCT-Folly (= 2021.07.22.00)
143 | - React-Core/Default
144 | - React-cxxreact (= 0.70.5)
145 | - React-jsi (= 0.70.5)
146 | - React-jsiexecutor (= 0.70.5)
147 | - React-perflogger (= 0.70.5)
148 | - Yoga
149 | - React-Core/Default (0.70.5):
150 | - glog
151 | - RCT-Folly (= 2021.07.22.00)
152 | - React-cxxreact (= 0.70.5)
153 | - React-jsi (= 0.70.5)
154 | - React-jsiexecutor (= 0.70.5)
155 | - React-perflogger (= 0.70.5)
156 | - Yoga
157 | - React-Core/DevSupport (0.70.5):
158 | - glog
159 | - RCT-Folly (= 2021.07.22.00)
160 | - React-Core/Default (= 0.70.5)
161 | - React-Core/RCTWebSocket (= 0.70.5)
162 | - React-cxxreact (= 0.70.5)
163 | - React-jsi (= 0.70.5)
164 | - React-jsiexecutor (= 0.70.5)
165 | - React-jsinspector (= 0.70.5)
166 | - React-perflogger (= 0.70.5)
167 | - Yoga
168 | - React-Core/RCTActionSheetHeaders (0.70.5):
169 | - glog
170 | - RCT-Folly (= 2021.07.22.00)
171 | - React-Core/Default
172 | - React-cxxreact (= 0.70.5)
173 | - React-jsi (= 0.70.5)
174 | - React-jsiexecutor (= 0.70.5)
175 | - React-perflogger (= 0.70.5)
176 | - Yoga
177 | - React-Core/RCTAnimationHeaders (0.70.5):
178 | - glog
179 | - RCT-Folly (= 2021.07.22.00)
180 | - React-Core/Default
181 | - React-cxxreact (= 0.70.5)
182 | - React-jsi (= 0.70.5)
183 | - React-jsiexecutor (= 0.70.5)
184 | - React-perflogger (= 0.70.5)
185 | - Yoga
186 | - React-Core/RCTBlobHeaders (0.70.5):
187 | - glog
188 | - RCT-Folly (= 2021.07.22.00)
189 | - React-Core/Default
190 | - React-cxxreact (= 0.70.5)
191 | - React-jsi (= 0.70.5)
192 | - React-jsiexecutor (= 0.70.5)
193 | - React-perflogger (= 0.70.5)
194 | - Yoga
195 | - React-Core/RCTImageHeaders (0.70.5):
196 | - glog
197 | - RCT-Folly (= 2021.07.22.00)
198 | - React-Core/Default
199 | - React-cxxreact (= 0.70.5)
200 | - React-jsi (= 0.70.5)
201 | - React-jsiexecutor (= 0.70.5)
202 | - React-perflogger (= 0.70.5)
203 | - Yoga
204 | - React-Core/RCTLinkingHeaders (0.70.5):
205 | - glog
206 | - RCT-Folly (= 2021.07.22.00)
207 | - React-Core/Default
208 | - React-cxxreact (= 0.70.5)
209 | - React-jsi (= 0.70.5)
210 | - React-jsiexecutor (= 0.70.5)
211 | - React-perflogger (= 0.70.5)
212 | - Yoga
213 | - React-Core/RCTNetworkHeaders (0.70.5):
214 | - glog
215 | - RCT-Folly (= 2021.07.22.00)
216 | - React-Core/Default
217 | - React-cxxreact (= 0.70.5)
218 | - React-jsi (= 0.70.5)
219 | - React-jsiexecutor (= 0.70.5)
220 | - React-perflogger (= 0.70.5)
221 | - Yoga
222 | - React-Core/RCTSettingsHeaders (0.70.5):
223 | - glog
224 | - RCT-Folly (= 2021.07.22.00)
225 | - React-Core/Default
226 | - React-cxxreact (= 0.70.5)
227 | - React-jsi (= 0.70.5)
228 | - React-jsiexecutor (= 0.70.5)
229 | - React-perflogger (= 0.70.5)
230 | - Yoga
231 | - React-Core/RCTTextHeaders (0.70.5):
232 | - glog
233 | - RCT-Folly (= 2021.07.22.00)
234 | - React-Core/Default
235 | - React-cxxreact (= 0.70.5)
236 | - React-jsi (= 0.70.5)
237 | - React-jsiexecutor (= 0.70.5)
238 | - React-perflogger (= 0.70.5)
239 | - Yoga
240 | - React-Core/RCTVibrationHeaders (0.70.5):
241 | - glog
242 | - RCT-Folly (= 2021.07.22.00)
243 | - React-Core/Default
244 | - React-cxxreact (= 0.70.5)
245 | - React-jsi (= 0.70.5)
246 | - React-jsiexecutor (= 0.70.5)
247 | - React-perflogger (= 0.70.5)
248 | - Yoga
249 | - React-Core/RCTWebSocket (0.70.5):
250 | - glog
251 | - RCT-Folly (= 2021.07.22.00)
252 | - React-Core/Default (= 0.70.5)
253 | - React-cxxreact (= 0.70.5)
254 | - React-jsi (= 0.70.5)
255 | - React-jsiexecutor (= 0.70.5)
256 | - React-perflogger (= 0.70.5)
257 | - Yoga
258 | - React-CoreModules (0.70.5):
259 | - RCT-Folly (= 2021.07.22.00)
260 | - RCTTypeSafety (= 0.70.5)
261 | - React-Codegen (= 0.70.5)
262 | - React-Core/CoreModulesHeaders (= 0.70.5)
263 | - React-jsi (= 0.70.5)
264 | - React-RCTImage (= 0.70.5)
265 | - ReactCommon/turbomodule/core (= 0.70.5)
266 | - React-cxxreact (0.70.5):
267 | - boost (= 1.76.0)
268 | - DoubleConversion
269 | - glog
270 | - RCT-Folly (= 2021.07.22.00)
271 | - React-callinvoker (= 0.70.5)
272 | - React-jsi (= 0.70.5)
273 | - React-jsinspector (= 0.70.5)
274 | - React-logger (= 0.70.5)
275 | - React-perflogger (= 0.70.5)
276 | - React-runtimeexecutor (= 0.70.5)
277 | - React-hermes (0.70.5):
278 | - DoubleConversion
279 | - glog
280 | - hermes-engine
281 | - RCT-Folly (= 2021.07.22.00)
282 | - RCT-Folly/Futures (= 2021.07.22.00)
283 | - React-cxxreact (= 0.70.5)
284 | - React-jsi (= 0.70.5)
285 | - React-jsiexecutor (= 0.70.5)
286 | - React-jsinspector (= 0.70.5)
287 | - React-perflogger (= 0.70.5)
288 | - React-jsi (0.70.5):
289 | - boost (= 1.76.0)
290 | - DoubleConversion
291 | - glog
292 | - RCT-Folly (= 2021.07.22.00)
293 | - React-jsi/Default (= 0.70.5)
294 | - React-jsi/Default (0.70.5):
295 | - boost (= 1.76.0)
296 | - DoubleConversion
297 | - glog
298 | - RCT-Folly (= 2021.07.22.00)
299 | - React-jsiexecutor (0.70.5):
300 | - DoubleConversion
301 | - glog
302 | - RCT-Folly (= 2021.07.22.00)
303 | - React-cxxreact (= 0.70.5)
304 | - React-jsi (= 0.70.5)
305 | - React-perflogger (= 0.70.5)
306 | - React-jsinspector (0.70.5)
307 | - React-logger (0.70.5):
308 | - glog
309 | - react-native-safe-area-context (4.4.1):
310 | - RCT-Folly
311 | - RCTRequired
312 | - RCTTypeSafety
313 | - React-Core
314 | - ReactCommon/turbomodule/core
315 | - react-native-slider (4.3.3):
316 | - React-Core
317 | - React-perflogger (0.70.5)
318 | - React-RCTActionSheet (0.70.5):
319 | - React-Core/RCTActionSheetHeaders (= 0.70.5)
320 | - React-RCTAnimation (0.70.5):
321 | - RCT-Folly (= 2021.07.22.00)
322 | - RCTTypeSafety (= 0.70.5)
323 | - React-Codegen (= 0.70.5)
324 | - React-Core/RCTAnimationHeaders (= 0.70.5)
325 | - React-jsi (= 0.70.5)
326 | - ReactCommon/turbomodule/core (= 0.70.5)
327 | - React-RCTBlob (0.70.5):
328 | - RCT-Folly (= 2021.07.22.00)
329 | - React-Codegen (= 0.70.5)
330 | - React-Core/RCTBlobHeaders (= 0.70.5)
331 | - React-Core/RCTWebSocket (= 0.70.5)
332 | - React-jsi (= 0.70.5)
333 | - React-RCTNetwork (= 0.70.5)
334 | - ReactCommon/turbomodule/core (= 0.70.5)
335 | - React-RCTImage (0.70.5):
336 | - RCT-Folly (= 2021.07.22.00)
337 | - RCTTypeSafety (= 0.70.5)
338 | - React-Codegen (= 0.70.5)
339 | - React-Core/RCTImageHeaders (= 0.70.5)
340 | - React-jsi (= 0.70.5)
341 | - React-RCTNetwork (= 0.70.5)
342 | - ReactCommon/turbomodule/core (= 0.70.5)
343 | - React-RCTLinking (0.70.5):
344 | - React-Codegen (= 0.70.5)
345 | - React-Core/RCTLinkingHeaders (= 0.70.5)
346 | - React-jsi (= 0.70.5)
347 | - ReactCommon/turbomodule/core (= 0.70.5)
348 | - React-RCTNetwork (0.70.5):
349 | - RCT-Folly (= 2021.07.22.00)
350 | - RCTTypeSafety (= 0.70.5)
351 | - React-Codegen (= 0.70.5)
352 | - React-Core/RCTNetworkHeaders (= 0.70.5)
353 | - React-jsi (= 0.70.5)
354 | - ReactCommon/turbomodule/core (= 0.70.5)
355 | - React-RCTSettings (0.70.5):
356 | - RCT-Folly (= 2021.07.22.00)
357 | - RCTTypeSafety (= 0.70.5)
358 | - React-Codegen (= 0.70.5)
359 | - React-Core/RCTSettingsHeaders (= 0.70.5)
360 | - React-jsi (= 0.70.5)
361 | - ReactCommon/turbomodule/core (= 0.70.5)
362 | - React-RCTText (0.70.5):
363 | - React-Core/RCTTextHeaders (= 0.70.5)
364 | - React-RCTVibration (0.70.5):
365 | - RCT-Folly (= 2021.07.22.00)
366 | - React-Codegen (= 0.70.5)
367 | - React-Core/RCTVibrationHeaders (= 0.70.5)
368 | - React-jsi (= 0.70.5)
369 | - ReactCommon/turbomodule/core (= 0.70.5)
370 | - React-runtimeexecutor (0.70.5):
371 | - React-jsi (= 0.70.5)
372 | - ReactCommon/turbomodule/core (0.70.5):
373 | - DoubleConversion
374 | - glog
375 | - RCT-Folly (= 2021.07.22.00)
376 | - React-bridging (= 0.70.5)
377 | - React-callinvoker (= 0.70.5)
378 | - React-Core (= 0.70.5)
379 | - React-cxxreact (= 0.70.5)
380 | - React-jsi (= 0.70.5)
381 | - React-logger (= 0.70.5)
382 | - React-perflogger (= 0.70.5)
383 | - RNGestureHandler (2.8.0):
384 | - React-Core
385 | - RNScreens (3.18.2):
386 | - React-Core
387 | - React-RCTImage
388 | - RNVectorIcons (9.2.0):
389 | - React-Core
390 | - SocketRocket (0.6.0)
391 | - Yoga (1.14.0)
392 | - YogaKit (1.18.1):
393 | - Yoga (~> 1.14)
394 |
395 | DEPENDENCIES:
396 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
397 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
398 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
399 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
400 | - Flipper (= 0.125.0)
401 | - Flipper-Boost-iOSX (= 1.76.0.1.11)
402 | - Flipper-DoubleConversion (= 3.2.0.1)
403 | - Flipper-Fmt (= 7.1.7)
404 | - Flipper-Folly (= 2.6.10)
405 | - Flipper-Glog (= 0.5.0.5)
406 | - Flipper-PeerTalk (= 0.0.4)
407 | - Flipper-RSocket (= 1.4.3)
408 | - FlipperKit (= 0.125.0)
409 | - FlipperKit/Core (= 0.125.0)
410 | - FlipperKit/CppBridge (= 0.125.0)
411 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0)
412 | - FlipperKit/FBDefines (= 0.125.0)
413 | - FlipperKit/FKPortForwarding (= 0.125.0)
414 | - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0)
415 | - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0)
416 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0)
417 | - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0)
418 | - FlipperKit/FlipperKitReactPlugin (= 0.125.0)
419 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0)
420 | - FlipperKit/SKIOSNetworkPlugin (= 0.125.0)
421 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
422 | - hermes-engine (from `../node_modules/react-native/sdks/hermes/hermes-engine.podspec`)
423 | - libevent (~> 2.1.12)
424 | - lottie-react-native (from `../node_modules/lottie-react-native`)
425 | - OpenSSL-Universal (= 1.1.1100)
426 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
427 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
428 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
429 | - React (from `../node_modules/react-native/`)
430 | - React-bridging (from `../node_modules/react-native/ReactCommon`)
431 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
432 | - React-Codegen (from `build/generated/ios`)
433 | - React-Core (from `../node_modules/react-native/`)
434 | - React-Core/DevSupport (from `../node_modules/react-native/`)
435 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
436 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
437 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
438 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`)
439 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
440 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
441 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
442 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
443 | - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
444 | - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
445 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
446 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
447 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
448 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
449 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
450 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
451 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
452 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
453 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
454 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
455 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
456 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
457 | - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
458 | - RNScreens (from `../node_modules/react-native-screens`)
459 | - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
460 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
461 |
462 | SPEC REPOS:
463 | trunk:
464 | - CocoaAsyncSocket
465 | - Flipper
466 | - Flipper-Boost-iOSX
467 | - Flipper-DoubleConversion
468 | - Flipper-Fmt
469 | - Flipper-Folly
470 | - Flipper-Glog
471 | - Flipper-PeerTalk
472 | - Flipper-RSocket
473 | - FlipperKit
474 | - fmt
475 | - libevent
476 | - lottie-ios
477 | - OpenSSL-Universal
478 | - SocketRocket
479 | - YogaKit
480 |
481 | EXTERNAL SOURCES:
482 | boost:
483 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
484 | DoubleConversion:
485 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
486 | FBLazyVector:
487 | :path: "../node_modules/react-native/Libraries/FBLazyVector"
488 | FBReactNativeSpec:
489 | :path: "../node_modules/react-native/React/FBReactNativeSpec"
490 | glog:
491 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
492 | hermes-engine:
493 | :podspec: "../node_modules/react-native/sdks/hermes/hermes-engine.podspec"
494 | lottie-react-native:
495 | :path: "../node_modules/lottie-react-native"
496 | RCT-Folly:
497 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
498 | RCTRequired:
499 | :path: "../node_modules/react-native/Libraries/RCTRequired"
500 | RCTTypeSafety:
501 | :path: "../node_modules/react-native/Libraries/TypeSafety"
502 | React:
503 | :path: "../node_modules/react-native/"
504 | React-bridging:
505 | :path: "../node_modules/react-native/ReactCommon"
506 | React-callinvoker:
507 | :path: "../node_modules/react-native/ReactCommon/callinvoker"
508 | React-Codegen:
509 | :path: build/generated/ios
510 | React-Core:
511 | :path: "../node_modules/react-native/"
512 | React-CoreModules:
513 | :path: "../node_modules/react-native/React/CoreModules"
514 | React-cxxreact:
515 | :path: "../node_modules/react-native/ReactCommon/cxxreact"
516 | React-hermes:
517 | :path: "../node_modules/react-native/ReactCommon/hermes"
518 | React-jsi:
519 | :path: "../node_modules/react-native/ReactCommon/jsi"
520 | React-jsiexecutor:
521 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
522 | React-jsinspector:
523 | :path: "../node_modules/react-native/ReactCommon/jsinspector"
524 | React-logger:
525 | :path: "../node_modules/react-native/ReactCommon/logger"
526 | react-native-safe-area-context:
527 | :path: "../node_modules/react-native-safe-area-context"
528 | react-native-slider:
529 | :path: "../node_modules/@react-native-community/slider"
530 | React-perflogger:
531 | :path: "../node_modules/react-native/ReactCommon/reactperflogger"
532 | React-RCTActionSheet:
533 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
534 | React-RCTAnimation:
535 | :path: "../node_modules/react-native/Libraries/NativeAnimation"
536 | React-RCTBlob:
537 | :path: "../node_modules/react-native/Libraries/Blob"
538 | React-RCTImage:
539 | :path: "../node_modules/react-native/Libraries/Image"
540 | React-RCTLinking:
541 | :path: "../node_modules/react-native/Libraries/LinkingIOS"
542 | React-RCTNetwork:
543 | :path: "../node_modules/react-native/Libraries/Network"
544 | React-RCTSettings:
545 | :path: "../node_modules/react-native/Libraries/Settings"
546 | React-RCTText:
547 | :path: "../node_modules/react-native/Libraries/Text"
548 | React-RCTVibration:
549 | :path: "../node_modules/react-native/Libraries/Vibration"
550 | React-runtimeexecutor:
551 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
552 | ReactCommon:
553 | :path: "../node_modules/react-native/ReactCommon"
554 | RNGestureHandler:
555 | :path: "../node_modules/react-native-gesture-handler"
556 | RNScreens:
557 | :path: "../node_modules/react-native-screens"
558 | RNVectorIcons:
559 | :path: "../node_modules/react-native-vector-icons"
560 | Yoga:
561 | :path: "../node_modules/react-native/ReactCommon/yoga"
562 |
563 | SPEC CHECKSUMS:
564 | boost: a7c83b31436843459a1961bfd74b96033dc77234
565 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
566 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
567 | FBLazyVector: affa4ba1bfdaac110a789192f4d452b053a86624
568 | FBReactNativeSpec: fe8b5f1429cfe83a8d72dc8ed61dc7704cac8745
569 | Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
570 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
571 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30
572 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b
573 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3
574 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446
575 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
576 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
577 | FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
578 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
579 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
580 | hermes-engine: 7fe5fc6ef707b7fdcb161b63898ec500e285653d
581 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
582 | lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8
583 | lottie-react-native: b702fab740cdb952a8e2354713d3beda63ff97b0
584 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
585 | RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
586 | RCTRequired: 21229f84411088e5d8538f21212de49e46cc83e2
587 | RCTTypeSafety: 62eed57a32924b09edaaf170a548d1fc96223086
588 | React: f0254ccddeeef1defe66c6b1bb9133a4f040792b
589 | React-bridging: e46911666b7ec19538a620a221d6396cd293d687
590 | React-callinvoker: 66b62e2c34546546b2f21ab0b7670346410a2b53
591 | React-Codegen: b6999435966df3bdf82afa3f319ba0d6f9a8532a
592 | React-Core: dabbc9d1fe0a11d884e6ee1599789cf8eb1058a5
593 | React-CoreModules: 5b6b7668f156f73a56420df9ec68ca2ec8f2e818
594 | React-cxxreact: c7ca2baee46db22a30fce9e639277add3c3f6ad1
595 | React-hermes: c93e1d759ad5560dfea54d233013d7d2c725c286
596 | React-jsi: a565dcb49130ed20877a9bb1105ffeecbb93d02d
597 | React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
598 | React-jsinspector: badd81696361249893a80477983e697aab3c1a34
599 | React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
600 | react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
601 | react-native-slider: 7d19220da2f2ae7cbb9aa80127cb73c597fa221f
602 | React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
603 | React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
604 | React-RCTAnimation: 578eebac706428e68466118e84aeacf3a282b4da
605 | React-RCTBlob: f47a0aa61e7d1fb1a0e13da832b0da934939d71a
606 | React-RCTImage: 60f54b66eed65d86b6dffaf4733d09161d44929d
607 | React-RCTLinking: 91073205aeec4b29450ca79b709277319368ac9e
608 | React-RCTNetwork: ca91f2c9465a7e335c8a5fae731fd7f10572213b
609 | React-RCTSettings: 1a9a5d01337d55c18168c1abe0f4a589167d134a
610 | React-RCTText: c591e8bd9347a294d8416357ca12d779afec01d5
611 | React-RCTVibration: 8e5c8c5d17af641f306d7380d8d0fe9b3c142c48
612 | React-runtimeexecutor: 7401c4a40f8728fd89df4a56104541b760876117
613 | ReactCommon: c9246996e73bf75a2c6c3ff15f1e16707cdc2da9
614 | RNGestureHandler: 62232ba8f562f7dea5ba1b3383494eb5bf97a4d3
615 | RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
616 | RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
617 | SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
618 | Yoga: eca980a5771bf114c41a754098cd85e6e0d90ed7
619 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
620 |
621 | PODFILE CHECKSUM: 506ec3cc93ca6992bf83d8b2b990f30a2f80192a
622 |
623 | COCOAPODS: 1.11.3
624 |
--------------------------------------------------------------------------------
/ios/link-assets-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "migIndex": 1,
3 | "data": [
4 | {
5 | "path": "src/assets/fonts/MrRobot.otf",
6 | "sha1": "d720e687984226ed91febcc09a7e95327ea8029e"
7 | }
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents.xcodeproj/xcshareddata/xcschemes/reactNativeComponents.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/AppDelegate.h:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | @interface AppDelegate : UIResponder
5 |
6 | @property (nonatomic, strong) UIWindow *window;
7 |
8 | @end
9 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/AppDelegate.mm:
--------------------------------------------------------------------------------
1 | #import "AppDelegate.h"
2 |
3 | #import
4 | #import
5 | #import
6 |
7 | #import
8 |
9 | #if RCT_NEW_ARCH_ENABLED
10 | #import
11 | #import
12 | #import
13 | #import
14 | #import
15 | #import
16 |
17 | #import
18 |
19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot";
20 |
21 | @interface AppDelegate () {
22 | RCTTurboModuleManager *_turboModuleManager;
23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
24 | std::shared_ptr _reactNativeConfig;
25 | facebook::react::ContextContainer::Shared _contextContainer;
26 | }
27 | @end
28 | #endif
29 |
30 | @implementation AppDelegate
31 |
32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
33 | {
34 | RCTAppSetupPrepareApp(application);
35 |
36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
37 |
38 | #if RCT_NEW_ARCH_ENABLED
39 | _contextContainer = std::make_shared();
40 | _reactNativeConfig = std::make_shared();
41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
44 | #endif
45 |
46 | NSDictionary *initProps = [self prepareInitialProps];
47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"reactNativeComponents", initProps);
48 |
49 | if (@available(iOS 13.0, *)) {
50 | rootView.backgroundColor = [UIColor systemBackgroundColor];
51 | } else {
52 | rootView.backgroundColor = [UIColor whiteColor];
53 | }
54 |
55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
56 | UIViewController *rootViewController = [UIViewController new];
57 | rootViewController.view = rootView;
58 | self.window.rootViewController = rootViewController;
59 | [self.window makeKeyAndVisible];
60 | return YES;
61 | }
62 |
63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
64 | ///
65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`.
68 | - (BOOL)concurrentRootEnabled
69 | {
70 | // Switch this bool to turn on and off the concurrent root
71 | return true;
72 | }
73 |
74 | - (NSDictionary *)prepareInitialProps
75 | {
76 | NSMutableDictionary *initProps = [NSMutableDictionary new];
77 |
78 | #ifdef RCT_NEW_ARCH_ENABLED
79 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]);
80 | #endif
81 |
82 | return initProps;
83 | }
84 |
85 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
86 | {
87 | #if DEBUG
88 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
89 | #else
90 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
91 | #endif
92 | }
93 |
94 | #if RCT_NEW_ARCH_ENABLED
95 |
96 | #pragma mark - RCTCxxBridgeDelegate
97 |
98 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge
99 | {
100 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
101 | delegate:self
102 | jsInvoker:bridge.jsCallInvoker];
103 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
104 | }
105 |
106 | #pragma mark RCTTurboModuleManagerDelegate
107 |
108 | - (Class)getModuleClassFromName:(const char *)name
109 | {
110 | return RCTCoreModulesClassProvider(name);
111 | }
112 |
113 | - (std::shared_ptr)getTurboModule:(const std::string &)name
114 | jsInvoker:(std::shared_ptr)jsInvoker
115 | {
116 | return nullptr;
117 | }
118 |
119 | - (std::shared_ptr)getTurboModule:(const std::string &)name
120 | initParams:
121 | (const facebook::react::ObjCTurboModule::InitParams &)params
122 | {
123 | return nullptr;
124 | }
125 |
126 | - (id)getModuleInstanceFromClass:(Class)moduleClass
127 | {
128 | return RCTAppSetupDefaultModuleFromClass(moduleClass);
129 | }
130 |
131 | #endif
132 |
133 | @end
134 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "scale" : "2x",
6 | "size" : "20x20"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "scale" : "3x",
11 | "size" : "20x20"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "scale" : "2x",
16 | "size" : "29x29"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "scale" : "3x",
21 | "size" : "29x29"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "scale" : "2x",
26 | "size" : "40x40"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "scale" : "3x",
31 | "size" : "40x40"
32 | },
33 | {
34 | "idiom" : "iphone",
35 | "scale" : "2x",
36 | "size" : "60x60"
37 | },
38 | {
39 | "idiom" : "iphone",
40 | "scale" : "3x",
41 | "size" : "60x60"
42 | },
43 | {
44 | "idiom" : "ios-marketing",
45 | "scale" : "1x",
46 | "size" : "1024x1024"
47 | }
48 | ],
49 | "info" : {
50 | "author" : "xcode",
51 | "version" : 1
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | reactNativeComponents
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | 1.0
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 1
25 | LSRequiresIPhoneOS
26 |
27 | NSAppTransportSecurity
28 |
29 | NSExceptionDomains
30 |
31 | localhost
32 |
33 | NSExceptionAllowsInsecureHTTPLoads
34 |
35 |
36 |
37 |
38 | NSLocationWhenInUseUsageDescription
39 |
40 | UILaunchStoryboardName
41 | LaunchScreen
42 | UIRequiredDeviceCapabilities
43 |
44 | armv7
45 |
46 | UISupportedInterfaceOrientations
47 |
48 | UIInterfaceOrientationPortrait
49 | UIInterfaceOrientationLandscapeLeft
50 | UIInterfaceOrientationLandscapeRight
51 |
52 | UIViewControllerBasedStatusBarAppearance
53 |
54 | UIAppFonts
55 |
56 | MrRobot.otf
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/ios/reactNativeComponents/main.m:
--------------------------------------------------------------------------------
1 | #import
2 |
3 | #import "AppDelegate.h"
4 |
5 | int main(int argc, char *argv[])
6 | {
7 | @autoreleasepool {
8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/ios/reactNativeComponentsTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/ios/reactNativeComponentsTests/reactNativeComponentsTests.m:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | #import
5 | #import
6 |
7 | #define TIMEOUT_SECONDS 600
8 | #define TEXT_TO_LOOK_FOR @"Welcome to React"
9 |
10 | @interface reactNativeComponentsTests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation reactNativeComponentsTests
15 |
16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
17 | {
18 | if (test(view)) {
19 | return YES;
20 | }
21 | for (UIView *subview in [view subviews]) {
22 | if ([self findSubviewInView:subview matching:test]) {
23 | return YES;
24 | }
25 | }
26 | return NO;
27 | }
28 |
29 | - (void)testRendersWelcomeScreen
30 | {
31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
33 | BOOL foundElement = NO;
34 |
35 | __block NSString *redboxError = nil;
36 | #ifdef DEBUG
37 | RCTSetLogFunction(
38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
39 | if (level >= RCTLogLevelError) {
40 | redboxError = message;
41 | }
42 | });
43 | #endif
44 |
45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
48 |
49 | foundElement = [self findSubviewInView:vc.view
50 | matching:^BOOL(UIView *view) {
51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
52 | return YES;
53 | }
54 | return NO;
55 | }];
56 | }
57 |
58 | #ifdef DEBUG
59 | RCTSetLogFunction(RCTDefaultLogFunction);
60 | #endif
61 |
62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
64 | }
65 |
66 | @end
67 |
--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Metro configuration for React Native
3 | * https://github.com/facebook/react-native
4 | *
5 | * @format
6 | */
7 |
8 | module.exports = {
9 | transformer: {
10 | getTransformOptions: async () => ({
11 | transform: {
12 | experimentalImportSupport: false,
13 | inlineRequires: true,
14 | },
15 | }),
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactnativecomponents",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "android": "react-native run-android",
7 | "ios": "react-native run-ios",
8 | "start": "react-native start",
9 | "test": "jest",
10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
11 | },
12 | "dependencies": {
13 | "@react-native-community/slider": "^4.3.3",
14 | "@react-navigation/native": "^6.0.13",
15 | "@react-navigation/stack": "^6.3.4",
16 | "@rneui/base": "^4.0.0-rc.7",
17 | "@rneui/themed": "^4.0.0-rc.7",
18 | "lottie-react-native": "^5.1.4",
19 | "react": "18.1.0",
20 | "react-native": "0.70.5",
21 | "react-native-gesture-handler": "^2.8.0",
22 | "react-native-prompt-android": "^1.1.0",
23 | "react-native-safe-area-context": "^4.4.1",
24 | "react-native-screens": "^3.18.2",
25 | "react-native-vector-icons": "^9.2.0"
26 | },
27 | "devDependencies": {
28 | "@babel/core": "^7.12.9",
29 | "@babel/runtime": "^7.12.5",
30 | "@react-native-community/eslint-config": "^2.0.0",
31 | "@tsconfig/react-native": "^2.0.2",
32 | "@types/jest": "^26.0.23",
33 | "@types/react": "^18.0.21",
34 | "@types/react-native": "^0.70.6",
35 | "@types/react-test-renderer": "^18.0.0",
36 | "@typescript-eslint/eslint-plugin": "^5.37.0",
37 | "@typescript-eslint/parser": "^5.37.0",
38 | "babel-jest": "^26.6.3",
39 | "eslint": "^7.32.0",
40 | "jest": "^26.6.3",
41 | "metro-react-native-babel-preset": "0.72.3",
42 | "react-test-renderer": "18.1.0",
43 | "typescript": "^4.8.3"
44 | },
45 | "jest": {
46 | "preset": "react-native",
47 | "moduleFileExtensions": [
48 | "ts",
49 | "tsx",
50 | "js",
51 | "jsx",
52 | "json",
53 | "node"
54 | ]
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/react-native.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | project: {
3 | ios: {},
4 | android: {}
5 | },
6 | assets: ['./src/assets/fonts/']
7 | }
8 |
9 | /*
10 | * REMEMBER: In v0.69 and + of RN versions link command has been removed:
11 | * The new command is: $ npx react-native-asset
12 | */
--------------------------------------------------------------------------------
/src/assets/bouncing-fruits.json:
--------------------------------------------------------------------------------
1 | {"v":"4.8.0","meta":{"g":"LottieFiles AE ","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":152,"w":1920,"h":1400,"nm":"Slide 0001","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Dot Top Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1196.103,301.894,0],"ix":2},"a":{"a":0,"k":[36.77,36.77,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":38,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":48,"s":[120,120,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[80,80,100]},{"t":56,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-20.169],[20.169,0],[0,20.169],[-20.169,0]],"o":[[0,20.169],[-20.169,0],[0,-20.169],[20.169,0]],"v":[[36.52,-0.001],[0,36.52],[-36.52,-0.001],[0,-36.52]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.062745098039,0.188235309077,0.247058838489,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.769,36.77],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Dot Middle Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1204.851,433.115,0],"ix":2},"a":{"a":0,"k":[36.77,36.77,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":43,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":53,"s":[120,120,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":57,"s":[80,80,100]},{"t":61,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-20.169],[20.169,0],[0,20.169],[-20.169,0]],"o":[[0,20.169],[-20.169,0],[0,-20.169],[20.169,0]],"v":[[36.52,-0.001],[0,36.52],[-36.52,-0.001],[0,-36.52]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.062745098039,0.188235309077,0.247058838489,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.77,36.77],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Dot Bottom Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1212.87,564.336,0],"ix":2},"a":{"a":0,"k":[36.77,36.77,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":48,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":58,"s":[120,120,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":62,"s":[80,80,100]},{"t":66,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-20.169],[20.169,0],[0,20.169],[-20.169,0]],"o":[[0,20.169],[-20.169,0],[0,-20.169],[20.169,0]],"v":[[36.52,-0.001],[0,36.52],[-36.52,-0.001],[0,-36.52]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.062745098039,0.188235309077,0.247058838489,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.77,36.77],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Coffee Head Mask","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,700,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[729.317,539.987],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.959631048464,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.342,-782.007],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,99.124],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Coffee Maker Head Outlines","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":22,"s":[957.054,-247.892,0],"to":[0,152.167,0],"ti":[0,-117.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":37,"s":[957.054,665.108,0],"to":[0,117.667,0],"ti":[0,34.5,0]},{"t":47,"s":[957.054,458.108,0]}],"ix":2},"a":{"a":0,"k":[169.455,271.509,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[53.676,-241.892],[-84.602,-241.892],[-84.602,241.892],[84.602,241.892]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.819607902976,0.925490255917,0.984313785329,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[254.057,242.142],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-53.674,-241.892],[-84.602,241.892],[84.602,241.892],[84.602,-241.892]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[84.853,242.142],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-10.581,0],[0,0],[0,10.581]],"o":[[0,0],[0,0],[0,10.581],[0,0],[10.581,0],[0,0]],"v":[[169.205,-29.368],[-169.205,-29.368],[-169.205,10.209],[-150.046,29.367],[150.047,29.367],[169.205,10.209]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.172549019608,0.349019607843,0.447058853449,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[169.455,513.401],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Boop Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":56,"s":[957.054,682.742,0],"to":[0,8.5,0],"ti":[0,-8.5,0]},{"t":73,"s":[957.054,733.742,0]}],"ix":2},"a":{"a":0,"k":[38.233,29.618,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-6.016,0],[0,0],[0,6.016]],"o":[[0,0],[0,0],[0,6.016],[0,0],[6.016,0],[0,0]],"v":[[37.984,-29.368],[-37.984,-29.368],[-37.984,18.476],[-27.091,29.368],[27.091,29.368],[37.984,18.476]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.062745098039,0.188235309077,0.247058838489,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[38.234,29.618],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":56,"op":3591,"st":-9,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Coffee Liquid Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.438,"y":1},"o":{"x":0.772,"y":0},"t":65,"s":[957.054,550.997,0],"to":[0,73.153,0],"ti":[0,-73.153,0]},{"t":93,"s":[957.054,989.916,0]}],"ix":2},"a":{"a":0,"k":[81.716,75.27,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":74,"s":[14,50,100]},{"t":93,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-40.733,-7.223],[-38.944,7.223],[40.733,7.223],[40.733,-7.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.756862804936,0.466666696586,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[40.983,7.473],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[40.733,-7.223],[-40.733,-7.223],[-40.733,7.223],[38.944,7.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.647058823529,0.384313755409,0.145098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[122.45,7.473],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[-0.602,5.363]],"o":[[0,0],[0,0],[0,0],[5.396,0],[0,0]],"v":[[39.839,-67.798],[-39.839,-67.798],[-39.839,67.798],[14.655,67.798],[25.189,58.38]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.309803921569,0.109803929048,0.047058827269,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[121.555,82.493],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-5.396,0],[0,0],[0,0]],"o":[[0,0],[0.602,5.363],[0,0],[0,0],[0,0]],"v":[[-39.839,-67.798],[-25.189,58.38],[-14.655,67.798],[39.839,67.798],[39.839,-67.798]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.400000029919,0.172549019608,0.113725497676,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[41.877,82.493],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":65,"op":3602,"st":2,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Coffee Cup Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":37,"s":[957.054,775.615,0],"to":[0,35.333,0],"ti":[0,-35.333,0]},{"t":47,"s":[957.054,987.615,0]}],"ix":2},"a":{"a":0,"k":[99.213,107.961,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-49.481,-88.143],[-27.611,88.143],[49.481,88.143],[49.481,-88.143]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.611764705882,0.925490255917,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[49.731,88.392],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[49.482,-88.143],[-49.482,-88.143],[-49.482,88.143],[27.611,88.143]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.486274539723,0.850980451995,0.909803981407,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[148.694,88.392],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,10.408],[0,0]],"o":[[0,0],[0,0],[10.407,0],[0,0],[0,0]],"v":[[-38.546,-19.568],[-38.546,19.569],[19.702,19.569],[38.546,0.724],[38.546,-19.568]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.486274539723,0.850980451995,0.909803981407,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[137.759,196.103],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-10.408,0],[0,0],[0,0]],"o":[[0,0],[0,10.408],[0,0],[0,0],[0,0]],"v":[[-38.546,-19.568],[-38.546,0.724],[-19.701,19.569],[38.546,19.569],[38.546,-19.568]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.611764705882,0.925490255917,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[60.666,196.103],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":37,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Coffee Base Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,1154.238,0],"ix":2},"a":{"a":0,"k":[407.472,59.164,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[140,120,100]},{"t":15,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[202.138,-58.913],[-189.688,-58.913],[-202.138,58.913],[202.138,58.913]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.172549019608,0.349019607843,0.447058853449,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[202.388,59.164],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[205.083,58.913],[-205.083,58.913],[-205.083,-58.913],[192.633,-58.913]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.062745098039,0.188235309077,0.247058838489,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[609.61,59.164],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Yellow Coffe Make Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[960,1178.452,0],"to":[0,-11,0],"ti":[0,11,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":20,"s":[960,1112.452,0],"to":[0,0,0],"ti":[0,0,0]},{"t":24,"s":[960,1112.452,0]}],"ix":2},"a":{"a":0,"k":[360.51,925.854,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.193,0.168,0.333],"y":[0,0,0]},"t":12,"s":[100,3,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":20,"s":[109,118,100]},{"t":24,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[28.729,0],[0,0],[0,0],[0,0]],"o":[[-1.833,-28.67],[0,0],[0,0],[0,0],[0,0]],"v":[[139.762,-190.906],[85.411,-241.892],[-167.428,-241.892],[-167.428,241.892],[167.429,241.892]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.941176530427,0.521568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[524.993,242.142],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[1.833,-28.67],[0,0],[0,0]],"o":[[0,0],[-28.728,0],[0,0],[0,0],[0,0]],"v":[[164.484,-241.892],[-82.466,-241.892],[-136.815,-190.906],[-164.484,241.892],[164.484,241.892]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.956862804936,0.713725490196,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[193.081,242.142],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[331.912,-29.367],[-331.912,-29.367],[-335.667,29.367],[335.667,29.367]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.819607902976,0.313725490196,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[360.51,513.401],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-149.02,-231.802],[-178.658,231.802],[178.657,231.802],[178.657,-231.802]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.941176530427,0.521568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[178.908,695.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-181.603,-231.802],[-181.603,231.802],[181.603,231.802],[151.965,-231.802]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.819607902976,0.313725490196,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[539.168,695.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":3600,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Coffee Animation","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,700,0],"ix":2},"a":{"a":0,"k":[960,700,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":122,"s":[75,75,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[1,1,0.333],"y":[0,0,0]},"t":130,"s":[85,85,100]},{"t":139,"s":[0,0,100]}],"ix":6}},"ao":0,"w":1920,"h":1400,"ip":0,"op":3600,"st":0,"bm":0}],"markers":[]}
--------------------------------------------------------------------------------
/src/assets/fonts/MrRobot.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/src/assets/fonts/MrRobot.otf
--------------------------------------------------------------------------------
/src/assets/slides/slide-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/src/assets/slides/slide-1.png
--------------------------------------------------------------------------------
/src/assets/slides/slide-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/src/assets/slides/slide-2.png
--------------------------------------------------------------------------------
/src/assets/slides/slide-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/src/assets/slides/slide-3.png
--------------------------------------------------------------------------------
/src/components/Badge.tsx:
--------------------------------------------------------------------------------
1 | import { View, Text, StyleSheet } from 'react-native';
2 | import React from 'react';
3 |
4 | interface Props {
5 | title: string,
6 | badgeColor?: string,
7 | textColor?: string,
8 | }
9 |
10 | export const Badge = ({
11 | title,
12 | badgeColor = '#FFCC00',
13 | textColor = 'white'
14 | }:Props) => {
15 | return (
16 |
17 | {title}
18 |
19 | )
20 | }
21 |
22 | const styles = StyleSheet.create({
23 | container: {
24 | borderWidth: 2,
25 | borderColor: 'white',
26 | bottom: 10,
27 | borderRadius: 10,
28 | marginHorizontal: 5,
29 | padding: 3,
30 | }
31 | });
32 |
--------------------------------------------------------------------------------
/src/components/ButtonIcon.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
3 | import Icon from 'react-native-vector-icons/Ionicons'
4 | import { ThemeContext } from '../context/theme/ThemeContext';
5 |
6 | interface Props {
7 | action?: () => void,
8 | text?: string,
9 | iconName: string,
10 | }
11 |
12 | export const ButtonIcon = ({action, iconName, text}:Props) => {
13 |
14 | const {theme: {colors}} = useContext(ThemeContext);
15 |
16 | return (
17 |
21 |
22 |
27 | {text}
28 |
29 |
30 | );
31 | }
32 |
33 | const styles = StyleSheet.create({
34 | buttonContainer: {
35 | //alignItems: 'center',
36 | justifyContent: 'center',
37 | width: 100,
38 | height: 50,
39 | borderRadius: 10
40 | }
41 | })
42 |
--------------------------------------------------------------------------------
/src/components/CustomSwitch.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { Switch, Platform } from 'react-native'
3 | import { ThemeContext } from '../context/theme/ThemeContext';
4 |
5 | interface Props {
6 | isToggle: boolean,
7 | onChange: (value:boolean) => void,
8 | }
9 |
10 | export const CustomSwitch = ({isToggle, onChange}:Props) => {
11 |
12 | const [isEnabled, setIsEnabled] = useState(isToggle);
13 | const {theme: {colors}} = useContext(ThemeContext);
14 |
15 | const toggleSwitch = () => {
16 | setIsEnabled(!isEnabled);
17 | onChange(!isEnabled);
18 | }
19 |
20 |
21 | return (
22 |
29 | )
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/src/components/FadeInImage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { Animated, StyleSheet, View, ActivityIndicator, StyleProp, ImageStyle } from 'react-native';
3 | import { ThemeContext } from '../context/theme/ThemeContext';
4 | import { useAnimated } from '../hooks/useAnimated';
5 |
6 | interface Props {
7 | uri: string,
8 | style?: StyleProp,
9 | }
10 |
11 |
12 | export const FadeInImage = ({uri, style}:Props) => {
13 |
14 | const {opacityValue, fadeIn} = useAnimated();
15 | const [isLoaded, setIsLoaded] = useState(true);
16 |
17 | const {theme: {colors}} = useContext(ThemeContext);
18 |
19 | const finishLoading = () => {
20 | setIsLoaded(false);
21 | fadeIn();
22 | }
23 |
24 | return (
25 |
26 | {
27 | isLoaded &&
31 | }
32 |
37 |
38 | )
39 | }
40 |
41 | const styles = StyleSheet.create({
42 | container: {
43 | justifyContent: 'center',
44 | alignItems: 'center',
45 | marginHorizontal: 5
46 | }
47 | })
48 |
--------------------------------------------------------------------------------
/src/components/FlatListMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { useNavigation } from '@react-navigation/core'
3 | import { StackNavigationProp } from '@react-navigation/stack'
4 | import { TouchableOpacity } from 'react-native-gesture-handler'
5 | import { View, Text, StyleSheet } from 'react-native'
6 | import { ThemeContext } from '../context/theme/ThemeContext'
7 | import { menuItem } from '../interfaces/FlatListMenuItem';
8 | import Icon from 'react-native-vector-icons/Ionicons'
9 | import { Spacer } from './Spacer';
10 | import { Badge } from './Badge';
11 |
12 | interface Props {
13 | menuItem: menuItem
14 | }
15 |
16 | export const FlatListMenuItem = ({menuItem}:Props) => {
17 |
18 | const navigation = useNavigation>();
19 |
20 | const {theme: {colors, icons}} = useContext(ThemeContext);
21 |
22 | return (
23 | navigation.navigate(menuItem.route)}>
25 |
26 |
27 |
32 |
33 | {menuItem.name}
34 |
35 | {
36 | menuItem.isIssued ?
37 |
40 | : ''
41 | }
42 |
43 |
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
55 | const styles = StyleSheet.create({
56 | container: {
57 | flex: 1,
58 | marginTop: 20,
59 | justifyContent: 'center',
60 | },
61 | containerList: {
62 | // backgroundColor: 'pink',
63 | alignItems: 'center',
64 | flexDirection: 'row'
65 | },
66 | textList: {
67 | fontSize: 18,
68 | paddingLeft: 5,
69 | color: 'gray'
70 | }
71 | });
72 |
73 |
--------------------------------------------------------------------------------
/src/components/ItemDivider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { StyleSheet, Text, View } from 'react-native'
3 | import { Divider } from '@rneui/themed';
4 | import { ThemeContext } from '../context/theme/ThemeContext';
5 |
6 | export const ItemDivider = () => {
7 |
8 | const {theme: {dividerColor}} = useContext(ThemeContext);
9 |
10 | return (
11 |
12 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/PullRefreshControl.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { RefreshControl, StyleSheet, ScrollView } from 'react-native';
3 | import { ThemeContext } from '../context/theme/ThemeContext';
4 |
5 | interface Props {
6 | refreshing: boolean,
7 | onRefresh: () => void,
8 | children: JSX.Element | JSX.Element[]
9 | }
10 |
11 |
12 | export const PullRefreshControl = ({refreshing, onRefresh, children}:Props) => {
13 |
14 | const {theme: {colors, dark}} = useContext(ThemeContext);
15 |
16 | return (
17 |
26 | }
27 | >
28 | {children}
29 |
30 |
31 | )
32 | }
33 |
34 | const styles = StyleSheet.create({
35 | container: {
36 | flex: 1,
37 | //backgroundColor: 'red'
38 | },
39 | });
40 |
--------------------------------------------------------------------------------
/src/components/Spacer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { View } from 'react-native'
3 |
4 | export const Spacer = () => {
5 | return (
6 |
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/TitleHeader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Text, View } from 'react-native'
3 | import { useSafeAreaInsets } from 'react-native-safe-area-context';
4 | import { ThemeContext } from '../context/theme/ThemeContext';
5 | import { styles } from '../theme/appTheme'
6 |
7 | interface Props {
8 | text: string,
9 | }
10 |
11 |
12 | export const TitleHeader = ({text}:Props) => {
13 | //To fix top element in IOS
14 | const {top} = useSafeAreaInsets();
15 |
16 | const {theme: {colors}} = useContext(ThemeContext);
17 |
18 | return (
19 |
20 | {text}
21 |
22 | )
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/src/context/theme/ThemeContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useEffect, useReducer } from "react";
2 | import { Appearance, AppState, useColorScheme } from "react-native";
3 | import { ThemeState, themeReducer, lightTheme, darkTheme } from './themeReducer';
4 |
5 | //Props to createContext
6 | interface ThemeContextProps {
7 | theme: ThemeState,
8 | setDarkTheme: () => void,
9 | setLightTheme: () => void,
10 | }
11 |
12 | //Create context
13 | export const ThemeContext = createContext({} as ThemeContextProps);
14 |
15 |
16 | //Context provider
17 | export const ThemeProvider = ({children}:any) => {
18 |
19 |
20 | const [theme, dispatch] = useReducer(themeReducer,
21 | (Appearance.getColorScheme() === 'dark'
22 | ? darkTheme : lightTheme
23 | ));
24 |
25 | useEffect(() => {
26 | AppState.addEventListener('change', (status) => {
27 | //console.log({status});
28 | if(status === 'active') {
29 | (Appearance.getColorScheme() === 'light')
30 | ? setLightTheme()
31 | : setDarkTheme()
32 | }
33 | })
34 | }, [])
35 |
36 | //To detect colorScheme change and set the theme (only iOS)
37 | //const colorScheme = useColorScheme();
38 | /* useEffect(() => {
39 | (colorScheme === 'light')
40 | ? setLightTheme()
41 | : setDarkTheme()
42 | }, [colorScheme]) */
43 |
44 | const setDarkTheme = () => {
45 | dispatch({type: 'set_dark_theme'});
46 | console.log('SetDarkTheme');
47 | }
48 |
49 | const setLightTheme = () => {
50 | dispatch({type: 'set_light_theme'});
51 | console.log('SetLightTheme');
52 | }
53 |
54 |
55 | return (
56 |
61 | {children}
62 |
63 | );
64 | }
--------------------------------------------------------------------------------
/src/context/theme/themeReducer.tsx:
--------------------------------------------------------------------------------
1 | import { Theme } from "@react-navigation/native"
2 |
3 | type ThemeAction =
4 | | { type: 'set_light_theme'}
5 | | { type: 'set_dark_theme' }
6 |
7 | export interface ThemeState extends Theme {
8 | currentTheme: 'light' | 'dark',
9 | dividerColor: string;
10 | icons: {
11 | primary: string;
12 | secondary: string;
13 | background: string;
14 | };
15 |
16 | }
17 |
18 | export const lightTheme: ThemeState = {
19 | currentTheme: 'light',
20 | dark: false,
21 | colors: {
22 | primary: '#1e90ff',
23 | background: 'white',
24 | card: 'green',
25 | text: 'black',
26 | border: 'orange',
27 | notification: 'skyblue',
28 | },
29 | icons: {
30 | primary: '#1e90ff',
31 | secondary: '#F0A23B',
32 | background: '#f6f6f6',
33 | },
34 | dividerColor: '#f6f6f6',
35 | }
36 |
37 | export const darkTheme: ThemeState = {
38 | currentTheme: 'light',
39 | dark: true,
40 | colors: {
41 | primary: '#1e90ff',
42 | background: '#181818',
43 | card: 'green',
44 | text: 'white',
45 | border: 'orange',
46 | notification: 'skyblue',
47 | },
48 | icons: {
49 | primary: '#1e90ff',
50 | secondary: '#F0A23B',
51 | background: '#f6f6f6',
52 | },
53 | dividerColor: '#dcdcdc',
54 | }
55 |
56 | export const themeReducer = (state:ThemeState, action:ThemeAction):ThemeState => {
57 | switch (action.type) {
58 | case 'set_light_theme':
59 | return { ...lightTheme }
60 | case 'set_dark_theme':
61 | return { ...darkTheme }
62 | default:
63 | return state;
64 | }
65 | }
--------------------------------------------------------------------------------
/src/data/menuItems.tsx:
--------------------------------------------------------------------------------
1 | import { menuItem } from "../interfaces/FlatListMenuItem";
2 |
3 | export const optionsMenu: menuItem[] = [
4 | {
5 | name: 'Alert',
6 | icon: 'cube-outline',
7 | route: 'AlertScreen'
8 | },
9 | {
10 | name: 'Fade in/out animation',
11 | icon: 'cube-outline',
12 | route: 'Animation101Screen',
13 | },
14 | {
15 | name: 'Inifite Scroll',
16 | icon: 'cube-outline',
17 | route: 'InfiniteScrollScreen',
18 | },
19 | {
20 | name: 'Modal',
21 | icon: 'cube-outline',
22 | route: 'ModalScreen',
23 | isIssued: true,
24 | },
25 | {
26 | name: 'Move X/Y animation',
27 | icon: 'cube-outline',
28 | route: 'Animation102Screen'
29 | },
30 | {
31 | name: 'Pull to refresh',
32 | icon: 'cube-outline',
33 | route: 'PullRefreshScreen'
34 | },
35 | {
36 | name: 'SectionList',
37 | icon: 'cube-outline',
38 | route: 'SectionListScreen'
39 | },
40 | {
41 | name: 'Slider',
42 | icon: 'cube-outline',
43 | route: 'SliderScreen',
44 | },
45 | {
46 | name: 'Switch',
47 | icon: 'cube-outline',
48 | route: 'SwitchScreen'
49 | },
50 | {
51 | name: 'TextInput',
52 | icon: 'cube-outline',
53 | route: 'TextInputScreen'
54 | },
55 | {
56 | name: 'Theme',
57 | icon: 'cube-outline',
58 | route: 'ThemeScreen'
59 | },
60 | ];
--------------------------------------------------------------------------------
/src/data/strings.tsx:
--------------------------------------------------------------------------------
1 | // This file contains global object with some large strings
2 |
3 | export const strings = {
4 | listheader: '¡🤓 Feel free to add more fantastic components in this open source app!'
5 | }
--------------------------------------------------------------------------------
/src/hooks/useAnimated.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react"
2 | import { Animated, Easing, PanResponder } from "react-native"
3 |
4 |
5 |
6 | export const useAnimated = (opacity:number = 0) => {
7 | //Initial opacity reference
8 |
9 | //To opacity
10 | const opacityValue = useRef(new Animated.Value(opacity)).current;
11 |
12 | //To animate
13 | const topDrop = useRef(new Animated.Value(0)).current;
14 |
15 |
16 | const startMoving = (initialPosition:number, duration:number = 1000) => {
17 |
18 | topDrop.setValue(initialPosition);
19 |
20 | Animated.timing(
21 | topDrop,
22 | {
23 | toValue: 0,
24 | duration: duration,
25 | useNativeDriver: true,
26 | easing: Easing.bounce
27 | }
28 | ).start()
29 | }
30 |
31 | const stopMoving = (finalPosition:number, duration:number = 500) => {
32 | Animated.timing(
33 | topDrop,
34 | {
35 | toValue: finalPosition,
36 | duration: duration,
37 | useNativeDriver: true
38 | }
39 | ).start()
40 | }
41 |
42 | //To fadeIn any element or container
43 | const fadeIn = (callback?: Function) => {
44 | Animated.timing(
45 | opacityValue,
46 | {
47 | toValue: 1,
48 | duration: 800,
49 | useNativeDriver: true,
50 | }
51 | ).start(() => callback ? callback : null)
52 | }
53 |
54 | //To fadeOut any element or container
55 | const fadeOut = () => {
56 | Animated.timing(
57 | opacityValue,
58 | {
59 | toValue: 0,
60 | duration: 800,
61 | useNativeDriver: true
62 | }
63 | ).start()
64 | }
65 |
66 | return {
67 | fadeIn,
68 | fadeOut,
69 | opacityValue,
70 | topDrop,
71 | startMoving,
72 | stopMoving
73 | }
74 |
75 | }
--------------------------------------------------------------------------------
/src/hooks/useForm.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export const useForm = (form: T) => {
4 |
5 | //console.log("The object is here:", form)
6 |
7 | const [state, setState] = useState(form);
8 |
9 | const onChange = (value:K, field: keyof T) => {
10 | setState({
11 | ...state,
12 | [field]:value
13 | })
14 | }
15 |
16 | return {
17 | ...state,
18 | form: state,
19 | onChange
20 | }
21 | }
--------------------------------------------------------------------------------
/src/hooks/useRefresh.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 |
4 | export const useRefresh = () => {
5 |
6 | const [refreshing, setRefreshing] = useState(false);
7 | const [result, setResult] = useState(false);
8 |
9 | const onRefresh = async () => {
10 | setRefreshing(true);
11 | setTimeout(() => {
12 | //console.log('Refresh end');
13 | setRefreshing(false);
14 | setResult(true);
15 | }, 6000);
16 | }
17 |
18 | return {
19 | refreshing,
20 | onRefresh,
21 | result,
22 | }
23 | }
--------------------------------------------------------------------------------
/src/interfaces/FlatListMenuItem.tsx:
--------------------------------------------------------------------------------
1 | export interface menuItem {
2 | name: string,
3 | icon: string,
4 | route: string,
5 | isIssued?: boolean,
6 | }
--------------------------------------------------------------------------------
/src/navigator/HeaderLeft.tsx:
--------------------------------------------------------------------------------
1 | import { View, StyleSheet, TouchableOpacity } from 'react-native';
2 | import React from 'react';
3 | import { StackNavigationProp } from '@react-navigation/stack';
4 | import { useNavigation } from '@react-navigation/core';
5 | import { Icon } from '@rneui/themed';
6 |
7 | export type RootStackParamList = {
8 | Home: undefined,
9 | }
10 |
11 | export const HeaderLeft = () => {
12 |
13 | const navigation = useNavigation>();
14 |
15 | return (
16 | navigation.navigate("Home")}
18 | style={{ opacity: 1}}
19 | >
20 |
21 |
27 |
28 |
29 |
30 | )
31 | }
32 |
33 | const styles = StyleSheet.create({
34 | container: {
35 | flex: 1,
36 | padding: 10,
37 | flexDirection: 'row',
38 | alignItems: 'center',
39 | backgroundColor: 'black',
40 | borderTopEndRadius: 25,
41 | borderBottomEndRadius: 25,
42 | },
43 | })
44 |
--------------------------------------------------------------------------------
/src/navigator/StackNavigator.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { NavigationContainer } from '@react-navigation/native';
3 | import { createStackNavigator } from '@react-navigation/stack';
4 | import {
5 | HomeScreen,
6 | Animation101Screen,
7 | Animation102Screen,
8 | SwitchScreen,
9 | AlertScreen,
10 | TextInputScreen,
11 | ThemeScreen,
12 | PullRefreshScreen ,
13 | SliderScreen,
14 | SectionListScreen,
15 | ModalScreen,
16 | InfiniteScrollScreen
17 | } from '../screens/index';
18 | import { ThemeContext } from '../context/theme/ThemeContext';
19 | import { HeaderLeft } from './HeaderLeft';
20 |
21 | const Stack = createStackNavigator();
22 |
23 | export const StackNavigator = () => {
24 |
25 | const {theme} = useContext(ThemeContext);
26 |
27 | return (
28 |
31 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | );
65 | }
--------------------------------------------------------------------------------
/src/navigator/types.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parterdev/react-native-components/0ebbb1768c564c7b78ec021ee68ce22bc10aacbb/src/navigator/types.tsx
--------------------------------------------------------------------------------
/src/screens/AlertScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { StyleSheet, Text, View , Alert} from 'react-native'
3 | import { Button } from '@rneui/themed'
4 | import prompt from 'react-native-prompt-android'
5 | import { ThemeContext } from '../context/theme/ThemeContext'
6 |
7 | export const AlertScreen = () => {
8 |
9 | const {theme: {colors}} = useContext(ThemeContext);
10 |
11 | const showAlert = () => {
12 | Alert.alert(
13 | 'Alert title',
14 | 'Alert detail msg',
15 | [
16 | {
17 | text: 'Cancel',
18 | onPress: () => console.log('Cancel has been pressed'),
19 | style: 'cancel'
20 | },
21 | {
22 | text: 'OK',
23 | onPress: () => console.log('OK has been pressed'),
24 | },
25 | ],
26 | {
27 | cancelable: true,
28 | onDismiss: () => console.log('This alert was dismissed by tapping outside of alert')
29 | }
30 | )
31 | }
32 |
33 | //Only available in iOS
34 | const showPrompt = () => {
35 | Alert.prompt(
36 | '¿Are you sure?',
37 | 'This action is very important',
38 | (value: string) => console.log('info', value),
39 | 'plain-text',
40 | 'Type your number...',
41 | 'numeric'
42 | )
43 | }
44 |
45 | //Prompt to Android and iOS
46 | const showGenericPrompt = () => {
47 | prompt(
48 | '¿Are you sure?',
49 | 'This action is very important, plase type your number here',
50 | [
51 | {text: 'Cancel', onPress: () => console.log('Cancel prompt pressed'), style: 'cancel'},
52 | {text: 'OK', onPress: value => console.log('OK Pressed, number: ' + value)},
53 | ],
54 | {
55 | type: 'phone-pad',
56 | cancelable: false,
57 | defaultValue: 'XXXXXXXXX',
58 | placeholder: 'Type your number...'
59 | }
60 | );
61 | }
62 |
63 |
64 |
65 | return (
66 |
67 |
68 |
72 |
76 |
77 |
78 | )
79 | }
80 |
81 |
82 | const styles = StyleSheet.create({
83 | container: {
84 | flex: 1,
85 | alignItems: 'center',
86 | justifyContent: 'center',
87 | },
88 | buttonFooter: {
89 | marginVertical: 5,
90 | paddingHorizontal: 5,
91 | justifyContent: 'space-between',
92 | //backgroundColor: 'red',
93 | flexDirection: 'row'
94 | }
95 | })
96 |
--------------------------------------------------------------------------------
/src/screens/Animation101Screen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { StyleSheet, Text, View, Animated } from 'react-native';
3 | import { Button } from '@rneui/themed';
4 | import { ButtonIcon } from '../components/ButtonIcon';
5 | import { ThemeContext } from '../context/theme/ThemeContext';
6 | import { useAnimated } from '../hooks/useAnimated';
7 |
8 | export const Animation101Screen = () => {
9 |
10 | const {opacityValue, fadeIn, fadeOut, topDrop, startMoving, stopMoving} = useAnimated(0.4);
11 | const {theme: {colors}} = useContext(ThemeContext);
12 |
13 |
14 | return (
15 |
16 |
22 |
23 | {
27 | fadeIn();
28 | startMoving(-500)
29 | }}
30 | />
31 | {
35 | fadeOut();
36 | stopMoving(-500)
37 | }}
38 | />
39 |
40 |
41 | )
42 | }
43 |
44 |
45 | const styles = StyleSheet.create({
46 | container: {
47 | flex: 1,
48 | justifyContent: 'center',
49 | alignItems: 'center',
50 | },
51 | purpleBox: {
52 | backgroundColor: 'indigo',
53 | borderRadius: 10,
54 | width: 150,
55 | height: 150
56 | },
57 | buttonFooter: {
58 | marginVertical: 5,
59 | paddingHorizontal: 5,
60 | justifyContent: 'space-between',
61 | flexDirection: 'column'
62 | }
63 | })
64 |
--------------------------------------------------------------------------------
/src/screens/Animation102Screen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useRef } from 'react'
2 | import { Animated, PanResponder, StyleSheet, View } from 'react-native'
3 | import { ThemeContext } from '../context/theme/ThemeContext';
4 |
5 | export const Animation102Screen = () => {
6 |
7 | //To animate valueXY
8 | const panAnimate = useRef(new Animated.ValueXY()).current;
9 |
10 | const {theme: {colors}} = useContext(ThemeContext);
11 |
12 | const panAnimateResponder = PanResponder.create({
13 | onStartShouldSetPanResponder: () => true,
14 | onPanResponderMove: Animated.event([
15 | null,
16 | {dx: panAnimate.x, dy: panAnimate.y}
17 | ],
18 | {useNativeDriver: false}
19 | ),
20 | onPanResponderRelease: () => {
21 | Animated.spring(
22 | panAnimate,
23 | {
24 | useNativeDriver: false,
25 | toValue: {x: 0, y: 0}
26 | }
27 | ).start()
28 | },
29 | });
30 |
31 | return (
32 |
33 |
36 |
37 |
38 | )
39 | }
40 |
41 |
42 | const styles = StyleSheet.create({
43 | container: {
44 | flex: 1,
45 | alignItems: 'center',
46 | justifyContent: 'center',
47 | },
48 | blueBox: {
49 | backgroundColor: '#75CEDB',
50 | borderRadius: 10,
51 | width: 150,
52 | height: 150
53 | }
54 | })
55 |
--------------------------------------------------------------------------------
/src/screens/HomeScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { View, FlatList } from 'react-native'
3 | import { FlatListMenuItem } from '../components/FlatListMenuItem';
4 | import { ItemDivider } from '../components/ItemDivider';
5 | import { TitleHeader } from '../components/TitleHeader';
6 | import { optionsMenu } from '../data/menuItems';
7 | import { menuItem } from '../interfaces/FlatListMenuItem';
8 | import { styles } from '../theme/appTheme';
9 | import { strings } from '../data/strings';
10 |
11 | export const HomeScreen = () => {
12 |
13 | const _renderItem = (item:menuItem) => {
14 | return (
15 |
16 | );
17 | }
18 |
19 | const _renderListHeader = () => {
20 | return (
21 |
22 | );
23 | }
24 |
25 | const _separatorList = () => {
26 | return (
27 |
28 | );
29 | }
30 |
31 | return (
32 |
33 | _renderItem(item)}
36 | keyExtractor={(item) => item.name}
37 | ListHeaderComponent={() => _renderListHeader()}
38 | ItemSeparatorComponent={() => _separatorList()}
39 | showsVerticalScrollIndicator={false}
40 | />
41 |
42 | )
43 | }
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/screens/InfiniteScrollScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { StyleSheet, Text, View, FlatList, ActivityIndicator } from 'react-native';
3 | import { FadeInImage } from '../components/FadeInImage';
4 | import { ThemeContext } from '../context/theme/ThemeContext';
5 |
6 | export const InfiniteScrollScreen = () => {
7 |
8 | const [numbers, setNumbers] = useState([0,1,2,3,4,5]);
9 | const {theme: {colors}} = useContext(ThemeContext);
10 |
11 | const loadMore = () => {
12 | const newArrayNumber:number[] = [];
13 | for (let i = 0; i < 5; i++) {
14 | newArrayNumber[i] = numbers.length + i;
15 | }
16 |
17 | setTimeout(() => {
18 | setNumbers([...numbers, ...newArrayNumber]);
19 | }, 500);
20 | }
21 |
22 | const _renderItem = (item:number) => {
23 | return(
24 |
33 | )
34 | }
35 |
36 | return (
37 |
38 | item.toString()}
41 | renderItem={({item}) => _renderItem(item)}
42 | //ListHeaderComponent={() => Infinite Scroll }
43 | onEndReached={loadMore}
44 | onEndReachedThreshold={0.5}
45 | ListFooterComponent={
53 |
54 | }
55 | />
56 |
57 | )
58 | }
59 |
60 |
61 | const styles = StyleSheet.create({
62 | container: {
63 | flex: 1,
64 | },
65 | textStyle: {
66 | color: 'black',
67 | fontSize: 30,
68 | height: 150,
69 | fontWeight: 'bold'
70 | }
71 | })
72 |
--------------------------------------------------------------------------------
/src/screens/ModalScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState, useEffect } from 'react'
2 | import { Alert, Modal, StyleSheet, Text, View } from 'react-native'
3 | import Icon from 'react-native-vector-icons/Ionicons'
4 | import { TouchableOpacity } from 'react-native-gesture-handler';
5 | import { ThemeContext } from '../context/theme/ThemeContext';
6 | import { ButtonIcon } from '../components/ButtonIcon';
7 |
8 | export const ModalScreen = () => {
9 |
10 | const [modalVisible, setModalVisible] = useState(false);
11 | const {theme: {colors}} = useContext(ThemeContext);
12 |
13 | return (
14 |
15 | {
20 | Alert.alert("Modal has been closed...");
21 | setModalVisible(!modalVisible)
22 | }}
23 | >
24 |
25 |
26 |
27 |
28 | {
30 | setModalVisible(!modalVisible)
31 | }}
32 | size={30}
33 | name='close-circle-outline'
34 | color={colors.primary}
35 | />
36 |
37 |
38 | Here is my custom modal
39 |
40 |
41 |
42 |
43 | setModalVisible(true)}
47 | />
48 |
49 |
50 | )
51 | }
52 |
53 |
54 | const styles = StyleSheet.create({
55 | container: {
56 | flex: 1,
57 | justifyContent: 'center',
58 | alignItems: 'center',
59 | },
60 | modalContainer: {
61 | flex: 1,
62 | justifyContent: 'center',
63 | alignItems: 'center',
64 | backgroundColor: 'rgba(0,0,0,0.5)'
65 | },
66 | modalBody: {
67 | paddingHorizontal: 10,
68 | backgroundColor: 'white',
69 | borderRadius: 15,
70 | width: 320,
71 | height: 200,
72 | },
73 | modalHeader: {
74 | height: 40,
75 | justifyContent: 'space-between',
76 | alignItems: 'flex-end'
77 | },
78 | textStyle: {
79 | fontSize: 30,
80 | fontWeight: 'bold'
81 | }
82 | })
83 |
--------------------------------------------------------------------------------
/src/screens/PullRefreshScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import { StyleSheet, Text, View, Animated } from 'react-native';
3 | import LottieView from 'lottie-react-native';
4 | import { PullRefreshControl } from '../components/PullRefreshControl';
5 | import { useRefresh } from '../hooks/useRefresh';
6 | import { useAnimated } from '../hooks/useAnimated';
7 | import { ThemeContext } from '../context/theme/ThemeContext';
8 |
9 |
10 | export const PullRefreshScreen = () => {
11 |
12 | const [data, setData] = useState('');
13 | const {onRefresh, refreshing, result} = useRefresh();
14 | const {theme: {colors}} = useContext(ThemeContext);
15 |
16 | const pathBoucingAnimated = require('../assets/bouncing-fruits.json');
17 |
18 | useEffect(() => {
19 | if(result) {
20 | setData('Bauuuuu')
21 | }
22 | }, [onRefresh])
23 |
24 |
25 | return (
26 |
27 |
28 |
33 |
34 |
35 | {
36 | (data) ?
37 |
38 | {data}
39 | :
40 |
41 | Please, pull down to show refresh
42 |
43 | }
44 |
45 |
46 | )
47 | }
48 |
49 | const styles = StyleSheet.create({
50 | container: {
51 | flex: 1,
52 | justifyContent: 'center',
53 | alignItems: 'center',
54 | },
55 | lottieContainer: {
56 | alignItems: 'center',
57 | backgroundColor: 'indianred',
58 | },
59 | })
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/src/screens/SectionListScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { SectionList, StyleSheet, Text, View } from 'react-native'
3 | import { ItemDivider } from '../components/ItemDivider';
4 | import { TitleHeader } from '../components/TitleHeader';
5 | import { ThemeContext } from '../context/theme/ThemeContext';
6 |
7 | interface Houses {
8 | owner: string;
9 | data: string[];
10 | }
11 |
12 | const houses: Houses[] = [
13 | {
14 | owner: "DC Comics",
15 | data: ["Batman", "Superman", "Robin","Batman", "Superman", "Robin","Batman", "Superman", "Robin", ]
16 | },
17 | {
18 | owner: "Marvel Comics",
19 | data: ["Antman", "Thor", "Spiderman","Antman","Antman", "Thor", "Spiderman","Antman","Antman", "Thor", "Spiderman","Antman", ]
20 | },
21 | {
22 | owner: "Anime",
23 | data: ["Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama","Kenshin", "Goku", "Saitama", ]
24 | }
25 | ];
26 |
27 |
28 | export const SectionListScreen = () => {
29 |
30 | const {theme: {colors, dark}} = useContext(ThemeContext);
31 |
32 | const _sectionHeader = (owner:string) => {
33 | return(
34 |
35 | {owner}
36 |
37 | )
38 | }
39 |
40 | return (
41 |
42 | }
45 | ListFooterComponent={() => value.data.length)} />}
46 | renderSectionFooter={({section}) => }
47 | renderSectionHeader={({section}) => _sectionHeader(section.owner)}
48 | renderItem={({item}) => {item} }
49 | ItemSeparatorComponent={() => }
50 | stickySectionHeadersEnabled={true}
51 | showsVerticalScrollIndicator={false}
52 | keyExtractor={(item, index) => item + index}
53 | />
54 |
55 | )
56 | }
57 |
58 |
59 | const styles = StyleSheet.create({
60 | container: {
61 | flex: 1,
62 | paddingHorizontal: 10,
63 | },
64 | textStyle: {
65 | color: 'white',
66 | fontSize: 30,
67 | fontWeight: 'bold'
68 | }
69 | })
70 |
--------------------------------------------------------------------------------
/src/screens/SliderScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { Dimensions, StyleSheet, Text, View, SafeAreaView, ScrollView } from 'react-native';
3 | import Slider from '@react-native-community/slider';
4 | import { ThemeContext } from '../context/theme/ThemeContext';
5 | import { FadeInImage } from '../components/FadeInImage';
6 |
7 | const {width: screenWidth } = Dimensions.get('window');
8 |
9 | export const SliderScreen = () => {
10 |
11 | const {theme: {colors}} = useContext(ThemeContext);
12 | const [sliderValue, setSliderValue] = useState(0);
13 |
14 | const rangeOpacity = () => Math.floor(sliderValue*100) + 220
15 |
16 | return (
17 |
18 |
19 | I'm Mr. Boo
20 |
24 |
30 |
31 | {Math.floor(sliderValue*100)}%
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | const styles = StyleSheet.create({
39 | container: {
40 | flex: 1,
41 | alignItems: 'center',
42 | flexDirection: 'column',
43 | },
44 | title: {
45 | color: '#df2d2f',
46 | fontSize: 50,
47 | fontFamily: 'MrRobot',
48 | },
49 | scrollContainer: {
50 | flex: 1,
51 | alignItems: 'center',
52 | // backgroundColor: 'pink',
53 | justifyContent: 'center',
54 | },
55 | img: {
56 | marginBottom: 50,
57 | // backgroundColor: 'red',
58 | }
59 | });
60 |
--------------------------------------------------------------------------------
/src/screens/SwitchScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { StyleSheet, Text, View } from 'react-native'
3 | import { CustomSwitch } from '../components/CustomSwitch';
4 | import { TitleHeader } from '../components/TitleHeader';
5 |
6 | interface State {
7 | isActive: boolean,
8 | isHungry: boolean,
9 | isHappy : boolean
10 | }
11 |
12 | export const SwitchScreen = () => {
13 |
14 | const [state, setState] = useState({
15 | isActive: false,
16 | isHungry: false,
17 | isHappy: false
18 | });
19 |
20 | const onChange = (value: boolean, field: keyof State) => {
21 | setState({
22 | ...state,
23 | [field]: value
24 | });
25 | }
26 |
27 | const {isActive, isHungry, isHappy} = state;
28 |
29 | return (
30 |
31 |
32 |
33 |
34 | isActive:
35 | onChange(value, 'isActive') } />
36 |
37 |
38 | isHungry:
39 | onChange(value, 'isHungry') } />
40 |
41 |
42 | isHappy:
43 | onChange(value, 'isHappy') } />
44 |
45 |
46 |
47 |
48 | {JSON.stringify(state, null, 5)}
49 |
50 |
51 |
52 | )
53 | }
54 |
55 |
56 | const styles = StyleSheet.create({
57 | container: {
58 | flex: 1,
59 | flexDirection: 'column',
60 | justifyContent: 'space-between',
61 | },
62 | switchContainer: {
63 | flex: 2,
64 | alignItems: 'center',
65 | justifyContent: 'center',
66 | backgroundColor: '#F0A23B',
67 | borderColor: 'white'
68 | },
69 | switchRow: {
70 | flexDirection: 'row',
71 | justifyContent: 'space-between',
72 | marginVertical: 5
73 | },
74 | textContainer: {
75 | flex: 2,
76 | alignItems: 'center',
77 | justifyContent: 'center',
78 | backgroundColor: '#5856D6',
79 | borderColor: 'white'
80 | },
81 | })
82 |
--------------------------------------------------------------------------------
/src/screens/TextInputScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { StyleSheet, Text, View, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
3 | import { TextInput } from 'react-native-gesture-handler'
4 | import { CustomSwitch } from '../components/CustomSwitch'
5 | import { TitleHeader } from '../components/TitleHeader'
6 | import { ThemeContext } from '../context/theme/ThemeContext'
7 | import { useForm } from '../hooks/useForm'
8 |
9 | export const TextInputScreen = () => {
10 |
11 | const {theme: {colors}} = useContext(ThemeContext);
12 |
13 | const {onChange, form, isSuscribed} = useForm({
14 | name: '',
15 | email: '',
16 | phone: '',
17 | isSuscribed: false,
18 | });
19 |
20 | return (
21 |
23 |
24 |
25 |
26 |
27 | onChange(value, 'name')}
33 | />
34 | onChange(value, 'email')}
41 | />
42 |
43 |
44 | Are you an admin:
45 | onChange(value, 'isSuscribed')} />
46 |
47 |
48 |
49 |
50 |
51 | onChange(value, 'phone')}
57 | />
58 |
59 |
60 |
61 | )
62 | }
63 |
64 | const styles = StyleSheet.create({
65 | container: {
66 | flex: 1,
67 | },
68 | textInputContainer: {
69 | flex: 1,
70 | marginVertical: 10,
71 | marginHorizontal: 20,
72 | paddingHorizontal: 10,
73 | borderRadius: 20,
74 | backgroundColor: 'rgba(0,0,0,0.3)'
75 | },
76 | textInput: {
77 | backgroundColor: '#f6f6f6',
78 | borderRadius: 5,
79 | height: 50,
80 | marginVertical: 10,
81 | paddingHorizontal: 10,
82 | borderWidth: 1,
83 | borderColor: '#f6f6f6'
84 | }
85 | })
86 |
--------------------------------------------------------------------------------
/src/screens/ThemeScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { StyleSheet, View } from 'react-native'
3 | import { ThemeContext } from '../context/theme/ThemeContext'
4 | import { TitleHeader } from '../components/TitleHeader';
5 | import { ButtonIcon } from '../components/ButtonIcon';
6 |
7 | export const ThemeScreen = () => {
8 |
9 | const {setDarkTheme, setLightTheme, theme: {colors}} = useContext(ThemeContext);
10 |
11 | return (
12 |
13 |
14 |
15 | setLightTheme()}
19 | />
20 | setDarkTheme()}
24 | />
25 |
26 |
27 | )
28 | }
29 |
30 |
31 | const styles = StyleSheet.create({
32 | container: {
33 | flex: 1,
34 | padding: 10,
35 | },
36 | })
37 |
--------------------------------------------------------------------------------
/src/screens/index.ts:
--------------------------------------------------------------------------------
1 | export { HomeScreen } from '../screens/HomeScreen';
2 | export { Animation101Screen } from '../screens/Animation101Screen';
3 | export { Animation102Screen } from '../screens/Animation102Screen';
4 | export { SwitchScreen } from '../screens/SwitchScreen';
5 | export { AlertScreen } from '../screens/AlertScreen';
6 | export { TextInputScreen } from '../screens/TextInputScreen';
7 | export { PullRefreshScreen } from '../screens/PullRefreshScreen';
8 | export { SectionListScreen } from '../screens/SectionListScreen';
9 | export { ModalScreen } from '../screens/ModalScreen';
10 | export { InfiniteScrollScreen } from '../screens/InfiniteScrollScreen';
11 | export { SliderScreen } from './SliderScreen';
12 | export { ThemeScreen } from '../screens/ThemeScreen';
--------------------------------------------------------------------------------
/src/theme/appTheme.tsx:
--------------------------------------------------------------------------------
1 | // Setting general app styles
2 | import { StyleSheet } from "react-native";
3 |
4 | export const styles = StyleSheet.create({
5 | globalContainer: {
6 | marginHorizontal: 15,
7 | },
8 | textTitle: {
9 | fontSize: 15,
10 | fontWeight: 'bold',
11 | color: 'white'
12 | }
13 | });
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | // prettier-ignore
2 | {
3 | "extends": "@tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */
4 | "compilerOptions": {
5 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
6 |
7 | /* Completeness */
8 | "skipLibCheck": true /* Skip type checking all .d.ts files. */
9 | }
10 | }
11 |
--------------------------------------------------------------------------------