├── .buckconfig ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── 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 │ │ │ └── animations │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── Helvetica-Bold.ttf │ │ │ ├── Helvetica-BoldOblique.ttf │ │ │ ├── Helvetica-Oblique.ttf │ │ │ ├── Helvetica.ttf │ │ │ ├── Inter-VariableFont_slnt,wght.ttf │ │ │ ├── Quicksand.ttf │ │ │ ├── Roboto-Black.ttf │ │ │ ├── Roboto-BlackItalic.ttf │ │ │ ├── Roboto-Bold.ttf │ │ │ ├── Roboto-BoldItalic.ttf │ │ │ ├── Roboto-Italic.ttf │ │ │ ├── Roboto-Light.ttf │ │ │ ├── Roboto-LightItalic.ttf │ │ │ ├── Roboto-Medium.ttf │ │ │ ├── Roboto-MediumItalic.ttf │ │ │ ├── Roboto-Regular.ttf │ │ │ ├── Roboto-Thin.ttf │ │ │ ├── Roboto-ThinItalic.ttf │ │ │ ├── SFUIText-Bold.ttf │ │ │ ├── SFUIText-BoldItalic.ttf │ │ │ ├── SFUIText-Heavy.ttf │ │ │ ├── SFUIText-HeavyItalic.ttf │ │ │ ├── SFUIText-Light.ttf │ │ │ ├── SFUIText-LightItalic.ttf │ │ │ ├── SFUIText-Medium.ttf │ │ │ ├── SFUIText-MediumItalic.ttf │ │ │ ├── SFUIText-Regular.ttf │ │ │ ├── SFUIText-RegularItalic.ttf │ │ │ ├── SFUIText-Semibold.ttf │ │ │ ├── SFUIText-SemiboldItalic.ttf │ │ │ ├── helvetica-compressed-5871d14b6903a.otf │ │ │ ├── helvetica-light-587ebe5a59211.ttf │ │ │ └── helvetica-rounded-bold-5871d05ead8de.otf │ │ ├── java │ │ └── com │ │ │ └── animations │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios ├── Podfile ├── Podfile.lock ├── Quicksand.ttf ├── animations.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── animations.xcscheme ├── animations.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── animations │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── animationsTests │ ├── Info.plist │ └── animationsTests.m ├── metro.config.js ├── package-lock.json ├── package.json ├── react-native.config.js ├── src ├── animations │ ├── AnimatedBannerWithSearchInput │ │ ├── AnimatedBannerWithSearchInput.tsx │ │ └── SearchInput.tsx │ ├── CubeCarousel │ │ └── CubeCarousel.tsx │ ├── DoubleTapToHeart │ │ └── DoubleTapToHeart.tsx │ ├── DraggableBottomSheet │ │ └── DraggableBottomSheet.tsx │ ├── FacebookPostReaction │ │ ├── Emoji.tsx │ │ ├── FacebookPostReaction.tsx │ │ ├── emojisData.js │ │ └── facebookStyles.ts │ ├── MainStackNavigator.js │ ├── MessengerInput │ │ └── MessengerInput.tsx │ ├── Modal │ │ ├── Modal.tsx │ │ └── styles.js │ ├── MomoHeader │ │ ├── MomoHeader.tsx │ │ └── utils.ts │ ├── PickPhoneColor │ │ └── PickPhoneColor.tsx │ ├── RandomNumber.tsx │ ├── ReactToMessage │ │ ├── AnimatedHeart.tsx │ │ └── ReactToMessage.tsx │ ├── SwipeableList │ │ ├── SwipeableList.tsx │ │ └── styles.js │ ├── TikTokMusicDisc │ │ └── TikTokMusicDisc.tsx │ ├── Tinder │ │ └── Tinder.tsx │ ├── ZingCarousel │ │ └── ZingCarousel.tsx │ └── ZoomableImage │ │ └── ZoomableImage.tsx ├── data │ ├── dummyData.ts │ ├── menuData.ts │ ├── musicData.ts │ ├── usersData.ts │ └── videosData.ts ├── images │ ├── facebook-emojis │ │ ├── haha.gif │ │ ├── like.gif │ │ ├── like.png │ │ ├── love.gif │ │ ├── sad.gif │ │ └── wow.gif │ ├── food-app │ │ ├── food1.png │ │ ├── food10.png │ │ ├── food11.png │ │ ├── food2.png │ │ ├── food3.png │ │ ├── food4.png │ │ ├── food5.png │ │ ├── food6.png │ │ ├── food7.jpeg │ │ ├── food8.png │ │ ├── food9.png │ │ ├── foodBanner.png │ │ ├── left-arrow.png │ │ └── search.png │ ├── heart-outline.png │ ├── heart.png │ ├── messenger │ │ ├── action.png │ │ ├── camera.png │ │ ├── caret-right.png │ │ ├── gallery.png │ │ ├── like.png │ │ ├── send.png │ │ └── voice.png │ ├── minh-banner.png │ ├── minh-logo.png │ ├── momo │ │ ├── avatar.png │ │ ├── bell.png │ │ ├── deposit-circle.png │ │ ├── deposit.png │ │ ├── qr-circle.png │ │ ├── qr.png │ │ ├── scan-circle.png │ │ ├── scan.png │ │ ├── search.png │ │ ├── withdraw-circle.png │ │ └── withdraw.png │ ├── music-note.png │ ├── pick-phone │ │ ├── iphone_11_pro_max_gold.png │ │ ├── iphone_11_pro_max_midnight_green.png │ │ ├── iphone_11_pro_max_silver.png │ │ └── iphone_11_pro_max_space_gray.png │ ├── users │ │ ├── girl0.jpg │ │ ├── girl1.jpeg │ │ ├── girl2.jpeg │ │ ├── girl3.jpeg │ │ ├── girl4.jpeg │ │ └── girl5.jpeg │ ├── zing │ │ ├── 1.png │ │ ├── 1banner.jpeg │ │ ├── 2.png │ │ ├── 2banner.jpeg │ │ ├── 3.png │ │ ├── 3banner.jpeg │ │ ├── 4.png │ │ ├── 4banner.jpeg │ │ ├── 5.png │ │ ├── 5banner.jpeg │ │ ├── 6.png │ │ └── 6banner.jpeg │ └── zoomable-image │ │ └── avengers.jpg └── utils │ └── index.ts ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.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 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | rules: { 7 | 'no-shadow': 'off', 8 | '@typescript-eslint/no-shadow': ['error'], 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.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 | 32 | # Visual Studio Code 33 | # 34 | .vscode/ 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | 49 | # Bundle artifact 50 | *.jsbundle 51 | 52 | # CocoaPods 53 | /ios/Pods/ -------------------------------------------------------------------------------- /.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 from 'react'; 2 | import MainStackNavigator from './src/animations/MainStackNavigator'; 3 | 4 | const App = () => { 5 | return ; 6 | }; 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Animations 2 | 3 | ## Installation 4 | 5 | Using npm: 6 | 7 | ```shell 8 | npm install 9 | ``` 10 | 11 | or using yarn: 12 | 13 | ```shell 14 | yarn 15 | ``` 16 | 17 | Run `npx pod-install` 18 | 19 | ## Join Minh Techie community 20 | 21 | **Youtube** 22 | 23 | https://www.youtube.com/channel/UCGxA-PuYBXinpwGawUqEYpg 24 | 25 | **Facebook** 26 | 27 | https://www.facebook.com/groups/minhtechie 28 | 29 | **Support me** 30 | 31 | https://www.buymeacoffee.com/minhtechiejs 32 | 33 | 34 | 35 | 36 | https://user-images.githubusercontent.com/68360917/170456771-a43f8846-29a9-4eeb-be2f-1cca82a1178e.mov 37 | 38 | -------------------------------------------------------------------------------- /__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.animations", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.animations", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation. If none specified and 19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 20 | * // default. Can be overridden with ENTRY_FILE environment variable. 21 | * entryFile: "index.android.js", 22 | * 23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 24 | * bundleCommand: "ram-bundle", 25 | * 26 | * // whether to bundle JS and assets in debug mode 27 | * bundleInDebug: false, 28 | * 29 | * // whether to bundle JS and assets in release mode 30 | * bundleInRelease: true, 31 | * 32 | * // whether to bundle JS and assets in another build variant (if configured). 33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 34 | * // The configuration property can be in the following formats 35 | * // 'bundleIn${productFlavor}${buildType}' 36 | * // 'bundleIn${buildType}' 37 | * // bundleInFreeDebug: true, 38 | * // bundleInPaidRelease: true, 39 | * // bundleInBeta: true, 40 | * 41 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 42 | * // for example: to disable dev mode in the staging build type (if configured) 43 | * devDisabledInStaging: true, 44 | * // The configuration property can be in the following formats 45 | * // 'devDisabledIn${productFlavor}${buildType}' 46 | * // 'devDisabledIn${buildType}' 47 | * 48 | * // the root of your project, i.e. where "package.json" lives 49 | * root: "../../", 50 | * 51 | * // where to put the JS bundle asset in debug mode 52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 53 | * 54 | * // where to put the JS bundle asset in release mode 55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 56 | * 57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 58 | * // require('./image.png')), in debug mode 59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 60 | * 61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 62 | * // require('./image.png')), in release mode 63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 64 | * 65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 69 | * // for example, you might want to remove it from here. 70 | * inputExcludes: ["android/**", "ios/**"], 71 | * 72 | * // override which node gets called and with what additional arguments 73 | * nodeExecutableAndArgs: ["node"], 74 | * 75 | * // supply additional arguments to the packager 76 | * extraPackagerArgs: [] 77 | * ] 78 | */ 79 | 80 | project.ext.react = [ 81 | enableHermes: false, // clean and rebuild if changing 82 | ] 83 | 84 | apply from: "../../node_modules/react-native/react.gradle" 85 | 86 | /** 87 | * Set this to true to create two separate APKs instead of one: 88 | * - An APK that only works on ARM devices 89 | * - An APK that only works on x86 devices 90 | * The advantage is the size of the APK is reduced by about 4MB. 91 | * Upload all the APKs to the Play Store and people will download 92 | * the correct one based on the CPU architecture of their device. 93 | */ 94 | def enableSeparateBuildPerCPUArchitecture = false 95 | 96 | /** 97 | * Run Proguard to shrink the Java bytecode in release builds. 98 | */ 99 | def enableProguardInReleaseBuilds = false 100 | 101 | /** 102 | * The preferred build flavor of JavaScriptCore. 103 | * 104 | * For example, to use the international variant, you can use: 105 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 106 | * 107 | * The international variant includes ICU i18n library and necessary data 108 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 109 | * give correct results when using with locales other than en-US. Note that 110 | * this variant is about 6MiB larger per architecture than default. 111 | */ 112 | def jscFlavor = 'org.webkit:android-jsc:+' 113 | 114 | /** 115 | * Whether to enable the Hermes VM. 116 | * 117 | * This should be set on project.ext.react and mirrored here. If it is not set 118 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 119 | * and the benefits of using Hermes will therefore be sharply reduced. 120 | */ 121 | def enableHermes = project.ext.react.get("enableHermes", false); 122 | 123 | /** 124 | * Architectures to build native code for in debug. 125 | */ 126 | def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures") 127 | 128 | android { 129 | ndkVersion rootProject.ext.ndkVersion 130 | 131 | compileSdkVersion rootProject.ext.compileSdkVersion 132 | 133 | defaultConfig { 134 | applicationId "com.animations" 135 | minSdkVersion rootProject.ext.minSdkVersion 136 | targetSdkVersion rootProject.ext.targetSdkVersion 137 | versionCode 1 138 | versionName "1.0" 139 | } 140 | splits { 141 | abi { 142 | reset() 143 | enable enableSeparateBuildPerCPUArchitecture 144 | universalApk false // If true, also generate a universal APK 145 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 146 | } 147 | } 148 | signingConfigs { 149 | debug { 150 | storeFile file('debug.keystore') 151 | storePassword 'android' 152 | keyAlias 'androiddebugkey' 153 | keyPassword 'android' 154 | } 155 | } 156 | buildTypes { 157 | debug { 158 | signingConfig signingConfigs.debug 159 | if (nativeArchitectures) { 160 | ndk { 161 | abiFilters nativeArchitectures.split(',') 162 | } 163 | } 164 | } 165 | release { 166 | // Caution! In production, you need to generate your own keystore file. 167 | // see https://reactnative.dev/docs/signed-apk-android. 168 | signingConfig signingConfigs.debug 169 | minifyEnabled enableProguardInReleaseBuilds 170 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 171 | } 172 | } 173 | 174 | // applicationVariants are e.g. debug, release 175 | applicationVariants.all { variant -> 176 | variant.outputs.each { output -> 177 | // For each separate APK per architecture, set a unique version code as described here: 178 | // https://developer.android.com/studio/build/configure-apk-splits.html 179 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 180 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 181 | def abi = output.getFilter(OutputFile.ABI) 182 | if (abi != null) { // null for the universal-debug, universal-release variants 183 | output.versionCodeOverride = 184 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 185 | } 186 | 187 | } 188 | } 189 | } 190 | 191 | dependencies { 192 | compile project(':react-native-video') 193 | implementation "androidx.appcompat:appcompat:1.0.0" 194 | implementation fileTree(dir: "libs", include: ["*.jar"]) 195 | //noinspection GradleDynamicVersion 196 | implementation "com.facebook.react:react-native:+" // From node_modules 197 | 198 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 199 | implementation 'com.facebook.fresco:animated-gif:2.6.0' 200 | 201 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 202 | exclude group:'com.facebook.fbjni' 203 | } 204 | 205 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 206 | exclude group:'com.facebook.flipper' 207 | exclude group:'com.squareup.okhttp3', module:'okhttp' 208 | } 209 | 210 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 211 | exclude group:'com.facebook.flipper' 212 | } 213 | 214 | if (enableHermes) { 215 | def hermesPath = "../../node_modules/hermes-engine/android/"; 216 | debugImplementation files(hermesPath + "hermes-debug.aar") 217 | releaseImplementation files(hermesPath + "hermes-release.aar") 218 | } else { 219 | implementation jscFlavor 220 | } 221 | } 222 | 223 | // Run this once to be able to run the application with BUCK 224 | // puts all compile dependencies into folder libs for BUCK to use 225 | task copyDownloadableDepsToLibs(type: Copy) { 226 | from configurations.implementation 227 | into 'libs' 228 | } 229 | 230 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 231 | -------------------------------------------------------------------------------- /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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/animations/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its 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.animations; 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.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Helvetica-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Helvetica-Bold.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Helvetica-BoldOblique.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Helvetica-BoldOblique.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Helvetica-Oblique.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Helvetica-Oblique.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Helvetica.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Helvetica.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Inter-VariableFont_slnt,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Inter-VariableFont_slnt,wght.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Quicksand.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Quicksand.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Black.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-BlackItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-BoldItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Italic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Light.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-LightItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-MediumItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-Thin.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Roboto-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/Roboto-ThinItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Bold.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-BoldItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Heavy.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Heavy.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-HeavyItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-HeavyItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Light.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-LightItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Medium.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-MediumItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Regular.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-RegularItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-RegularItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-Semibold.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/SFUIText-SemiboldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/SFUIText-SemiboldItalic.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/helvetica-compressed-5871d14b6903a.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/helvetica-compressed-5871d14b6903a.otf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/helvetica-light-587ebe5a59211.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/helvetica-light-587ebe5a59211.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/helvetica-rounded-bold-5871d05ead8de.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/assets/fonts/helvetica-rounded-bold-5871d05ead8de.otf -------------------------------------------------------------------------------- /android/app/src/main/java/com/animations/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.animations; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import android.os.Bundle; 5 | 6 | public class MainActivity extends ReactActivity { 7 | 8 | /** 9 | * Returns the name of the main component registered from JavaScript. This is used to schedule 10 | * rendering of the component. 11 | */ 12 | @Override 13 | protected String getMainComponentName() { 14 | return "animations"; 15 | } 16 | @Override 17 | protected void onCreate(Bundle savedInstanceState) { 18 | super.onCreate(null); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/animations/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.animations; 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.brentvatne.react.ReactVideoPackage; 8 | import com.facebook.react.ReactInstanceManager; 9 | import com.facebook.react.ReactNativeHost; 10 | import com.facebook.react.ReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | import java.lang.reflect.InvocationTargetException; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = 18 | new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | @SuppressWarnings("UnnecessaryLocalVariable") 27 | List packages = new PackageList(this).getPackages(); 28 | // Packages that cannot be autolinked yet can be added manually here, for example: 29 | packages.add(new ReactVideoPackage()); 30 | return packages; 31 | } 32 | 33 | @Override 34 | protected String getJSMainModuleName() { 35 | return "index"; 36 | } 37 | }; 38 | 39 | @Override 40 | public ReactNativeHost getReactNativeHost() { 41 | return mReactNativeHost; 42 | } 43 | 44 | @Override 45 | public void onCreate() { 46 | super.onCreate(); 47 | SoLoader.init(this, /* native exopackage */ false); 48 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 49 | } 50 | 51 | /** 52 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 53 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 54 | * 55 | * @param context 56 | * @param reactInstanceManager 57 | */ 58 | private static void initializeFlipper( 59 | Context context, ReactInstanceManager reactInstanceManager) { 60 | if (BuildConfig.DEBUG) { 61 | try { 62 | /* 63 | We use reflection here to pick up the class that initializes Flipper, 64 | since Flipper library is not available in release mode 65 | */ 66 | Class aClass = Class.forName("com.animations.ReactNativeFlipper"); 67 | aClass 68 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 69 | .invoke(null, context, reactInstanceManager); 70 | } catch (ClassNotFoundException e) { 71 | e.printStackTrace(); 72 | } catch (NoSuchMethodException e) { 73 | e.printStackTrace(); 74 | } catch (IllegalAccessException e) { 75 | e.printStackTrace(); 76 | } catch (InvocationTargetException e) { 77 | e.printStackTrace(); 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | animations 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /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 = "30.0.2" 6 | minSdkVersion = 21 7 | compileSdkVersion = 30 8 | targetSdkVersion = 30 9 | ndkVersion = "21.4.7075529" 10 | } 11 | repositories { 12 | google() 13 | mavenCentral() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:4.2.2") 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenCentral() 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | maven { url 'https://www.jitpack.io' } 37 | jcenter() 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /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: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 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.99.0 29 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/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-6.9-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or 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 UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'animations' 2 | include ':react-native-video' 3 | project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') 4 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 5 | include ':app' 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animations", 3 | "displayName": "animations" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: ['react-native-reanimated/plugin'], 4 | }; 5 | -------------------------------------------------------------------------------- /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 | import 'react-native-gesture-handler'; 9 | 10 | AppRegistry.registerComponent(appName, () => App); 11 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '11.0' 5 | 6 | target 'animations' do 7 | config = use_native_modules! 8 | 9 | use_react_native!( 10 | :path => config[:reactNativePath], 11 | # to enable hermes on iOS, change `false` to `true` and then install pods 12 | :hermes_enabled => false 13 | ) 14 | 15 | pod 'react-native-video', :path => '../node_modules/react-native-video' 16 | 17 | target 'animationsTests' do 18 | inherit! :complete 19 | # Pods for testing 20 | end 21 | 22 | # Enables Flipper. 23 | # 24 | # Note that if you have use_frameworks! enabled, Flipper will not work and 25 | # you should disable the next line. 26 | use_flipper!() 27 | 28 | post_install do |installer| 29 | react_native_post_install(installer) 30 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 31 | end 32 | end -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - BVLinearGradient (2.5.6): 4 | - React 5 | - CocoaAsyncSocket (7.6.5) 6 | - DoubleConversion (1.1.6) 7 | - FBLazyVector (0.66.4) 8 | - FBReactNativeSpec (0.66.4): 9 | - RCT-Folly (= 2021.06.28.00-v2) 10 | - RCTRequired (= 0.66.4) 11 | - RCTTypeSafety (= 0.66.4) 12 | - React-Core (= 0.66.4) 13 | - React-jsi (= 0.66.4) 14 | - ReactCommon/turbomodule/core (= 0.66.4) 15 | - Flipper (0.99.0): 16 | - Flipper-Folly (~> 2.6) 17 | - Flipper-RSocket (~> 1.4) 18 | - Flipper-Boost-iOSX (1.76.0.1.11) 19 | - Flipper-DoubleConversion (3.1.7) 20 | - Flipper-Fmt (7.1.7) 21 | - Flipper-Folly (2.6.7): 22 | - Flipper-Boost-iOSX 23 | - Flipper-DoubleConversion 24 | - Flipper-Fmt (= 7.1.7) 25 | - Flipper-Glog 26 | - libevent (~> 2.1.12) 27 | - OpenSSL-Universal (= 1.1.180) 28 | - Flipper-Glog (0.3.6) 29 | - Flipper-PeerTalk (0.0.4) 30 | - Flipper-RSocket (1.4.3): 31 | - Flipper-Folly (~> 2.6) 32 | - FlipperKit (0.99.0): 33 | - FlipperKit/Core (= 0.99.0) 34 | - FlipperKit/Core (0.99.0): 35 | - Flipper (~> 0.99.0) 36 | - FlipperKit/CppBridge 37 | - FlipperKit/FBCxxFollyDynamicConvert 38 | - FlipperKit/FBDefines 39 | - FlipperKit/FKPortForwarding 40 | - FlipperKit/CppBridge (0.99.0): 41 | - Flipper (~> 0.99.0) 42 | - FlipperKit/FBCxxFollyDynamicConvert (0.99.0): 43 | - Flipper-Folly (~> 2.6) 44 | - FlipperKit/FBDefines (0.99.0) 45 | - FlipperKit/FKPortForwarding (0.99.0): 46 | - CocoaAsyncSocket (~> 7.6) 47 | - Flipper-PeerTalk (~> 0.0.4) 48 | - FlipperKit/FlipperKitHighlightOverlay (0.99.0) 49 | - FlipperKit/FlipperKitLayoutHelpers (0.99.0): 50 | - FlipperKit/Core 51 | - FlipperKit/FlipperKitHighlightOverlay 52 | - FlipperKit/FlipperKitLayoutTextSearchable 53 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.99.0): 54 | - FlipperKit/Core 55 | - FlipperKit/FlipperKitHighlightOverlay 56 | - FlipperKit/FlipperKitLayoutHelpers 57 | - YogaKit (~> 1.18) 58 | - FlipperKit/FlipperKitLayoutPlugin (0.99.0): 59 | - FlipperKit/Core 60 | - FlipperKit/FlipperKitHighlightOverlay 61 | - FlipperKit/FlipperKitLayoutHelpers 62 | - FlipperKit/FlipperKitLayoutIOSDescriptors 63 | - FlipperKit/FlipperKitLayoutTextSearchable 64 | - YogaKit (~> 1.18) 65 | - FlipperKit/FlipperKitLayoutTextSearchable (0.99.0) 66 | - FlipperKit/FlipperKitNetworkPlugin (0.99.0): 67 | - FlipperKit/Core 68 | - FlipperKit/FlipperKitReactPlugin (0.99.0): 69 | - FlipperKit/Core 70 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.99.0): 71 | - FlipperKit/Core 72 | - FlipperKit/SKIOSNetworkPlugin (0.99.0): 73 | - FlipperKit/Core 74 | - FlipperKit/FlipperKitNetworkPlugin 75 | - fmt (6.2.1) 76 | - glog (0.3.5) 77 | - libevent (2.1.12) 78 | - OpenSSL-Universal (1.1.180) 79 | - RCT-Folly (2021.06.28.00-v2): 80 | - boost 81 | - DoubleConversion 82 | - fmt (~> 6.2.1) 83 | - glog 84 | - RCT-Folly/Default (= 2021.06.28.00-v2) 85 | - RCT-Folly/Default (2021.06.28.00-v2): 86 | - boost 87 | - DoubleConversion 88 | - fmt (~> 6.2.1) 89 | - glog 90 | - RCTRequired (0.66.4) 91 | - RCTTypeSafety (0.66.4): 92 | - FBLazyVector (= 0.66.4) 93 | - RCT-Folly (= 2021.06.28.00-v2) 94 | - RCTRequired (= 0.66.4) 95 | - React-Core (= 0.66.4) 96 | - React (0.66.4): 97 | - React-Core (= 0.66.4) 98 | - React-Core/DevSupport (= 0.66.4) 99 | - React-Core/RCTWebSocket (= 0.66.4) 100 | - React-RCTActionSheet (= 0.66.4) 101 | - React-RCTAnimation (= 0.66.4) 102 | - React-RCTBlob (= 0.66.4) 103 | - React-RCTImage (= 0.66.4) 104 | - React-RCTLinking (= 0.66.4) 105 | - React-RCTNetwork (= 0.66.4) 106 | - React-RCTSettings (= 0.66.4) 107 | - React-RCTText (= 0.66.4) 108 | - React-RCTVibration (= 0.66.4) 109 | - React-callinvoker (0.66.4) 110 | - React-Core (0.66.4): 111 | - glog 112 | - RCT-Folly (= 2021.06.28.00-v2) 113 | - React-Core/Default (= 0.66.4) 114 | - React-cxxreact (= 0.66.4) 115 | - React-jsi (= 0.66.4) 116 | - React-jsiexecutor (= 0.66.4) 117 | - React-perflogger (= 0.66.4) 118 | - Yoga 119 | - React-Core/CoreModulesHeaders (0.66.4): 120 | - glog 121 | - RCT-Folly (= 2021.06.28.00-v2) 122 | - React-Core/Default 123 | - React-cxxreact (= 0.66.4) 124 | - React-jsi (= 0.66.4) 125 | - React-jsiexecutor (= 0.66.4) 126 | - React-perflogger (= 0.66.4) 127 | - Yoga 128 | - React-Core/Default (0.66.4): 129 | - glog 130 | - RCT-Folly (= 2021.06.28.00-v2) 131 | - React-cxxreact (= 0.66.4) 132 | - React-jsi (= 0.66.4) 133 | - React-jsiexecutor (= 0.66.4) 134 | - React-perflogger (= 0.66.4) 135 | - Yoga 136 | - React-Core/DevSupport (0.66.4): 137 | - glog 138 | - RCT-Folly (= 2021.06.28.00-v2) 139 | - React-Core/Default (= 0.66.4) 140 | - React-Core/RCTWebSocket (= 0.66.4) 141 | - React-cxxreact (= 0.66.4) 142 | - React-jsi (= 0.66.4) 143 | - React-jsiexecutor (= 0.66.4) 144 | - React-jsinspector (= 0.66.4) 145 | - React-perflogger (= 0.66.4) 146 | - Yoga 147 | - React-Core/RCTActionSheetHeaders (0.66.4): 148 | - glog 149 | - RCT-Folly (= 2021.06.28.00-v2) 150 | - React-Core/Default 151 | - React-cxxreact (= 0.66.4) 152 | - React-jsi (= 0.66.4) 153 | - React-jsiexecutor (= 0.66.4) 154 | - React-perflogger (= 0.66.4) 155 | - Yoga 156 | - React-Core/RCTAnimationHeaders (0.66.4): 157 | - glog 158 | - RCT-Folly (= 2021.06.28.00-v2) 159 | - React-Core/Default 160 | - React-cxxreact (= 0.66.4) 161 | - React-jsi (= 0.66.4) 162 | - React-jsiexecutor (= 0.66.4) 163 | - React-perflogger (= 0.66.4) 164 | - Yoga 165 | - React-Core/RCTBlobHeaders (0.66.4): 166 | - glog 167 | - RCT-Folly (= 2021.06.28.00-v2) 168 | - React-Core/Default 169 | - React-cxxreact (= 0.66.4) 170 | - React-jsi (= 0.66.4) 171 | - React-jsiexecutor (= 0.66.4) 172 | - React-perflogger (= 0.66.4) 173 | - Yoga 174 | - React-Core/RCTImageHeaders (0.66.4): 175 | - glog 176 | - RCT-Folly (= 2021.06.28.00-v2) 177 | - React-Core/Default 178 | - React-cxxreact (= 0.66.4) 179 | - React-jsi (= 0.66.4) 180 | - React-jsiexecutor (= 0.66.4) 181 | - React-perflogger (= 0.66.4) 182 | - Yoga 183 | - React-Core/RCTLinkingHeaders (0.66.4): 184 | - glog 185 | - RCT-Folly (= 2021.06.28.00-v2) 186 | - React-Core/Default 187 | - React-cxxreact (= 0.66.4) 188 | - React-jsi (= 0.66.4) 189 | - React-jsiexecutor (= 0.66.4) 190 | - React-perflogger (= 0.66.4) 191 | - Yoga 192 | - React-Core/RCTNetworkHeaders (0.66.4): 193 | - glog 194 | - RCT-Folly (= 2021.06.28.00-v2) 195 | - React-Core/Default 196 | - React-cxxreact (= 0.66.4) 197 | - React-jsi (= 0.66.4) 198 | - React-jsiexecutor (= 0.66.4) 199 | - React-perflogger (= 0.66.4) 200 | - Yoga 201 | - React-Core/RCTSettingsHeaders (0.66.4): 202 | - glog 203 | - RCT-Folly (= 2021.06.28.00-v2) 204 | - React-Core/Default 205 | - React-cxxreact (= 0.66.4) 206 | - React-jsi (= 0.66.4) 207 | - React-jsiexecutor (= 0.66.4) 208 | - React-perflogger (= 0.66.4) 209 | - Yoga 210 | - React-Core/RCTTextHeaders (0.66.4): 211 | - glog 212 | - RCT-Folly (= 2021.06.28.00-v2) 213 | - React-Core/Default 214 | - React-cxxreact (= 0.66.4) 215 | - React-jsi (= 0.66.4) 216 | - React-jsiexecutor (= 0.66.4) 217 | - React-perflogger (= 0.66.4) 218 | - Yoga 219 | - React-Core/RCTVibrationHeaders (0.66.4): 220 | - glog 221 | - RCT-Folly (= 2021.06.28.00-v2) 222 | - React-Core/Default 223 | - React-cxxreact (= 0.66.4) 224 | - React-jsi (= 0.66.4) 225 | - React-jsiexecutor (= 0.66.4) 226 | - React-perflogger (= 0.66.4) 227 | - Yoga 228 | - React-Core/RCTWebSocket (0.66.4): 229 | - glog 230 | - RCT-Folly (= 2021.06.28.00-v2) 231 | - React-Core/Default (= 0.66.4) 232 | - React-cxxreact (= 0.66.4) 233 | - React-jsi (= 0.66.4) 234 | - React-jsiexecutor (= 0.66.4) 235 | - React-perflogger (= 0.66.4) 236 | - Yoga 237 | - React-CoreModules (0.66.4): 238 | - FBReactNativeSpec (= 0.66.4) 239 | - RCT-Folly (= 2021.06.28.00-v2) 240 | - RCTTypeSafety (= 0.66.4) 241 | - React-Core/CoreModulesHeaders (= 0.66.4) 242 | - React-jsi (= 0.66.4) 243 | - React-RCTImage (= 0.66.4) 244 | - ReactCommon/turbomodule/core (= 0.66.4) 245 | - React-cxxreact (0.66.4): 246 | - boost (= 1.76.0) 247 | - DoubleConversion 248 | - glog 249 | - RCT-Folly (= 2021.06.28.00-v2) 250 | - React-callinvoker (= 0.66.4) 251 | - React-jsi (= 0.66.4) 252 | - React-jsinspector (= 0.66.4) 253 | - React-logger (= 0.66.4) 254 | - React-perflogger (= 0.66.4) 255 | - React-runtimeexecutor (= 0.66.4) 256 | - React-jsi (0.66.4): 257 | - boost (= 1.76.0) 258 | - DoubleConversion 259 | - glog 260 | - RCT-Folly (= 2021.06.28.00-v2) 261 | - React-jsi/Default (= 0.66.4) 262 | - React-jsi/Default (0.66.4): 263 | - boost (= 1.76.0) 264 | - DoubleConversion 265 | - glog 266 | - RCT-Folly (= 2021.06.28.00-v2) 267 | - React-jsiexecutor (0.66.4): 268 | - DoubleConversion 269 | - glog 270 | - RCT-Folly (= 2021.06.28.00-v2) 271 | - React-cxxreact (= 0.66.4) 272 | - React-jsi (= 0.66.4) 273 | - React-perflogger (= 0.66.4) 274 | - React-jsinspector (0.66.4) 275 | - React-logger (0.66.4): 276 | - glog 277 | - react-native-safe-area-context (4.0.1): 278 | - RCT-Folly 279 | - RCTRequired 280 | - RCTTypeSafety 281 | - React 282 | - ReactCommon/turbomodule/core 283 | - react-native-video (5.2.0): 284 | - React-Core 285 | - react-native-video/Video (= 5.2.0) 286 | - react-native-video/Video (5.2.0): 287 | - React-Core 288 | - React-perflogger (0.66.4) 289 | - React-RCTActionSheet (0.66.4): 290 | - React-Core/RCTActionSheetHeaders (= 0.66.4) 291 | - React-RCTAnimation (0.66.4): 292 | - FBReactNativeSpec (= 0.66.4) 293 | - RCT-Folly (= 2021.06.28.00-v2) 294 | - RCTTypeSafety (= 0.66.4) 295 | - React-Core/RCTAnimationHeaders (= 0.66.4) 296 | - React-jsi (= 0.66.4) 297 | - ReactCommon/turbomodule/core (= 0.66.4) 298 | - React-RCTBlob (0.66.4): 299 | - FBReactNativeSpec (= 0.66.4) 300 | - RCT-Folly (= 2021.06.28.00-v2) 301 | - React-Core/RCTBlobHeaders (= 0.66.4) 302 | - React-Core/RCTWebSocket (= 0.66.4) 303 | - React-jsi (= 0.66.4) 304 | - React-RCTNetwork (= 0.66.4) 305 | - ReactCommon/turbomodule/core (= 0.66.4) 306 | - React-RCTImage (0.66.4): 307 | - FBReactNativeSpec (= 0.66.4) 308 | - RCT-Folly (= 2021.06.28.00-v2) 309 | - RCTTypeSafety (= 0.66.4) 310 | - React-Core/RCTImageHeaders (= 0.66.4) 311 | - React-jsi (= 0.66.4) 312 | - React-RCTNetwork (= 0.66.4) 313 | - ReactCommon/turbomodule/core (= 0.66.4) 314 | - React-RCTLinking (0.66.4): 315 | - FBReactNativeSpec (= 0.66.4) 316 | - React-Core/RCTLinkingHeaders (= 0.66.4) 317 | - React-jsi (= 0.66.4) 318 | - ReactCommon/turbomodule/core (= 0.66.4) 319 | - React-RCTNetwork (0.66.4): 320 | - FBReactNativeSpec (= 0.66.4) 321 | - RCT-Folly (= 2021.06.28.00-v2) 322 | - RCTTypeSafety (= 0.66.4) 323 | - React-Core/RCTNetworkHeaders (= 0.66.4) 324 | - React-jsi (= 0.66.4) 325 | - ReactCommon/turbomodule/core (= 0.66.4) 326 | - React-RCTSettings (0.66.4): 327 | - FBReactNativeSpec (= 0.66.4) 328 | - RCT-Folly (= 2021.06.28.00-v2) 329 | - RCTTypeSafety (= 0.66.4) 330 | - React-Core/RCTSettingsHeaders (= 0.66.4) 331 | - React-jsi (= 0.66.4) 332 | - ReactCommon/turbomodule/core (= 0.66.4) 333 | - React-RCTText (0.66.4): 334 | - React-Core/RCTTextHeaders (= 0.66.4) 335 | - React-RCTVibration (0.66.4): 336 | - FBReactNativeSpec (= 0.66.4) 337 | - RCT-Folly (= 2021.06.28.00-v2) 338 | - React-Core/RCTVibrationHeaders (= 0.66.4) 339 | - React-jsi (= 0.66.4) 340 | - ReactCommon/turbomodule/core (= 0.66.4) 341 | - React-runtimeexecutor (0.66.4): 342 | - React-jsi (= 0.66.4) 343 | - ReactCommon/turbomodule/core (0.66.4): 344 | - DoubleConversion 345 | - glog 346 | - RCT-Folly (= 2021.06.28.00-v2) 347 | - React-callinvoker (= 0.66.4) 348 | - React-Core (= 0.66.4) 349 | - React-cxxreact (= 0.66.4) 350 | - React-jsi (= 0.66.4) 351 | - React-logger (= 0.66.4) 352 | - React-perflogger (= 0.66.4) 353 | - RNCMaskedView (0.1.11): 354 | - React 355 | - RNGestureHandler (2.5.0): 356 | - React-Core 357 | - RNReanimated (2.9.1): 358 | - DoubleConversion 359 | - FBLazyVector 360 | - FBReactNativeSpec 361 | - glog 362 | - RCT-Folly 363 | - RCTRequired 364 | - RCTTypeSafety 365 | - React-callinvoker 366 | - React-Core 367 | - React-Core/DevSupport 368 | - React-Core/RCTWebSocket 369 | - React-CoreModules 370 | - React-cxxreact 371 | - React-jsi 372 | - React-jsiexecutor 373 | - React-jsinspector 374 | - React-RCTActionSheet 375 | - React-RCTAnimation 376 | - React-RCTBlob 377 | - React-RCTImage 378 | - React-RCTLinking 379 | - React-RCTNetwork 380 | - React-RCTSettings 381 | - React-RCTText 382 | - ReactCommon/turbomodule/core 383 | - Yoga 384 | - RNScreens (3.12.0): 385 | - React-Core 386 | - React-RCTImage 387 | - Yoga (1.14.0) 388 | - YogaKit (1.18.1): 389 | - Yoga (~> 1.14) 390 | 391 | DEPENDENCIES: 392 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 393 | - BVLinearGradient (from `../node_modules/react-native-linear-gradient`) 394 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 395 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 396 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 397 | - Flipper (= 0.99.0) 398 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 399 | - Flipper-DoubleConversion (= 3.1.7) 400 | - Flipper-Fmt (= 7.1.7) 401 | - Flipper-Folly (= 2.6.7) 402 | - Flipper-Glog (= 0.3.6) 403 | - Flipper-PeerTalk (= 0.0.4) 404 | - Flipper-RSocket (= 1.4.3) 405 | - FlipperKit (= 0.99.0) 406 | - FlipperKit/Core (= 0.99.0) 407 | - FlipperKit/CppBridge (= 0.99.0) 408 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.99.0) 409 | - FlipperKit/FBDefines (= 0.99.0) 410 | - FlipperKit/FKPortForwarding (= 0.99.0) 411 | - FlipperKit/FlipperKitHighlightOverlay (= 0.99.0) 412 | - FlipperKit/FlipperKitLayoutPlugin (= 0.99.0) 413 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.99.0) 414 | - FlipperKit/FlipperKitNetworkPlugin (= 0.99.0) 415 | - FlipperKit/FlipperKitReactPlugin (= 0.99.0) 416 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.99.0) 417 | - FlipperKit/SKIOSNetworkPlugin (= 0.99.0) 418 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 419 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 420 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 421 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 422 | - React (from `../node_modules/react-native/`) 423 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 424 | - React-Core (from `../node_modules/react-native/`) 425 | - React-Core/DevSupport (from `../node_modules/react-native/`) 426 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 427 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 428 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 429 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 430 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 431 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 432 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 433 | - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) 434 | - react-native-video (from `../node_modules/react-native-video`) 435 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 436 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 437 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 438 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 439 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 440 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 441 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 442 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 443 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 444 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 445 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 446 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 447 | - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" 448 | - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) 449 | - RNReanimated (from `../node_modules/react-native-reanimated`) 450 | - RNScreens (from `../node_modules/react-native-screens`) 451 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 452 | 453 | SPEC REPOS: 454 | trunk: 455 | - CocoaAsyncSocket 456 | - Flipper 457 | - Flipper-Boost-iOSX 458 | - Flipper-DoubleConversion 459 | - Flipper-Fmt 460 | - Flipper-Folly 461 | - Flipper-Glog 462 | - Flipper-PeerTalk 463 | - Flipper-RSocket 464 | - FlipperKit 465 | - fmt 466 | - libevent 467 | - OpenSSL-Universal 468 | - YogaKit 469 | 470 | EXTERNAL SOURCES: 471 | boost: 472 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 473 | BVLinearGradient: 474 | :path: "../node_modules/react-native-linear-gradient" 475 | DoubleConversion: 476 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 477 | FBLazyVector: 478 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 479 | FBReactNativeSpec: 480 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 481 | glog: 482 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 483 | RCT-Folly: 484 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 485 | RCTRequired: 486 | :path: "../node_modules/react-native/Libraries/RCTRequired" 487 | RCTTypeSafety: 488 | :path: "../node_modules/react-native/Libraries/TypeSafety" 489 | React: 490 | :path: "../node_modules/react-native/" 491 | React-callinvoker: 492 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 493 | React-Core: 494 | :path: "../node_modules/react-native/" 495 | React-CoreModules: 496 | :path: "../node_modules/react-native/React/CoreModules" 497 | React-cxxreact: 498 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 499 | React-jsi: 500 | :path: "../node_modules/react-native/ReactCommon/jsi" 501 | React-jsiexecutor: 502 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 503 | React-jsinspector: 504 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 505 | React-logger: 506 | :path: "../node_modules/react-native/ReactCommon/logger" 507 | react-native-safe-area-context: 508 | :path: "../node_modules/react-native-safe-area-context" 509 | react-native-video: 510 | :path: "../node_modules/react-native-video" 511 | React-perflogger: 512 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 513 | React-RCTActionSheet: 514 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 515 | React-RCTAnimation: 516 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 517 | React-RCTBlob: 518 | :path: "../node_modules/react-native/Libraries/Blob" 519 | React-RCTImage: 520 | :path: "../node_modules/react-native/Libraries/Image" 521 | React-RCTLinking: 522 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 523 | React-RCTNetwork: 524 | :path: "../node_modules/react-native/Libraries/Network" 525 | React-RCTSettings: 526 | :path: "../node_modules/react-native/Libraries/Settings" 527 | React-RCTText: 528 | :path: "../node_modules/react-native/Libraries/Text" 529 | React-RCTVibration: 530 | :path: "../node_modules/react-native/Libraries/Vibration" 531 | React-runtimeexecutor: 532 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 533 | ReactCommon: 534 | :path: "../node_modules/react-native/ReactCommon" 535 | RNCMaskedView: 536 | :path: "../node_modules/@react-native-community/masked-view" 537 | RNGestureHandler: 538 | :path: "../node_modules/react-native-gesture-handler" 539 | RNReanimated: 540 | :path: "../node_modules/react-native-reanimated" 541 | RNScreens: 542 | :path: "../node_modules/react-native-screens" 543 | Yoga: 544 | :path: "../node_modules/react-native/ReactCommon/yoga" 545 | 546 | SPEC CHECKSUMS: 547 | boost: a7c83b31436843459a1961bfd74b96033dc77234 548 | BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 549 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 550 | DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 551 | FBLazyVector: e5569e42a1c79ca00521846c223173a57aca1fe1 552 | FBReactNativeSpec: fe08c1cd7e2e205718d77ad14b34957cce949b58 553 | Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733 554 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 555 | Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c 556 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 557 | Flipper-Folly: 83af37379faa69497529e414bd43fbfc7cae259a 558 | Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6 559 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 560 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 561 | FlipperKit: d8d346844eca5d9120c17d441a2f38596e8ed2b9 562 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 563 | glog: 5337263514dd6f09803962437687240c5dc39aa4 564 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 565 | OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b 566 | RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9 567 | RCTRequired: 4bf86c70714490bca4bf2696148638284622644b 568 | RCTTypeSafety: c475a7059eb77935fa53d2c17db299893f057d5d 569 | React: f64af14e3f2c50f6f2c91a5fd250e4ff1b3c3459 570 | React-callinvoker: b74e4ae80287780dcdf0cab262bcb581eeef56e7 571 | React-Core: 3eb7432bad96ff1d25aebc1defbae013fee2fd0e 572 | React-CoreModules: ad9e1fd5650e16666c57a08328df86fd7e480cb9 573 | React-cxxreact: 02633ff398cf7e91a2c1e12590d323c4a4b8668a 574 | React-jsi: 805c41a927d6499fb811772acb971467d9204633 575 | React-jsiexecutor: 94ce921e1d8ce7023366873ec371f3441383b396 576 | React-jsinspector: d0374f7509d407d2264168b6d0fad0b54e300b85 577 | React-logger: 933f80c97c633ee8965d609876848148e3fef438 578 | react-native-safe-area-context: eec048ba481a7ec7b1bf9d7b7a78fb1103f4806d 579 | react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28 580 | React-perflogger: 93075d8931c32cd1fce8a98c15d2d5ccc4d891bd 581 | React-RCTActionSheet: 7d3041e6761b4f3044a37079ddcb156575fb6d89 582 | React-RCTAnimation: 743e88b55ac62511ae5c2e22803d4f503f2a3a13 583 | React-RCTBlob: bee3a2f98fa7fc25c957c8643494244f74bea0a0 584 | React-RCTImage: 19fc9e29b06cc38611c553494f8d3040bf78c24e 585 | React-RCTLinking: dc799503979c8c711126d66328e7ce8f25c2848f 586 | React-RCTNetwork: 417e4e34cf3c19eaa5fd4e9eb20180d662a799ce 587 | React-RCTSettings: 4df89417265af26501a7e0e9192a34d3d9848dff 588 | React-RCTText: f8a21c3499ab322326290fa9b701ae29aa093aa5 589 | React-RCTVibration: e3ffca672dd3772536cb844274094b0e2c31b187 590 | React-runtimeexecutor: dec32ee6f2e2a26e13e58152271535fadff5455a 591 | ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4 592 | RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489 593 | RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50 594 | RNReanimated: 11e6e30bbc49079b7f0c321ac5830e6d113d0224 595 | RNScreens: 2559f98b0835103cbef3b26ba77fa61d4bb37ae7 596 | Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280 597 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 598 | 599 | PODFILE CHECKSUM: 6b65756e2162ff27b9c71b9e5104030d4c460f51 600 | 601 | COCOAPODS: 1.11.3 602 | -------------------------------------------------------------------------------- /ios/Quicksand.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/ios/Quicksand.ttf -------------------------------------------------------------------------------- /ios/animations.xcodeproj/xcshareddata/xcschemes/animations.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/animations.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/animations.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/animations/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /ios/animations/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"animations" 37 | initialProperties:nil]; 38 | 39 | if (@available(iOS 13.0, *)) { 40 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 41 | } else { 42 | rootView.backgroundColor = [UIColor whiteColor]; 43 | } 44 | 45 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 46 | UIViewController *rootViewController = [UIViewController new]; 47 | rootViewController.view = rootView; 48 | self.window.rootViewController = rootViewController; 49 | [self.window makeKeyAndVisible]; 50 | return YES; 51 | } 52 | 53 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 54 | { 55 | #if DEBUG 56 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 57 | #else 58 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 59 | #endif 60 | } 61 | 62 | @end 63 | -------------------------------------------------------------------------------- /ios/animations/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/animations/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/animations/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | animations 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 | SFUIText-Bold.ttf 57 | SFUIText-BoldItalic.ttf 58 | SFUIText-Heavy.ttf 59 | SFUIText-HeavyItalic.ttf 60 | SFUIText-Light.ttf 61 | SFUIText-LightItalic.ttf 62 | SFUIText-Medium.ttf 63 | SFUIText-MediumItalic.ttf 64 | SFUIText-Regular.ttf 65 | SFUIText-RegularItalic.ttf 66 | SFUIText-Semibold.ttf 67 | SFUIText-SemiboldItalic.ttf 68 | Quicksand.ttf 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /ios/animations/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/animations/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ios/animationsTests/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/animationsTests/animationsTests.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 animationsTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation animationsTests 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(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /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": "animations", 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/masked-view": "^0.1.10", 14 | "@react-navigation/bottom-tabs": "^6.2.0", 15 | "@react-navigation/native": "^6.0.8", 16 | "@react-navigation/native-stack": "^6.5.0", 17 | "react": "17.0.2", 18 | "react-native": "0.66.4", 19 | "react-native-gesture-handler": "^2.4.2", 20 | "react-native-global-props": "^1.1.5", 21 | "react-native-linear-gradient": "^2.5.6", 22 | "react-native-reanimated": "^2.5.0", 23 | "react-native-safe-area-context": "^4.0.1", 24 | "react-native-screens": "^3.12.0", 25 | "react-native-video": "^5.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 | "@testing-library/react-native": "^9.0.0", 32 | "@types/jest": "^26.0.23", 33 | "@types/react-native": "^0.66.4", 34 | "@types/react-native-global-props": "^1.1.1", 35 | "@types/react-native-video": "^5.0.12", 36 | "@types/react-test-renderer": "^17.0.1", 37 | "@typescript-eslint/eslint-plugin": "^5.7.0", 38 | "@typescript-eslint/parser": "^5.7.0", 39 | "babel-jest": "^26.6.3", 40 | "eslint": "^7.14.0", 41 | "jest": "^26.6.3", 42 | "metro-react-native-babel-preset": "^0.66.2", 43 | "react-test-renderer": "17.0.2", 44 | "typescript": "^4.4.4" 45 | }, 46 | "resolutions": { 47 | "@types/react": "^17" 48 | }, 49 | "jest": { 50 | "preset": "react-native", 51 | "moduleFileExtensions": [ 52 | "ts", 53 | "tsx", 54 | "js", 55 | "jsx", 56 | "json", 57 | "node" 58 | ] 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | assets: ['./src/assets/fonts'], 3 | }; 4 | -------------------------------------------------------------------------------- /src/animations/AnimatedBannerWithSearchInput/AnimatedBannerWithSearchInput.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef} from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | ScrollView, 6 | Image, 7 | Platform, 8 | StatusBar, 9 | Animated, 10 | TouchableOpacity, 11 | SafeAreaView, 12 | } from 'react-native'; 13 | import {WINDOW_HEIGHT} from '../../utils'; 14 | import SearchInput from './SearchInput'; 15 | 16 | export default ({navigation}: any) => { 17 | const animatedValue = useRef(new Animated.Value(0)).current; 18 | 19 | const bannerAnimation = { 20 | transform: [ 21 | { 22 | scale: animatedValue.interpolate({ 23 | inputRange: [-200, 0], 24 | outputRange: [2, 1], 25 | extrapolate: 'clamp', 26 | }), 27 | }, 28 | ], 29 | }; 30 | 31 | const searchInputContainerAnimation = { 32 | opacity: animatedValue.interpolate({ 33 | inputRange: [0, 40], 34 | outputRange: [0, 1], 35 | }), 36 | transform: [ 37 | { 38 | scale: animatedValue.interpolate({ 39 | inputRange: [0, 1, 40], 40 | outputRange: [0, 1, 1], 41 | extrapolate: 'clamp', 42 | }), 43 | }, 44 | ], 45 | }; 46 | 47 | const searchIconAnimation = { 48 | opacity: animatedValue.interpolate({ 49 | inputRange: [0, 40], 50 | outputRange: [1, 0], 51 | }), 52 | }; 53 | 54 | const backIconAnimation = { 55 | opacity: animatedValue.interpolate({ 56 | inputRange: [0, 40], 57 | outputRange: [1, 0], 58 | }), 59 | }; 60 | 61 | return ( 62 | 63 | 64 | 65 | 67 | 68 | 69 | 70 | navigation.goBack()}> 73 | 77 | 78 | 79 | 83 | 84 | 85 | 89 | 90 | 102 | 103 | 104 | 105 | 106 | ); 107 | }; 108 | 109 | const BANNER_HEIGHT = 224; 110 | const styles = StyleSheet.create({ 111 | container: { 112 | flex: 1, 113 | backgroundColor: 'white', 114 | }, 115 | searchButton: { 116 | position: 'absolute', 117 | right: 0, 118 | top: 48, 119 | width: 48, 120 | height: 48, 121 | zIndex: 100, 122 | }, 123 | searchIcon: { 124 | width: 32, 125 | height: 32, 126 | tintColor: 'white', 127 | zIndex: 50, 128 | }, 129 | backButton: { 130 | position: 'absolute', 131 | left: 16, 132 | top: 48, 133 | width: 48, 134 | height: 48, 135 | zIndex: 100, 136 | }, 137 | backIcon: { 138 | width: 16, 139 | height: 16, 140 | tintColor: 'white', 141 | zIndex: 50, 142 | }, 143 | searchInputContainer: { 144 | position: 'absolute', 145 | zIndex: 100, 146 | width: '100%', 147 | padding: 16, 148 | backgroundColor: 'white', 149 | ...Platform.select({ 150 | android: {elevation: 3}, 151 | ios: { 152 | shadowColor: '#a8bed2', 153 | shadowOpacity: 1, 154 | shadowRadius: 4, 155 | shadowOffset: { 156 | width: 2, 157 | height: 2, 158 | }, 159 | }, 160 | }), 161 | }, 162 | bannerContainer: { 163 | position: 'absolute', 164 | height: BANNER_HEIGHT, 165 | width: '100%', 166 | }, 167 | banner: { 168 | width: '100%', 169 | height: '100%', 170 | }, 171 | paddingForBanner: { 172 | height: BANNER_HEIGHT, 173 | }, 174 | scrollViewContent: { 175 | height: WINDOW_HEIGHT, 176 | backgroundColor: 'white', 177 | }, 178 | }); 179 | -------------------------------------------------------------------------------- /src/animations/AnimatedBannerWithSearchInput/SearchInput.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, TextInputProps, TextInput, View, Image} from 'react-native'; 3 | 4 | export default (props: TextInputProps) => { 5 | return ( 6 | 7 | 14 | 18 | 19 | ); 20 | }; 21 | 22 | const styles = StyleSheet.create({ 23 | inputWrapper: { 24 | justifyContent: 'center', 25 | }, 26 | input: { 27 | padding: 8, 28 | borderRadius: 8, 29 | backgroundColor: '#f6f6f6', 30 | color: '#333', 31 | }, 32 | searchIcon: { 33 | width: 24, 34 | height: 24, 35 | position: 'absolute', 36 | right: 16, 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /src/animations/CubeCarousel/CubeCarousel.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | StyleSheet, 4 | Animated, 5 | Dimensions, 6 | Platform, 7 | View, 8 | SafeAreaView, 9 | Image, 10 | } from 'react-native'; 11 | 12 | import users from '../../data/usersData'; 13 | 14 | const {width} = Dimensions.get('window'); 15 | const perspective = width; 16 | const angle = Math.atan(perspective / (width / 2)); 17 | const ratio = Platform.OS === 'ios' ? 2 : 1.2; 18 | 19 | export default class CubeCarousel extends React.Component { 20 | state = { 21 | x: new Animated.Value(0), 22 | }; 23 | 24 | getStyle(index: number) { 25 | const {x} = this.state; 26 | const offset = index * width; 27 | 28 | const inputRange = [offset - width, offset + width]; 29 | 30 | const translateX = x.interpolate({ 31 | inputRange, 32 | outputRange: [width / ratio, -width / ratio], 33 | extrapolate: 'clamp', 34 | }); 35 | const rotateY = x.interpolate({ 36 | inputRange, 37 | outputRange: [`${angle}rad`, `-${angle}rad`], 38 | extrapolate: 'clamp', 39 | }); 40 | 41 | const translateX1 = x.interpolate({ 42 | inputRange, 43 | outputRange: [width / 2, -width / 2], 44 | extrapolate: 'clamp', 45 | }); 46 | 47 | const extra = width / ratio / Math.cos(angle / 2) - width / ratio; 48 | const translateX2 = x.interpolate({ 49 | inputRange, 50 | outputRange: [-extra, extra], 51 | extrapolate: 'clamp', 52 | }); 53 | 54 | return { 55 | ...StyleSheet.absoluteFillObject, 56 | transform: [ 57 | {perspective}, 58 | {translateX}, 59 | {rotateY}, 60 | {translateX: translateX1}, 61 | {translateX: translateX2}, 62 | ], 63 | }; 64 | } 65 | 66 | getMaskStyle(index: number) { 67 | const {x} = this.state; 68 | const offset = index * width; 69 | const inputRange = [offset - width, offset, offset + width]; 70 | const opacity = x.interpolate({ 71 | inputRange, 72 | outputRange: [0.75, 0, 0.75], 73 | extrapolate: 'clamp', 74 | }); 75 | return { 76 | backgroundColor: 'black', 77 | ...StyleSheet.absoluteFillObject, 78 | opacity, 79 | }; 80 | } 81 | 82 | render() { 83 | const {x} = this.state; 84 | return ( 85 | 86 | {users.map((user, i) => ( 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | ))} 96 | 116 | 117 | ); 118 | } 119 | } 120 | 121 | const styles = StyleSheet.create({ 122 | container: { 123 | flex: 1, 124 | backgroundColor: 'black', 125 | }, 126 | image: { 127 | ...StyleSheet.absoluteFillObject, 128 | width: null, 129 | height: null, 130 | borderRadius: 5, 131 | }, 132 | footer: { 133 | flexDirection: 'row', 134 | alignItems: 'center', 135 | justifyContent: 'space-between', 136 | padding: 16, 137 | }, 138 | input: { 139 | borderWidth: 2, 140 | borderColor: 'white', 141 | height: 28, 142 | width: 250, 143 | borderRadius: Platform.OS === 'android' ? 0 : 10, 144 | }, 145 | }); 146 | -------------------------------------------------------------------------------- /src/animations/DoubleTapToHeart/DoubleTapToHeart.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef, useState} from 'react'; 2 | import { 3 | Animated, 4 | Image, 5 | Platform, 6 | SafeAreaView, 7 | StyleSheet, 8 | Text, 9 | TouchableOpacity, 10 | View, 11 | } from 'react-native'; 12 | import {WINDOW_WIDTH} from '../../utils'; 13 | 14 | const DoubleTapToHeart = () => { 15 | const [isHearted, setIsHearted] = useState(false); 16 | const lastTap = useRef(0); 17 | const isAnimating = useRef(false); 18 | const animatedValue = useRef(new Animated.Value(0)).current; 19 | 20 | useEffect(() => { 21 | if (isHearted) { 22 | Animated.timing(animatedValue, { 23 | toValue: 1, 24 | duration: 1000, 25 | useNativeDriver: true, 26 | }).start(() => (isAnimating.current = false)); 27 | } else { 28 | animatedValue.setValue(0); 29 | isAnimating.current = false; 30 | } 31 | }, [animatedValue, isHearted]); 32 | 33 | const heartAnimation = { 34 | transform: [ 35 | { 36 | scale: animatedValue.interpolate({ 37 | inputRange: [0, 0.1, 0.8, 1], 38 | outputRange: [0, 2, 2, 1], 39 | }), 40 | }, 41 | { 42 | translateY: animatedValue.interpolate({ 43 | inputRange: [0, 0.1, 0.8, 1], 44 | outputRange: [0, -40, -40, 1], 45 | }), 46 | }, 47 | ], 48 | }; 49 | const heartCircleAnimation = { 50 | opacity: animatedValue, 51 | }; 52 | 53 | return ( 54 | 55 | { 59 | const now = Date.now(); 60 | const DELAY = 300; 61 | if (lastTap.current && now - lastTap.current < DELAY) { 62 | if (!isAnimating.current) { 63 | setIsHearted(!isHearted); 64 | isAnimating.current = true; 65 | } 66 | } else { 67 | lastTap.current = now; 68 | } 69 | }}> 70 | 74 | 75 | 76 | Like and subscribe to Minh Techie channel 77 | 78 | 79 | 80 | {isHearted && ( 81 | 82 | 83 | 87 | 88 | )} 89 | 90 | 91 | ); 92 | }; 93 | 94 | const styles = StyleSheet.create({ 95 | container: { 96 | backgroundColor: 'white', 97 | flex: 1, 98 | justifyContent: 'center', 99 | alignItems: 'center', 100 | }, 101 | messageContainer: { 102 | flexDirection: 'row', 103 | }, 104 | messageAvatar: { 105 | width: 48, 106 | height: 48, 107 | borderRadius: 24, 108 | marginRight: 8, 109 | }, 110 | messageContent: { 111 | width: WINDOW_WIDTH * 0.7, 112 | backgroundColor: '#19A3FE', 113 | borderRadius: 8, 114 | padding: 8, 115 | }, 116 | messageText: { 117 | fontSize: 20, 118 | color: 'white', 119 | }, 120 | heartContainer: { 121 | position: 'absolute', 122 | bottom: -8, 123 | right: 0, 124 | width: 24, 125 | height: 24, 126 | justifyContent: 'center', 127 | alignItems: 'center', 128 | }, 129 | heartCircle: { 130 | width: 24, 131 | height: 24, 132 | borderRadius: 12, 133 | backgroundColor: 'white', 134 | ...Platform.select({ 135 | android: {elevation: 3}, 136 | ios: { 137 | shadowColor: 'grey', 138 | shadowOpacity: 1, 139 | shadowRadius: 1, 140 | shadowOffset: { 141 | width: 0.5, 142 | height: 0.5, 143 | }, 144 | }, 145 | }), 146 | }, 147 | heartIcon: { 148 | position: 'absolute', 149 | width: 18, 150 | height: 18, 151 | }, 152 | }); 153 | 154 | export default DoubleTapToHeart; 155 | -------------------------------------------------------------------------------- /src/animations/DraggableBottomSheet/DraggableBottomSheet.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef} from 'react'; 2 | import {Animated, PanResponder, Platform, StyleSheet, View} from 'react-native'; 3 | import {WINDOW_HEIGHT} from '../../utils'; 4 | 5 | const BOTTOM_SHEET_MAX_HEIGHT = WINDOW_HEIGHT * 0.6; 6 | const BOTTOM_SHEET_MIN_HEIGHT = WINDOW_HEIGHT * 0.1; 7 | const MAX_UPWARD_TRANSLATE_Y = 8 | BOTTOM_SHEET_MIN_HEIGHT - BOTTOM_SHEET_MAX_HEIGHT; // negative number; 9 | const MAX_DOWNWARD_TRANSLATE_Y = 0; 10 | const DRAG_THRESHOLD = 50; 11 | 12 | const DraggableBottomSheet = () => { 13 | const animatedValue = useRef(new Animated.Value(0)).current; 14 | const lastGestureDy = useRef(0); 15 | const panResponder = useRef( 16 | PanResponder.create({ 17 | onStartShouldSetPanResponder: () => true, 18 | onPanResponderGrant: () => { 19 | animatedValue.setOffset(lastGestureDy.current); 20 | }, 21 | onPanResponderMove: (e, gesture) => { 22 | animatedValue.setValue(gesture.dy); 23 | }, 24 | onPanResponderRelease: (e, gesture) => { 25 | animatedValue.flattenOffset(); 26 | lastGestureDy.current += gesture.dy; 27 | // if (lastGestureDy.current < MAX_UPWARD_TRANSLATE_Y) { 28 | // lastGestureDy.current = MAX_UPWARD_TRANSLATE_Y; 29 | // } else if (lastGestureDy.current > MAX_DOWNWARD_TRANSLATE_Y) { 30 | // lastGestureDy.current = MAX_DOWNWARD_TRANSLATE_Y; 31 | // } 32 | 33 | if (gesture.dy > 0) { 34 | // dragging down 35 | if (gesture.dy <= DRAG_THRESHOLD) { 36 | springAnimation('up'); 37 | } else { 38 | springAnimation('down'); 39 | } 40 | } else { 41 | // dragging up 42 | if (gesture.dy >= -DRAG_THRESHOLD) { 43 | springAnimation('down'); 44 | } else { 45 | springAnimation('up'); 46 | } 47 | } 48 | }, 49 | }), 50 | ).current; 51 | 52 | const springAnimation = (direction: 'up' | 'down') => { 53 | console.log('direction', direction); 54 | lastGestureDy.current = 55 | direction === 'down' ? MAX_DOWNWARD_TRANSLATE_Y : MAX_UPWARD_TRANSLATE_Y; 56 | Animated.spring(animatedValue, { 57 | toValue: lastGestureDy.current, 58 | useNativeDriver: true, 59 | }).start(); 60 | }; 61 | 62 | const bottomSheetAnimation = { 63 | transform: [ 64 | { 65 | translateY: animatedValue.interpolate({ 66 | inputRange: [MAX_UPWARD_TRANSLATE_Y, MAX_DOWNWARD_TRANSLATE_Y], 67 | outputRange: [MAX_UPWARD_TRANSLATE_Y, MAX_DOWNWARD_TRANSLATE_Y], 68 | extrapolate: 'clamp', 69 | }), 70 | }, 71 | ], 72 | }; 73 | 74 | return ( 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | const styles = StyleSheet.create({ 86 | container: { 87 | flex: 1, 88 | }, 89 | bottomSheet: { 90 | position: 'absolute', 91 | width: '100%', 92 | height: BOTTOM_SHEET_MAX_HEIGHT, 93 | bottom: BOTTOM_SHEET_MIN_HEIGHT - BOTTOM_SHEET_MAX_HEIGHT, 94 | ...Platform.select({ 95 | android: {elevation: 3}, 96 | ios: { 97 | shadowColor: '#a8bed2', 98 | shadowOpacity: 1, 99 | shadowRadius: 6, 100 | shadowOffset: { 101 | width: 2, 102 | height: 2, 103 | }, 104 | }, 105 | }), 106 | backgroundColor: 'white', 107 | borderTopLeftRadius: 32, 108 | borderTopRightRadius: 32, 109 | }, 110 | draggableArea: { 111 | width: 132, 112 | height: 32, 113 | alignSelf: 'center', 114 | justifyContent: 'center', 115 | alignItems: 'center', 116 | }, 117 | dragHandle: { 118 | width: 100, 119 | height: 6, 120 | backgroundColor: '#d3d3d3', 121 | borderRadius: 10, 122 | }, 123 | }); 124 | 125 | export default DraggableBottomSheet; 126 | -------------------------------------------------------------------------------- /src/animations/FacebookPostReaction/Emoji.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {ImageSourcePropType} from 'react-native'; 3 | 4 | import Animated, { 5 | useAnimatedStyle, 6 | withSpring, 7 | interpolate, 8 | Extrapolate, 9 | } from 'react-native-reanimated'; 10 | import styles from './facebookStyles'; 11 | 12 | const Emoji = ({ 13 | source, 14 | index, 15 | activeIndex, 16 | }: { 17 | source: ImageSourcePropType; 18 | index: number; 19 | activeIndex: Animated.SharedValue; 20 | }) => { 21 | const animationStyle = useAnimatedStyle(() => { 22 | return { 23 | transform: [ 24 | { 25 | scale: withSpring( 26 | interpolate( 27 | activeIndex.value, 28 | [index - 1, index, index + 1], 29 | [1, 1.75, 0.8], 30 | Extrapolate.CLAMP, 31 | ), 32 | ), 33 | }, 34 | ], 35 | }; 36 | }); 37 | 38 | return ( 39 | 40 | ); 41 | }; 42 | 43 | export default Emoji; 44 | -------------------------------------------------------------------------------- /src/animations/FacebookPostReaction/FacebookPostReaction.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Image, SafeAreaView, Text, TouchableOpacity, View} from 'react-native'; 3 | import { 4 | GestureHandlerRootView, 5 | PanGestureHandler, 6 | PanGestureHandlerGestureEvent, 7 | } from 'react-native-gesture-handler'; 8 | import Animated, { 9 | runOnJS, 10 | useAnimatedGestureHandler, 11 | useAnimatedStyle, 12 | useSharedValue, 13 | withTiming, 14 | } from 'react-native-reanimated'; 15 | import Emoji from './Emoji'; 16 | import emojisData from './emojisData'; 17 | import styles, { 18 | EMOJI_SIZE, 19 | EMOJI_MARGIN, 20 | EMOJI_BAR_PADDING, 21 | } from './facebookStyles'; 22 | 23 | const EMOJI_SPACE = EMOJI_SIZE + EMOJI_MARGIN * 2 + EMOJI_BAR_PADDING; 24 | 25 | const getEmojiIndex = (positionX: number) => { 26 | 'worklet'; 27 | return Math.ceil(positionX / EMOJI_SPACE) - 1; 28 | }; 29 | 30 | const FacebookPostReaction = () => { 31 | const [selectedEmojiIndex, setSelectedEmojiIndex] = useState( 32 | null, 33 | ); 34 | const emojisBarSharedValue = useSharedValue(0); 35 | const emojisBarAnimationStyle = useAnimatedStyle(() => { 36 | return { 37 | transform: [{scale: emojisBarSharedValue.value}], 38 | }; 39 | }, []); 40 | 41 | const activeEmojiIndexSharedValue = useSharedValue(-1); 42 | 43 | const selectEmoji = (x: number) => { 44 | const index = Math.ceil(x / EMOJI_SPACE) - 1; 45 | setSelectedEmojiIndex(index); 46 | }; 47 | 48 | const animatedGestureHandler = 49 | useAnimatedGestureHandler({ 50 | onStart: ({x}) => { 51 | activeEmojiIndexSharedValue.value = getEmojiIndex(x); 52 | }, 53 | onActive: ({x}) => { 54 | activeEmojiIndexSharedValue.value = getEmojiIndex(x); 55 | }, 56 | onEnd: ({x}) => { 57 | runOnJS(selectEmoji)(x); 58 | activeEmojiIndexSharedValue.value = -1; 59 | emojisBarSharedValue.value = withTiming(0); 60 | }, 61 | }); 62 | 63 | return ( 64 | 65 | 66 | 67 | 68 | 69 | 73 | 74 | Minh Techie 75 | Today 76 | 77 | 78 | 79 | 80 | 81 | Like and subscribe to Minh Techie channel 82 | 83 | 87 | 88 | 89 | { 92 | emojisBarSharedValue.value = withTiming(1, {duration: 100}); 93 | }}> 94 | 102 | Like 103 | 104 | 105 | 106 | 107 | 108 | {/* render emojis */} 109 | {emojisData.map((emojiSource, index) => { 110 | return ( 111 | 117 | ); 118 | })} 119 | 120 | 121 | 122 | 123 | 124 | ); 125 | }; 126 | 127 | export default FacebookPostReaction; 128 | -------------------------------------------------------------------------------- /src/animations/FacebookPostReaction/emojisData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | require('../../images/facebook-emojis/like.gif'), 3 | require('../../images/facebook-emojis/love.gif'), 4 | require('../../images/facebook-emojis/haha.gif'), 5 | require('../../images/facebook-emojis/wow.gif'), 6 | require('../../images/facebook-emojis/sad.gif'), 7 | ]; 8 | -------------------------------------------------------------------------------- /src/animations/FacebookPostReaction/facebookStyles.ts: -------------------------------------------------------------------------------- 1 | import {Platform, StyleSheet} from 'react-native'; 2 | 3 | export const EMOJI_BAR_PADDING = 4; 4 | export const EMOJI_BAR_BORDER_RADIUS = 16; 5 | export const EMOJI_SIZE = 28; 6 | export const EMOJI_MARGIN = 2; 7 | 8 | export default StyleSheet.create({ 9 | container: { 10 | flex: 1, 11 | backgroundColor: '#d3d3d3', 12 | }, 13 | safeAreaView: { 14 | backgroundColor: 'white', 15 | marginBottom: 8, 16 | }, 17 | post: { 18 | width: '100%', 19 | backgroundColor: 'white', 20 | padding: 16, 21 | paddingBottom: 0, 22 | }, 23 | authorInfoRow: { 24 | flexDirection: 'row', 25 | alignItems: 'center', 26 | marginBottom: 16, 27 | }, 28 | authorAvatar: { 29 | width: 32, 30 | height: 32, 31 | marginRight: 8, 32 | }, 33 | authorName: { 34 | fontSize: 13, 35 | fontWeight: 'bold', 36 | color: '#333', 37 | }, 38 | postedTime: { 39 | color: 'grey', 40 | fontSize: 11, 41 | }, 42 | postContentText: { 43 | fontSize: 14, 44 | color: '#1c1e21', 45 | marginBottom: 16, 46 | }, 47 | postImage: { 48 | width: '100%', 49 | height: 150, 50 | alignSelf: 'center', 51 | }, 52 | actionContainer: { 53 | flexDirection: 'row', 54 | alignItems: 'center', 55 | marginTop: 16, 56 | paddingVertical: 8, 57 | borderTopWidth: 1, 58 | borderTopColor: '#eaeaea', 59 | }, 60 | likeIcon: { 61 | width: 14, 62 | height: 14, 63 | marginRight: 4, 64 | }, 65 | likeText: { 66 | fontSize: 12, 67 | color: '#767676', 68 | }, 69 | gestureHandlerRootView: { 70 | position: 'absolute', 71 | bottom: 48, 72 | left: 32, 73 | }, 74 | emojisBar: { 75 | flexDirection: 'row', 76 | borderRadius: EMOJI_BAR_BORDER_RADIUS, 77 | padding: EMOJI_BAR_PADDING, 78 | backgroundColor: 'white', 79 | ...Platform.select({ 80 | android: {elevation: 3}, 81 | ios: { 82 | shadowColor: '#a8bed2', 83 | shadowOpacity: 1, 84 | shadowRadius: 4, 85 | shadowOffset: { 86 | width: 2, 87 | height: 2, 88 | }, 89 | }, 90 | }), 91 | }, 92 | emoji: { 93 | width: EMOJI_SIZE, 94 | height: EMOJI_SIZE, 95 | marginHorizontal: EMOJI_MARGIN, 96 | }, 97 | }); 98 | -------------------------------------------------------------------------------- /src/animations/MainStackNavigator.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | StyleSheet, 4 | SafeAreaView, 5 | TouchableOpacity, 6 | Text, 7 | ScrollView, 8 | } from 'react-native'; 9 | import {NavigationContainer} from '@react-navigation/native'; 10 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 11 | import DraggableBottomSheet from './DraggableBottomSheet/DraggableBottomSheet'; 12 | import Tinder from './Tinder/Tinder'; 13 | import ZoomableImage from './ZoomableImage/ZoomableImage'; 14 | import SwipeableList from './SwipeableList/SwipeableList'; 15 | import CubeCarousel from './CubeCarousel/CubeCarousel'; 16 | import PickPhoneColor from './PickPhoneColor/PickPhoneColor'; 17 | import ReactToMessage from './ReactToMessage/ReactToMessage'; 18 | import DoubleTapToHeart from './DoubleTapToHeart/DoubleTapToHeart'; 19 | import MoMoHeader from './MomoHeader/MomoHeader'; 20 | import ZingCarousel from './ZingCarousel/ZingCarousel'; 21 | import AnimatedBannerWithSearchInput from './AnimatedBannerWithSearchInput/AnimatedBannerWithSearchInput'; 22 | import TikTokMusicDisc from './TikTokMusicDisc/TikTokMusicDisc'; 23 | import FacebookPostReaction from './FacebookPostReaction/FacebookPostReaction'; 24 | import MessengerInput from './MessengerInput/MessengerInput'; 25 | 26 | const Stack = createNativeStackNavigator(); 27 | 28 | export default () => ( 29 | 30 | 34 | null}} 38 | /> 39 | null}} 43 | /> 44 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | null}} 89 | /> 90 | null}} 94 | /> 95 | null}} 99 | /> 100 | 101 | 102 | 103 | ); 104 | 105 | const MenuItem = ({onPress, label}) => { 106 | return ( 107 | 108 | {label} 109 | 110 | ); 111 | }; 112 | 113 | const HomeScreen = ({navigation}) => { 114 | const {navigate} = navigation; 115 | return ( 116 | 117 | 118 | navigate('AnimatedBannerWithSearchInput')} 120 | label="Animated Banner with Search Input" 121 | /> 122 | navigate('DraggableBottomSheet')} 124 | label="Draggable Bottom Sheet" 125 | /> 126 | navigate('Tinder')} label="Tinder" /> 127 | navigate('ZoomableImage')} 129 | label="Zoomable Image" 130 | /> 131 | navigate('SwipeableList')} 133 | label="Swipeable List" 134 | /> 135 | navigate('PickPhoneColor')} 137 | label="Pick phone color" 138 | /> 139 | navigate('CubeCarousel')} 141 | label="Cube Carousel" 142 | /> 143 | navigate('TikTokMusicDisc')} 145 | label="TikTok Music Disc" 146 | /> 147 | navigate('ReactToMessage')} 149 | label="React To Message" 150 | /> 151 | navigate('DoubleTapToHeart')} 153 | label="Double Tap To Heart" 154 | /> 155 | navigate('MoMoHeader')} label="MoMo Header" /> 156 | navigate('ZingCarousel')} 158 | label="ZingCarousel" 159 | /> 160 | navigate('FacebookPostReaction')} 162 | label="Facebook Post Reaction" 163 | /> 164 | navigate('MessengerInput')} 166 | label="Messenger Input" 167 | /> 168 | 169 | 170 | ); 171 | }; 172 | 173 | const styles = StyleSheet.create({ 174 | container: { 175 | flex: 1, 176 | backgroundColor: 'white', 177 | }, 178 | scrollView: { 179 | justifyContent: 'center', 180 | alignItems: 'center', 181 | }, 182 | item: { 183 | width: '50%', 184 | alignItems: 'center', 185 | padding: 8, 186 | margin: 8, 187 | borderRadius: 8, 188 | backgroundColor: '#0584FE', 189 | }, 190 | text: { 191 | color: 'white', 192 | }, 193 | }); 194 | -------------------------------------------------------------------------------- /src/animations/MessengerInput/MessengerInput.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import { 3 | Image, 4 | SafeAreaView, 5 | StyleSheet, 6 | TextInput, 7 | TouchableOpacity, 8 | View, 9 | } from 'react-native'; 10 | import Animated, { 11 | useAnimatedStyle, 12 | useSharedValue, 13 | interpolate, 14 | Extrapolate, 15 | withTiming, 16 | } from 'react-native-reanimated'; 17 | 18 | import {WINDOW_WIDTH} from '../../utils'; 19 | 20 | const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); 21 | const AnimatedTouchableOpacity = 22 | Animated.createAnimatedComponent(TouchableOpacity); 23 | 24 | const ICON_SIZE = 20; 25 | const PADDING_X = 8; 26 | const CONTENT_WIDTH = WINDOW_WIDTH - PADDING_X * 2; 27 | const EXPAND_BUTTON_WIDTH = 36; 28 | const SUBMIT_BUTTON_WIDTH = 36; 29 | const MAIN_SECTION_WIDTH = 30 | CONTENT_WIDTH - EXPAND_BUTTON_WIDTH - SUBMIT_BUTTON_WIDTH; 31 | const INPUT_WIDTH = MAIN_SECTION_WIDTH / 2; 32 | 33 | export default function MessengerInput() { 34 | const [message, setMessage] = useState(''); 35 | 36 | const animatedSharedValue = useSharedValue(INPUT_WIDTH); 37 | 38 | const messageInputAnimation = useAnimatedStyle(() => { 39 | return { 40 | width: withTiming(animatedSharedValue.value), 41 | }; 42 | }, []); 43 | 44 | const featureIconAnimation = useAnimatedStyle(() => { 45 | return { 46 | width: withTiming( 47 | interpolate( 48 | animatedSharedValue.value, 49 | [INPUT_WIDTH, MAIN_SECTION_WIDTH], 50 | [20, 0], 51 | Extrapolate.CLAMP, 52 | ), 53 | ), 54 | }; 55 | }, []); 56 | 57 | const expandButtonAnimation = useAnimatedStyle(() => { 58 | return { 59 | width: withTiming( 60 | interpolate( 61 | animatedSharedValue.value, 62 | [INPUT_WIDTH, MAIN_SECTION_WIDTH], 63 | [0, EXPAND_BUTTON_WIDTH], 64 | Extrapolate.CLAMP, 65 | ), 66 | ), 67 | }; 68 | }, []); 69 | 70 | return ( 71 | 72 | 73 | {/* Start left section */} 74 | { 76 | animatedSharedValue.value = INPUT_WIDTH; 77 | }} 78 | style={[styles.expandButton, expandButtonAnimation]}> 79 | 83 | 84 | 85 | 89 | 93 | 97 | 101 | 102 | { 105 | animatedSharedValue.value = MAIN_SECTION_WIDTH; 106 | }} 107 | onChangeText={text => setMessage(text)} 108 | value={message} 109 | /> 110 | {/* End left section */} 111 | 112 | {/* Start right section */} 113 | 114 | {!message ? ( 115 | 119 | ) : ( 120 | 124 | )} 125 | 126 | 127 | 128 | ); 129 | } 130 | 131 | const styles = StyleSheet.create({ 132 | screen: { 133 | flex: 1, 134 | backgroundColor: 'black', 135 | justifyContent: 'flex-end', 136 | }, 137 | bottomContainer: { 138 | flexDirection: 'row', 139 | justifyContent: 'space-between', 140 | alignItems: 'center', 141 | paddingHorizontal: PADDING_X, 142 | marginBottom: 16, 143 | }, 144 | expandButton: { 145 | position: 'absolute', 146 | left: 0, 147 | overflow: 'hidden', 148 | }, 149 | icon: { 150 | height: ICON_SIZE, 151 | resizeMode: 'contain', 152 | tintColor: '#0584FE', 153 | }, 154 | messageInput: { 155 | height: 36, 156 | paddingHorizontal: 16, 157 | marginRight: SUBMIT_BUTTON_WIDTH, 158 | backgroundColor: '#333', 159 | zIndex: 100, 160 | borderRadius: 16, 161 | color: 'white', 162 | }, 163 | submitButton: { 164 | position: 'absolute', 165 | right: 0, 166 | width: SUBMIT_BUTTON_WIDTH, 167 | justifyContent: 'center', 168 | alignItems: 'center', 169 | }, 170 | }); 171 | -------------------------------------------------------------------------------- /src/animations/Modal/Modal.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useEffect} from 'react'; 2 | import {Animated, TouchableOpacity, View, Text} from 'react-native'; 3 | 4 | import styles from './styles'; 5 | 6 | interface ModalProps { 7 | title?: string; 8 | isVisible: boolean; 9 | onClose: () => void; 10 | } 11 | 12 | const Modal: React.FC = ({isVisible, title, children, onClose}) => { 13 | const animatedValue = useRef(new Animated.Value(0)).current; 14 | 15 | const handleClose = () => { 16 | Animated.timing(animatedValue, { 17 | toValue: 0, 18 | useNativeDriver: false, 19 | }).start(() => onClose()); 20 | }; 21 | 22 | useEffect(() => { 23 | Animated.timing(animatedValue, { 24 | toValue: isVisible ? 1 : 0, 25 | useNativeDriver: false, 26 | }).start(); 27 | }, [isVisible]); 28 | 29 | const containerAnimation = { 30 | opacity: animatedValue, 31 | }; 32 | 33 | return isVisible ? ( 34 | 35 | 36 | 37 | {title} 38 | 39 | 40 | 41 | 42 | 43 | {children} 44 | 45 | ) : null; 46 | }; 47 | 48 | export default Modal; 49 | -------------------------------------------------------------------------------- /src/animations/Modal/styles.js: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | position: 'absolute', 6 | width: '100%', 7 | height: '100%', 8 | justifyContent: 'center', 9 | alignItems: 'center', 10 | zIndex: 9999999, 11 | backgroundColor: 'rgba(0, 0, 0, 0.7)' 12 | }, 13 | modal: { 14 | width: '80%', 15 | height: '90%', 16 | backgroundColor: 'white', 17 | borderRadius: 8 18 | }, 19 | header: { 20 | width: '100%', 21 | marginTop: 16, 22 | flexDirection: 'row', 23 | justifyContent: 'center', 24 | alignItems: 'center' 25 | }, 26 | title: { 27 | fontSize: 18, 28 | fontWeight: 'bold' 29 | }, 30 | closeBtn: { 31 | position: 'absolute', 32 | right: 16 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /src/animations/MomoHeader/MomoHeader.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef} from 'react'; 2 | import { 3 | SafeAreaView, 4 | View, 5 | TextInput, 6 | Image, 7 | StyleSheet, 8 | ScrollView, 9 | StatusBar, 10 | Animated, 11 | } from 'react-native'; 12 | import {getFeatureViewAnimation} from './utils'; 13 | 14 | const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); 15 | 16 | const UPPER_HEADER_HEIGHT = 32; 17 | const UPPER_HEADER_PADDING_TOP = 4; 18 | const LOWER_HEADER_HEIGHT = 96; 19 | 20 | export default function MomoHeader() { 21 | const animatedValue = useRef(new Animated.Value(0)).current; 22 | const scrollViewRef = useRef(null); 23 | const lastOffsetY = useRef(0); 24 | const scrollDirection = useRef(''); 25 | 26 | const depositViewAnimation = getFeatureViewAnimation(animatedValue, 36); 27 | const withdrawViewAnimation = getFeatureViewAnimation(animatedValue, -16); 28 | const qrViewAnimation = getFeatureViewAnimation(animatedValue, -56); 29 | const scanViewAnimation = getFeatureViewAnimation(animatedValue, -92); 30 | 31 | const featureIconCircleAnimation = { 32 | opacity: animatedValue.interpolate({ 33 | inputRange: [0, 25], 34 | outputRange: [1, 0], 35 | extrapolate: 'clamp', 36 | }), 37 | }; 38 | const featureNameAnimation = { 39 | transform: [ 40 | { 41 | scale: animatedValue.interpolate({ 42 | inputRange: [0, 30], 43 | outputRange: [1, 0], 44 | extrapolate: 'clamp', 45 | }), 46 | }, 47 | ], 48 | opacity: animatedValue.interpolate({ 49 | inputRange: [0, 30], 50 | outputRange: [1, 0], 51 | extrapolate: 'clamp', 52 | }), 53 | }; 54 | const featureIconAnimation = { 55 | opacity: animatedValue.interpolate({ 56 | inputRange: [0, 50], 57 | outputRange: [0, 1], 58 | extrapolate: 'clamp', 59 | }), 60 | }; 61 | 62 | const textInputAnimation = { 63 | transform: [ 64 | { 65 | scaleX: animatedValue.interpolate({ 66 | inputRange: [0, 50], 67 | outputRange: [1, 0], 68 | extrapolate: 'clamp', 69 | }), 70 | }, 71 | { 72 | translateX: animatedValue.interpolate({ 73 | inputRange: [0, 25], 74 | outputRange: [0, -100], 75 | extrapolate: 'clamp', 76 | }), 77 | }, 78 | ], 79 | opacity: animatedValue.interpolate({ 80 | inputRange: [0, 25], 81 | outputRange: [1, 0], 82 | extrapolate: 'clamp', 83 | }), 84 | }; 85 | 86 | return ( 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 101 | 106 | 107 | 108 | 112 | 116 | 117 | 118 | 119 | 120 | 124 | 128 | 129 | NẠP TIỀN 130 | 131 | 132 | 133 | 134 | 138 | 142 | 143 | RÚT TIỀN 144 | 145 | 146 | 147 | 148 | 152 | 156 | 157 | MÃ QR 158 | 159 | 160 | 161 | 162 | 166 | 170 | 171 | QUÉT MÃ 172 | 173 | 174 | 175 | 176 | 177 | { 181 | const offsetY = e.nativeEvent.contentOffset.y; 182 | scrollDirection.current = 183 | offsetY - lastOffsetY.current > 0 ? 'down' : 'up'; 184 | lastOffsetY.current = offsetY; 185 | animatedValue.setValue(offsetY); 186 | }} 187 | onScrollEndDrag={() => { 188 | scrollViewRef.current?.scrollTo({ 189 | y: scrollDirection.current === 'down' ? 100 : 0, 190 | animated: true, 191 | }); 192 | }} 193 | scrollEventThrottle={16}> 194 | 195 | 196 | 197 | 198 | ); 199 | } 200 | 201 | const styles = StyleSheet.create({ 202 | container: { 203 | flex: 1, 204 | }, 205 | icon16: { 206 | width: 16, 207 | height: 16, 208 | }, 209 | icon32: { 210 | width: 32, 211 | height: 32, 212 | }, 213 | upperHeaderPlaceholder: { 214 | height: UPPER_HEADER_HEIGHT + UPPER_HEADER_PADDING_TOP, 215 | paddingTop: UPPER_HEADER_PADDING_TOP, 216 | }, 217 | header: { 218 | position: 'absolute', 219 | width: '100%', 220 | backgroundColor: '#AF0C6E', 221 | }, 222 | upperHeader: { 223 | flexDirection: 'row', 224 | alignItems: 'center', 225 | paddingHorizontal: 16, 226 | height: UPPER_HEADER_HEIGHT + UPPER_HEADER_PADDING_TOP, 227 | paddingTop: UPPER_HEADER_PADDING_TOP, 228 | }, 229 | searchContainer: { 230 | flex: 1, 231 | justifyContent: 'center', 232 | }, 233 | featureIcon: { 234 | width: 16, 235 | height: 16, 236 | position: 'absolute', 237 | top: 8, 238 | }, 239 | bell: { 240 | width: 16, 241 | height: 16, 242 | marginHorizontal: 32, 243 | }, 244 | avatar: { 245 | width: 28, 246 | height: 28, 247 | }, 248 | lowerHeader: { 249 | flexDirection: 'row', 250 | justifyContent: 'space-between', 251 | alignItems: 'center', 252 | width: '100%', 253 | height: LOWER_HEADER_HEIGHT, 254 | paddingHorizontal: 16, 255 | }, 256 | searchInput: { 257 | position: 'absolute', 258 | width: '100%', 259 | backgroundColor: 'rgba(255, 255, 255, 0.3)', 260 | color: 'white', 261 | borderRadius: 4, 262 | paddingVertical: 4, 263 | paddingLeft: 32, 264 | }, 265 | feature: { 266 | alignItems: 'center', 267 | }, 268 | featureName: { 269 | fontWeight: 'bold', 270 | fontSize: 12, 271 | lineHeight: 14, 272 | color: '#FFFFFF', 273 | marginTop: 12, 274 | }, 275 | spaceForHeader: { 276 | height: LOWER_HEADER_HEIGHT, 277 | }, 278 | scrollViewContent: { 279 | height: 1000, 280 | backgroundColor: 'white', 281 | }, 282 | }); 283 | -------------------------------------------------------------------------------- /src/animations/MomoHeader/utils.ts: -------------------------------------------------------------------------------- 1 | export const getFeatureViewAnimation = (animatedValue, outputX: number) => { 2 | const TRANSLATE_X_INPUT_RANGE = [0, 80]; 3 | const translateY = { 4 | translateY: animatedValue.interpolate({ 5 | inputRange: [0, 100], 6 | outputRange: [0, -50], 7 | extrapolate: 'clamp', 8 | }), 9 | }; 10 | return { 11 | transform: [ 12 | { 13 | translateX: animatedValue.interpolate({ 14 | inputRange: TRANSLATE_X_INPUT_RANGE, 15 | outputRange: [0, outputX], 16 | extrapolate: 'clamp', 17 | }), 18 | }, 19 | translateY, 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /src/animations/PickPhoneColor/PickPhoneColor.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useRef} from 'react'; 2 | import {View, TouchableOpacity, Text, Animated, StyleSheet} from 'react-native'; 3 | import {WINDOW_WIDTH} from '../../utils'; 4 | 5 | const colors = [ 6 | {code: '#fedec5', name: 'Gold'}, 7 | {code: '#6d7a71', name: 'Green'}, 8 | {code: '#eeeee6', name: 'Silver'}, 9 | {code: '#545351', name: 'Space gray'}, 10 | ]; 11 | const iphoneImages = [ 12 | require('../../images/pick-phone/iphone_11_pro_max_gold.png'), 13 | require('../../images/pick-phone/iphone_11_pro_max_midnight_green.png'), 14 | require('../../images/pick-phone/iphone_11_pro_max_silver.png'), 15 | require('../../images/pick-phone/iphone_11_pro_max_space_gray.png'), 16 | ]; 17 | 18 | const PickPhoneColor = () => { 19 | const [pickedColorIndex, setPickedColorIndex] = useState(0); 20 | const animatedValue = useRef(new Animated.Value(5)).current; 21 | 22 | return ( 23 | 24 | 25 | 46 | 55 | 56 | 57 | {colors.map(({code, name}, index) => ( 58 | { 62 | if (index !== pickedColorIndex) { 63 | setPickedColorIndex(index); 64 | animatedValue.setValue(0); 65 | Animated.timing(animatedValue, { 66 | toValue: 5, 67 | duration: 1200, 68 | useNativeDriver: true, 69 | }).start(); 70 | } 71 | }}> 72 | 73 | 74 | {name} 75 | 76 | 77 | ))} 78 | 79 | 80 | ); 81 | }; 82 | 83 | const styles = StyleSheet.create({ 84 | container: { 85 | flex: 1, 86 | }, 87 | imageContainer: { 88 | flex: 2, 89 | justifyContent: 'center', 90 | alignItems: 'center', 91 | overflow: 'hidden', 92 | }, 93 | image: { 94 | width: '75%', 95 | height: '75%', 96 | zIndex: 100, 97 | resizeMode: 'contain', 98 | }, 99 | imageMask: { 100 | width: WINDOW_WIDTH, 101 | height: WINDOW_WIDTH, 102 | borderRadius: WINDOW_WIDTH / 2, 103 | position: 'absolute', 104 | }, 105 | grid: { 106 | flex: 1, 107 | flexDirection: 'row', 108 | flexWrap: 'wrap', 109 | alignItems: 'center', 110 | }, 111 | cell: { 112 | flexBasis: '25%', 113 | alignItems: 'center', 114 | marginVertical: 16, 115 | }, 116 | colorOption: { 117 | width: 32, 118 | height: 32, 119 | borderRadius: 16, 120 | shadowColor: 'black', 121 | shadowOpacity: 0.5, 122 | shadowOffset: {width: 2, height: 1}, 123 | marginBottom: 8, 124 | }, 125 | hightlighted: { 126 | fontWeight: '500', 127 | }, 128 | }); 129 | 130 | export default PickPhoneColor; 131 | -------------------------------------------------------------------------------- /src/animations/RandomNumber.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import { 3 | View, 4 | Text, 5 | Animated, 6 | SafeAreaView, 7 | TouchableOpacity, 8 | StyleSheet, 9 | } from 'react-native'; 10 | 11 | const getRandomTime = () => { 12 | return Math.random() * 50; 13 | }; 14 | 15 | const CircledNumber = ({ 16 | isFlashing, 17 | value, 18 | }: { 19 | isFlashing: boolean; 20 | value: number; 21 | }) => { 22 | const animatedValue = useRef(new Animated.Value(0)).current; 23 | 24 | useEffect(() => { 25 | if (isFlashing) { 26 | setTimeout(() => { 27 | Animated.timing(animatedValue, { 28 | toValue: 1, 29 | duration: 300, 30 | useNativeDriver: false, 31 | }).start(() => { 32 | animatedValue.setValue(0); 33 | }); 34 | }, value * getRandomTime()); 35 | } 36 | }, [isFlashing]); 37 | 38 | return ( 39 | 50 | 58 | {value} 59 | 60 | 61 | ); 62 | }; 63 | 64 | const data = Array.from(Array(50).keys()); 65 | 66 | const randomTrueOrFalse = () => { 67 | return Math.random() < 0.2 ? false : true; 68 | }; 69 | 70 | export default function RandomNumber() { 71 | const [flashingItems, setFlashingItems] = useState>([]); 72 | 73 | const randomNumber = () => { 74 | const _flashingItems: Array = []; 75 | 76 | data.forEach((value, index) => { 77 | _flashingItems[index] = randomTrueOrFalse(); 78 | }); 79 | 80 | setFlashingItems(_flashingItems); 81 | }; 82 | 83 | return ( 84 | 85 | 86 | {data.map((value, index) => ( 87 | 92 | ))} 93 | 94 | 95 | Random numbers 96 | 97 | 98 | ); 99 | } 100 | 101 | const styles = StyleSheet.create({ 102 | container: { 103 | flex: 1, 104 | backgroundColor: '#fff', 105 | }, 106 | numbersContainer: { 107 | flexDirection: 'row', 108 | justifyContent: 'center', 109 | alignItems: 'center', 110 | flexWrap: 'wrap', 111 | backgroundColor: '#eaeaea', 112 | margin: 16, 113 | borderRadius: 16, 114 | }, 115 | numberContainer: { 116 | width: 32, 117 | height: 32, 118 | borderRadius: 16, 119 | justifyContent: 'center', 120 | alignItems: 'center', 121 | margin: 8, 122 | }, 123 | randomButton: { 124 | justifyContent: 'center', 125 | alignItems: 'center', 126 | alignSelf: 'center', 127 | width: 150, 128 | borderRadius: 8, 129 | padding: 8, 130 | backgroundColor: '#19b5f3', 131 | }, 132 | randomButtonText: { 133 | color: 'white', 134 | }, 135 | }); 136 | -------------------------------------------------------------------------------- /src/animations/ReactToMessage/AnimatedHeart.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react'; 2 | import {StyleSheet, Animated} from 'react-native'; 3 | import {WINDOW_HEIGHT, WINDOW_WIDTH} from '../../utils/'; 4 | 5 | const getRandomSignedNum = () => (Math.random() < 0.5 ? -1 : 1); 6 | const getRandomXOutput = () => { 7 | return getRandomSignedNum() < 0 8 | ? -Math.random() * WINDOW_WIDTH * 0.7 9 | : Math.random(); 10 | }; 11 | const getRandomRotateOutput = () => { 12 | return [getRandomSignedNum() < 0 ? '-60deg' : '60deg', '0deg']; 13 | }; 14 | 15 | type AnimatedHeartProps = { 16 | id: string; 17 | onCompleteAnimation: (id: string) => void; 18 | }; 19 | const AnimatedHeart = ({id, onCompleteAnimation}: AnimatedHeartProps) => { 20 | const animatedValueY = useRef(new Animated.Value(0)).current; 21 | 22 | useEffect(() => { 23 | Animated.timing(animatedValueY, { 24 | toValue: -WINDOW_HEIGHT, 25 | duration: 3000, 26 | useNativeDriver: true, 27 | }).start(() => onCompleteAnimation(id)); 28 | }, [animatedValueY, onCompleteAnimation, id]); 29 | 30 | const randomXOutput = useRef(getRandomXOutput()).current; 31 | const randomRotateOutput = useRef(getRandomRotateOutput()).current; 32 | 33 | return ( 34 | 73 | ); 74 | }; 75 | 76 | const styles = StyleSheet.create({ 77 | heartIcon: { 78 | width: 24, 79 | height: 24, 80 | position: 'absolute', 81 | right: 0, 82 | }, 83 | }); 84 | 85 | export default AnimatedHeart; 86 | -------------------------------------------------------------------------------- /src/animations/ReactToMessage/ReactToMessage.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useRef, useState} from 'react'; 2 | import { 3 | Image, 4 | Platform, 5 | SafeAreaView, 6 | StyleSheet, 7 | Text, 8 | TouchableOpacity, 9 | View, 10 | Animated, 11 | } from 'react-native'; 12 | import AnimatedHeart from './AnimatedHeart'; 13 | import {WINDOW_WIDTH} from '../../utils'; 14 | 15 | function getUniqueID() { 16 | return Math.floor(Math.random() * Date.now()).toString(); 17 | } 18 | 19 | const ReactToMessage = () => { 20 | const [heartCount, setHeartCount] = useState(0); 21 | const [hearts, setHearts] = useState<{id: string}[]>([]); 22 | 23 | const countAnimatedValue = useRef(new Animated.Value(0)).current; 24 | const timeout = useRef>(); 25 | 26 | const handleCompleteAnimation = useCallback((id: string) => { 27 | setHearts(oldHearts => { 28 | return oldHearts.filter(heart => heart.id !== id); 29 | }); 30 | }, []); 31 | 32 | return ( 33 | 34 | 35 | 39 | 40 | 41 | Like and subscribe to Minh Techie channel 42 | 43 | 44 | 45 | { 49 | if (timeout.current) { 50 | clearTimeout(timeout.current); 51 | } 52 | 53 | setHeartCount(heartCount + 1); 54 | setHearts(oldHearts => [...oldHearts, {id: getUniqueID()}]); 55 | 56 | timeout.current = setTimeout(() => { 57 | Animated.spring(countAnimatedValue, { 58 | toValue: 0, 59 | speed: 48, 60 | useNativeDriver: true, 61 | }).start(); 62 | }, 500); 63 | Animated.spring(countAnimatedValue, { 64 | toValue: -64, 65 | speed: 48, 66 | useNativeDriver: true, 67 | }).start(); 68 | }}> 69 | 70 | {heartCount ? ( 71 | 75 | ) : ( 76 | 80 | )} 81 | 82 | 83 | 100 | {heartCount} 101 | 102 | {hearts.map(({id}) => ( 103 | 108 | ))} 109 | 110 | 111 | ); 112 | }; 113 | 114 | const styles = StyleSheet.create({ 115 | container: { 116 | backgroundColor: 'white', 117 | flex: 1, 118 | justifyContent: 'center', 119 | alignItems: 'center', 120 | }, 121 | messageContainer: { 122 | flexDirection: 'row', 123 | }, 124 | messageAvatar: { 125 | width: 48, 126 | height: 48, 127 | borderRadius: 24, 128 | marginRight: 8, 129 | }, 130 | messageContent: { 131 | width: WINDOW_WIDTH * 0.7, 132 | backgroundColor: '#178BF4', 133 | borderRadius: 8, 134 | padding: 8, 135 | }, 136 | messageText: { 137 | fontSize: 20, 138 | color: 'white', 139 | }, 140 | messageSentTime: { 141 | color: 'white', 142 | fontSize: 14, 143 | marginTop: 4, 144 | }, 145 | loveButton: { 146 | position: 'absolute', 147 | bottom: -16, 148 | right: -16, 149 | width: 48, 150 | height: 48, 151 | justifyContent: 'center', 152 | alignItems: 'center', 153 | }, 154 | loveCircle: { 155 | width: 24, 156 | height: 24, 157 | justifyContent: 'center', 158 | alignItems: 'center', 159 | borderRadius: 16, 160 | backgroundColor: 'white', 161 | ...Platform.select({ 162 | android: {elevation: 3}, 163 | ios: { 164 | shadowColor: 'grey', 165 | shadowOpacity: 1, 166 | shadowRadius: 1, 167 | shadowOffset: { 168 | width: 0.5, 169 | height: 0.5, 170 | }, 171 | }, 172 | }), 173 | }, 174 | loveIcon: { 175 | width: 12, 176 | height: 12, 177 | }, 178 | loveCountCircle: { 179 | position: 'absolute', 180 | bottom: -16, 181 | justifyContent: 'center', 182 | alignItems: 'center', 183 | width: 32, 184 | height: 32, 185 | right: -8, 186 | borderRadius: 16, 187 | backgroundColor: 'orange', 188 | zIndex: 100, 189 | }, 190 | loveCountText: { 191 | color: 'white', 192 | }, 193 | }); 194 | 195 | export default ReactToMessage; 196 | -------------------------------------------------------------------------------- /src/animations/SwipeableList/SwipeableList.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState} from 'react'; 2 | import { 3 | Animated, 4 | View, 5 | Text, 6 | FlatList, 7 | PanResponder, 8 | Easing, 9 | TouchableOpacity, 10 | } from 'react-native'; 11 | import dummyData from '../../data/dummyData'; 12 | 13 | import styles from './styles'; 14 | import {ITEM_HEIGHT, DELETE_BUTTON_WIDTH} from './styles'; 15 | 16 | const AnimatedFlatList = Animated.createAnimatedComponent(FlatList); 17 | const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity); 18 | 19 | interface SwipeableListProps { 20 | data: any[]; 21 | onDelete: (id: string) => void; 22 | isDeleting?: boolean; 23 | } 24 | 25 | const SwipeableList: React.FC = ({data, onDelete}) => { 26 | const [activeItemIndex, setActiveItemIndex] = useState(-1); 27 | const animatedValue = useRef(new Animated.Value(0)).current; 28 | const swipeOffset = useRef(0); 29 | const scrollOffset = useRef(0); 30 | 31 | const panResponder = useRef( 32 | PanResponder.create({ 33 | onMoveShouldSetPanResponder: (evt, gesture) => { 34 | return Math.abs(gesture.dx) > Math.abs(gesture.dy); 35 | }, 36 | onPanResponderGrant: (evt, gesture) => { 37 | /* 24 is total vertical margin 38 | add scrollOffset to get index of items that need scrolling to be seen */ 39 | const swipedItemIndex = 40 | Math.floor((gesture.y0 + scrollOffset.current) / (ITEM_HEIGHT + 24)) - 41 | 1; 42 | // if user swipes new item, animate the old item to origin position 43 | if (swipedItemIndex !== activeItemIndex) { 44 | swipeOffset.current = 0; 45 | Animated.spring(animatedValue, { 46 | toValue: 0, 47 | useNativeDriver: true, 48 | }).start(() => { 49 | setActiveItemIndex(swipedItemIndex); 50 | }); 51 | } 52 | }, 53 | onPanResponderMove: (evt, gesture) => { 54 | animatedValue.setValue(gesture.dx + swipeOffset.current); 55 | }, 56 | onPanResponderRelease: (evt, gesture) => { 57 | handleGestureRelease(gesture.dx); 58 | }, 59 | }), 60 | ).current; 61 | 62 | const handleGestureRelease = (dx: number) => { 63 | if (animatedValue._value !== 0) { 64 | Animated.timing(animatedValue, { 65 | toValue: dx < -DELETE_BUTTON_WIDTH / 2 ? -DELETE_BUTTON_WIDTH : 0, 66 | easing: Easing.bounce, 67 | duration: 300, 68 | useNativeDriver: true, 69 | }).start(); 70 | swipeOffset.current = 71 | dx < -DELETE_BUTTON_WIDTH / 2 ? -DELETE_BUTTON_WIDTH : 0; 72 | } 73 | }; 74 | 75 | const handleScroll = (event: any) => { 76 | scrollOffset.current = event.nativeEvent.contentOffset.y; 77 | handleGestureRelease(0); 78 | }; 79 | 80 | const handleDeleteItem = (item: any) => { 81 | if (typeof onDelete === 'function') { 82 | onDelete(item); 83 | } 84 | }; 85 | 86 | const swipeAnimation = { 87 | transform: [ 88 | { 89 | translateX: animatedValue.interpolate({ 90 | inputRange: [-DELETE_BUTTON_WIDTH, 0], 91 | outputRange: [-DELETE_BUTTON_WIDTH, 0], 92 | extrapolate: 'clamp', 93 | }), 94 | }, 95 | ], 96 | }; 97 | 98 | const deleteBtnAnimation = { 99 | opacity: animatedValue.interpolate({ 100 | inputRange: [-DELETE_BUTTON_WIDTH, -DELETE_BUTTON_WIDTH / 2, 0], 101 | outputRange: [1, 0.2, 0], 102 | extrapolate: 'clamp', 103 | }), 104 | transform: [ 105 | { 106 | translateX: animatedValue.interpolate({ 107 | inputRange: [-DELETE_BUTTON_WIDTH, 0], 108 | outputRange: [0, DELETE_BUTTON_WIDTH], 109 | extrapolate: 'clamp', 110 | }), 111 | }, 112 | ], 113 | }; 114 | 115 | const renderItem = ({item, index}: {item: any; index: number}) => { 116 | return ( 117 | 118 | 123 | 124 | Lorem ipsum dolor sit amet, consectetur adipisicing elit 125 | 126 | 127 | handleDeleteItem(item)}> 133 | Delete 134 | 135 | 136 | ); 137 | }; 138 | 139 | return ( 140 | 141 | 147 | item.id ? item.id.toString() : index.toString() 148 | } 149 | /> 150 | 151 | ); 152 | }; 153 | 154 | export default () => {}} />; 155 | -------------------------------------------------------------------------------- /src/animations/SwipeableList/styles.js: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | import {WINDOW_WIDTH} from '../../utils'; 4 | 5 | export const ITEM_HEIGHT = 64; 6 | export const DELETE_BUTTON_WIDTH = WINDOW_WIDTH / 3; 7 | 8 | export default StyleSheet.create({ 9 | container: { 10 | flex: 1, 11 | }, 12 | list: { 13 | flex: 1, 14 | }, 15 | itemContainer: { 16 | height: ITEM_HEIGHT, 17 | flexDirection: 'row', 18 | margin: 12, 19 | }, 20 | itemText: { 21 | color: 'white', 22 | }, 23 | itemLeft: { 24 | flex: 1, 25 | justifyContent: 'center', 26 | paddingLeft: 16, 27 | marginRight: 8, 28 | borderRadius: 8, 29 | backgroundColor: 'rgba(0, 0, 0, 0.45)', 30 | }, 31 | itemRight: { 32 | position: 'absolute', 33 | transform: [ 34 | { 35 | translateX: DELETE_BUTTON_WIDTH * 2, 36 | }, 37 | ], 38 | width: DELETE_BUTTON_WIDTH, 39 | height: '100%', 40 | right: 0, 41 | opacity: 0, 42 | justifyContent: 'center', 43 | alignItems: 'center', 44 | borderRadius: 8, 45 | backgroundColor: 'rgba(255, 0, 0, 0.5)', 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /src/animations/TikTokMusicDisc/TikTokMusicDisc.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react'; 2 | import {Animated, StyleSheet, View, Easing} from 'react-native'; 3 | import {getMusicNoteAnim} from './utils'; 4 | 5 | export default function TikTokMusicDisc() { 6 | const discAnimatedValue = useRef(new Animated.Value(0)).current; 7 | const musicNoteAnimatedValue1 = useRef(new Animated.Value(0)).current; 8 | const musicNoteAnimatedValue2 = useRef(new Animated.Value(0)).current; 9 | 10 | const discAnimation = { 11 | transform: [ 12 | { 13 | rotate: discAnimatedValue.interpolate({ 14 | inputRange: [0, 1], 15 | outputRange: ['0deg', '360deg'], 16 | }), 17 | }, 18 | ], 19 | }; 20 | const musicNoteAnimation1 = { 21 | transform: [ 22 | { 23 | translateX: musicNoteAnimatedValue1.interpolate({ 24 | inputRange: [0, 1], 25 | outputRange: [8, -32], 26 | }), 27 | }, 28 | { 29 | translateY: musicNoteAnimatedValue1.interpolate({ 30 | inputRange: [0, 1], 31 | outputRange: [0, -64], 32 | }), 33 | }, 34 | { 35 | rotate: musicNoteAnimatedValue1.interpolate({ 36 | inputRange: [0, 1], 37 | outputRange: ['0deg', '45deg'], 38 | }), 39 | }, 40 | ], 41 | opacity: musicNoteAnimatedValue1.interpolate({ 42 | inputRange: [0, 0.8, 1], 43 | outputRange: [0, 1, 0], 44 | }), 45 | }; 46 | const musicNoteAnimation2 = { 47 | transform: [ 48 | { 49 | translateX: musicNoteAnimatedValue2.interpolate({ 50 | inputRange: [0, 1], 51 | outputRange: [8, -32], 52 | }), 53 | }, 54 | { 55 | translateY: musicNoteAnimatedValue2.interpolate({ 56 | inputRange: [0, 1], 57 | outputRange: [0, -64], 58 | }), 59 | }, 60 | { 61 | rotate: musicNoteAnimatedValue2.interpolate({ 62 | inputRange: [0, 1], 63 | outputRange: ['0deg', '-45deg'], 64 | }), 65 | }, 66 | ], 67 | opacity: musicNoteAnimatedValue2.interpolate({ 68 | inputRange: [0, 0.8, 1], 69 | outputRange: [0, 1, 0], 70 | }), 71 | }; 72 | 73 | useEffect(() => { 74 | Animated.loop( 75 | Animated.timing(discAnimatedValue, { 76 | toValue: 1, 77 | duration: 3000, 78 | easing: Easing.linear, 79 | useNativeDriver: false, 80 | }), 81 | ).start(); 82 | Animated.loop( 83 | Animated.sequence([ 84 | Animated.timing(musicNoteAnimatedValue1, { 85 | toValue: 1, 86 | duration: 2000, 87 | easing: Easing.linear, 88 | useNativeDriver: false, 89 | }), 90 | Animated.timing(musicNoteAnimatedValue2, { 91 | toValue: 1, 92 | duration: 2000, 93 | easing: Easing.linear, 94 | useNativeDriver: false, 95 | }), 96 | ]), 97 | ).start(); 98 | }, [discAnimatedValue, musicNoteAnimatedValue1, musicNoteAnimatedValue2]); 99 | 100 | return ( 101 | 102 | 103 | 107 | 111 | 115 | 116 | 117 | ); 118 | } 119 | 120 | const styles = StyleSheet.create({ 121 | container: { 122 | flex: 1, 123 | justifyContent: 'center', 124 | alignItems: 'center', 125 | }, 126 | musicDisc: { 127 | width: 64, 128 | height: 64, 129 | }, 130 | floatingMusicNote: { 131 | position: 'absolute', 132 | left: 0, 133 | top: 0, 134 | width: 24, 135 | height: 24, 136 | tintColor: '#19b5f3', 137 | }, 138 | }); 139 | -------------------------------------------------------------------------------- /src/animations/Tinder/Tinder.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState} from 'react'; 2 | import { 3 | StyleSheet, 4 | PanResponder, 5 | Animated, 6 | View, 7 | Dimensions, 8 | } from 'react-native'; 9 | import usersData from '../../data/usersData'; 10 | 11 | const {width: windowWidth, height: windowHeight} = Dimensions.get('window'); 12 | 13 | const SwipeDeck = () => { 14 | const swipeRight = () => { 15 | Animated.spring(animatedValue, { 16 | toValue: { 17 | x: windowWidth * 2, 18 | y: 0, 19 | }, 20 | useNativeDriver: false, 21 | }).start(() => { 22 | animatedValue.setValue({x: 0, y: 0}); 23 | setCurrentCardIndex(prevIndex => prevIndex + 1); 24 | }); 25 | }; 26 | 27 | const swipeLeft = () => { 28 | Animated.spring(animatedValue, { 29 | toValue: { 30 | x: -windowWidth * 2, 31 | y: 0, 32 | }, 33 | useNativeDriver: false, 34 | }).start(() => { 35 | animatedValue.setValue({x: 0, y: 0}); 36 | setCurrentCardIndex(prevIndex => prevIndex + 1); 37 | }); 38 | }; 39 | 40 | const resetPosition = () => { 41 | Animated.timing(animatedValue, { 42 | toValue: { 43 | x: 0, 44 | y: 0, 45 | }, 46 | useNativeDriver: false, 47 | }).start(); 48 | }; 49 | 50 | const panResponder = useRef( 51 | PanResponder.create({ 52 | onStartShouldSetPanResponder: () => true, 53 | onPanResponderMove: (event, gesture) => { 54 | animatedValue.setValue({x: gesture.dx, y: gesture.dy}); 55 | }, 56 | onPanResponderRelease: (event, gesture) => { 57 | if (gesture.dx > windowWidth * 0.25) { 58 | swipeRight(); 59 | } else if (gesture.dx < -windowWidth * 0.25) { 60 | swipeLeft(); 61 | } else { 62 | resetPosition(); 63 | } 64 | }, 65 | }), 66 | ).current; 67 | 68 | const animatedValue = useRef(new Animated.ValueXY()).current; 69 | 70 | const [currentCardIndex, setCurrentCardIndex] = useState(0); 71 | 72 | const renderCards = () => { 73 | return usersData 74 | .map((item, index) => { 75 | let cardAnimation = {}; 76 | let likeTextAnimation = {}; 77 | let nopeTextAnimation = {}; 78 | 79 | if (index >= currentCardIndex) { 80 | if (index === currentCardIndex) { 81 | cardAnimation = { 82 | transform: [ 83 | {translateX: animatedValue.x}, 84 | { 85 | translateY: animatedValue.y.interpolate({ 86 | inputRange: [-windowHeight * 0.035, windowHeight * 0.035], 87 | outputRange: [-windowHeight * 0.035, windowHeight * 0.035], 88 | extrapolate: 'clamp', 89 | }), 90 | }, 91 | { 92 | rotate: animatedValue.x.interpolate({ 93 | inputRange: [-windowWidth * 1.5, windowWidth * 1.5], 94 | outputRange: ['-120deg', '120deg'], 95 | }), 96 | }, 97 | ], 98 | }; 99 | 100 | likeTextAnimation = { 101 | opacity: animatedValue.x.interpolate({ 102 | inputRange: [0, windowWidth * 0.25], 103 | outputRange: [0, 1], 104 | }), 105 | }; 106 | 107 | nopeTextAnimation = { 108 | opacity: animatedValue.x.interpolate({ 109 | inputRange: [-windowWidth * 0.25, 0], 110 | outputRange: [1, 0], 111 | }), 112 | }; 113 | } 114 | return ( 115 | 116 | 117 | {index === currentCardIndex && ( 118 | 119 | 121 | LIKE 122 | 123 | 125 | NOPE 126 | 127 | 128 | )} 129 | 130 | ); 131 | } 132 | }) 133 | .reverse(); 134 | }; 135 | 136 | return ( 137 | 138 | {renderCards()} 139 | 140 | ); 141 | }; 142 | 143 | const styles = StyleSheet.create({ 144 | container: { 145 | flex: 1, 146 | justifyContent: 'center', 147 | alignItems: 'center', 148 | }, 149 | card: { 150 | width: '90%', 151 | height: '90%', 152 | position: 'absolute', 153 | }, 154 | image: { 155 | width: '100%', 156 | height: '100%', 157 | borderRadius: 20, 158 | }, 159 | text: { 160 | position: 'absolute', 161 | top: 50, 162 | fontSize: 32, 163 | fontWeight: 'bold', 164 | borderWidth: 1, 165 | borderRadius: 8, 166 | padding: 8, 167 | }, 168 | likeText: { 169 | left: 20, 170 | color: '#32CD32', 171 | borderColor: '#32CD32', 172 | }, 173 | nopeText: { 174 | right: 20, 175 | color: 'red', 176 | borderColor: 'red', 177 | }, 178 | }); 179 | 180 | export default SwipeDeck; 181 | -------------------------------------------------------------------------------- /src/animations/ZingCarousel/ZingCarousel.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | ScrollView, 6 | Image, 7 | StatusBar, 8 | TouchableOpacity, 9 | FlatList, 10 | Animated, 11 | } from 'react-native'; 12 | import {musicData} from '../../data/musicData'; 13 | import {WINDOW_HEIGHT} from '../../utils'; 14 | 15 | const ZingCarousel = () => { 16 | const animatedValue = useRef(new Animated.Value(0)).current; 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | { 32 | return ( 33 | 34 | 35 | 36 | ); 37 | }} 38 | keyExtractor={item => item.image} 39 | onScroll={e => { 40 | animatedValue.setValue(e.nativeEvent.contentOffset.x); 41 | }} 42 | /> 43 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | const styles = StyleSheet.create({ 51 | container: { 52 | flex: 1, 53 | backgroundColor: 'white', 54 | }, 55 | banner: { 56 | width: '100%', 57 | height: 320, 58 | position: 'absolute', 59 | resizeMode: 'cover', 60 | }, 61 | spaceForBanner: { 62 | paddingTop: 320, 63 | }, 64 | scrollViewContent: { 65 | height: WINDOW_HEIGHT * 2, 66 | backgroundColor: '#09172a', 67 | }, 68 | carousel: { 69 | position: 'absolute', 70 | top: 280, 71 | zIndex: 100, 72 | }, 73 | carouselItem: { 74 | width: 80, 75 | height: 80, 76 | marginRight: 8, 77 | justifyContent: 'center', 78 | alignItems: 'center', 79 | }, 80 | carouselItemImage: { 81 | borderRadius: 60, 82 | width: 80, 83 | height: 80, 84 | }, 85 | }); 86 | export default ZingCarousel; 87 | -------------------------------------------------------------------------------- /src/animations/ZoomableImage/ZoomableImage.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef} from 'react'; 2 | import {Animated, View, PanResponder, StyleSheet} from 'react-native'; 3 | import type {ImageSourcePropType} from 'react-native'; 4 | 5 | import {WINDOW_HEIGHT, WINDOW_WIDTH} from '../../utils'; 6 | 7 | interface Point { 8 | x: number; 9 | y: number; 10 | } 11 | 12 | interface ZoomableImageProps { 13 | uri: ImageSourcePropType; 14 | width: number; 15 | height: number; 16 | cropWidth: number; 17 | cropHeight: number; 18 | } 19 | 20 | const calcDistance = (pointA: Point, pointB: Point) => { 21 | return Math.sqrt( 22 | Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2), 23 | ); 24 | }; 25 | 26 | // const calcCenterPoint = (pointA: Point, pointB: Point) => { 27 | // return { 28 | // x: (pointA.x + pointB.x) / 2, 29 | // y: (pointA.y + pointB.y) / 2, 30 | // }; 31 | // }; 32 | 33 | const ZoomableImage: React.FC = ({ 34 | uri, 35 | width: imageWidth, 36 | height: imageHeight, 37 | cropWidth, 38 | cropHeight, 39 | }) => { 40 | /** 41 | * prevScale, offsetX, offsetY: for keeping track of values from previous gesture 42 | * so it won't jump back to original value when start new gesture 43 | */ 44 | const animatedScale = useRef(new Animated.Value(1)).current; 45 | const prevScale = useRef(1); 46 | const initialDistance = useRef(0); 47 | const isPinching = useRef(false); 48 | 49 | const animatedTranslateX = useRef(new Animated.Value(0)).current; 50 | const animatedTranslateY = useRef(new Animated.Value(0)).current; 51 | const offsetX = useRef(0); 52 | const offsetY = useRef(0); 53 | 54 | const calcHiddenArea = (axis: 'x' | 'y', scale: number) => { 55 | return axis === 'x' 56 | ? (imageWidth * scale - cropWidth) / 2 57 | : (imageHeight * scale - cropHeight) / 2; 58 | }; 59 | 60 | const panResponder = useRef( 61 | PanResponder.create({ 62 | onStartShouldSetPanResponder: () => true, 63 | onPanResponderMove: (evt, gesture) => { 64 | const { 65 | nativeEvent: {touches}, 66 | } = evt; 67 | if (touches.length === 2) { 68 | /* PINCHING */ 69 | const pointA = {x: touches[0].pageX, y: touches[0].pageY}; 70 | const pointB = {x: touches[1].pageX, y: touches[1].pageY}; 71 | 72 | if (!isPinching.current) { 73 | isPinching.current = true; 74 | /* Get the distance between 2 finger tips when start pinch gesture */ 75 | initialDistance.current = calcDistance(pointA, pointB); 76 | } else { 77 | const distance = calcDistance(pointA, pointB); 78 | /** 79 | * Scale's calculated base on the distance between 2 fingers while pinching 80 | * divided by the initial distance. 81 | */ 82 | let scale = 83 | (distance / initialDistance.current) * prevScale.current; 84 | if (scale > 5) { 85 | scale = 5; 86 | } else if (scale < 1) { 87 | scale = 1; 88 | } 89 | animatedScale.setValue(scale); 90 | } 91 | } else if (touches.length === 1 && !isPinching.current) { 92 | /* DRAGGING */ 93 | const currentScale = animatedScale._value; 94 | /* Size of the hidden area when image is zoomed in */ 95 | const maximumX = calcHiddenArea('x', currentScale); 96 | const maximumY = calcHiddenArea('y', currentScale); 97 | /* Total drag distance on X & Y axis */ 98 | const dx = Math.abs((gesture.dx + offsetX.current) * currentScale); 99 | const dy = Math.abs((gesture.dy + offsetY.current) * currentScale); 100 | /** 101 | * When the dragging distance >= size of the hidden area 102 | * meaning the hidden area can now be seen, stop dragging 103 | */ 104 | if (maximumX > 0 && dx < maximumX) { 105 | animatedTranslateX.setValue(gesture.dx + offsetX.current); 106 | } 107 | if (maximumY > 0 && dy < maximumY) { 108 | animatedTranslateY.setValue(gesture.dy + offsetY.current); 109 | } 110 | } 111 | }, 112 | onPanResponderRelease: () => { 113 | const currentScale = animatedScale._value; 114 | if (isPinching.current) { 115 | /** 116 | * If user zooms in -> drags to the corner -> zooms out 117 | * there'll be a blank space so we must spring the image back 118 | * to the corner to remove that space 119 | */ 120 | const hiddenAreaX = calcHiddenArea('x', currentScale); 121 | const hiddenAreaY = calcHiddenArea('y', currentScale); 122 | const dx = Math.abs(animatedTranslateX._value * currentScale); 123 | const dy = Math.abs(animatedTranslateY._value * currentScale); 124 | 125 | if (dx > hiddenAreaX) { 126 | const leftEdge = hiddenAreaX / currentScale; 127 | const toValue = 128 | animatedTranslateX._value > 0 ? leftEdge : -leftEdge; 129 | Animated.spring(animatedTranslateX, { 130 | toValue, 131 | useNativeDriver: true, 132 | }).start(() => animatedTranslateX.setValue(toValue)); 133 | } 134 | if (dy > hiddenAreaY) { 135 | Animated.spring(animatedTranslateY, { 136 | toValue: 0, 137 | useNativeDriver: true, 138 | }).start(() => animatedTranslateY.setValue(0)); 139 | } 140 | } 141 | prevScale.current = currentScale; 142 | offsetX.current = animatedTranslateX._value; 143 | offsetY.current = animatedTranslateY._value; 144 | isPinching.current = false; 145 | }, 146 | }), 147 | ).current; 148 | 149 | const imageAnimation = { 150 | transform: [ 151 | {scale: animatedScale}, 152 | {translateX: animatedTranslateX}, 153 | {translateY: animatedTranslateY}, 154 | ], 155 | }; 156 | 157 | return ( 158 | 159 | 168 | 169 | ); 170 | }; 171 | 172 | export default () => ( 173 | 174 | 181 | 182 | ); 183 | 184 | const styles = StyleSheet.create({ 185 | zoomableImageContainer: { 186 | flex: 1, 187 | justifyContent: 'center', 188 | alignItems: 'center', 189 | }, 190 | container: { 191 | justifyContent: 'center', 192 | alignItems: 'center', 193 | backgroundColor: 'black', 194 | }, 195 | image: { 196 | resizeMode: 'stretch', 197 | backgroundColor: '#bdbdbd', 198 | }, 199 | }); 200 | -------------------------------------------------------------------------------- /src/data/dummyData.ts: -------------------------------------------------------------------------------- 1 | export interface Dummy { 2 | id: number; 3 | } 4 | 5 | const dummyData: Dummy[] = []; 6 | 7 | for (let i = 0; i < 50; i++) { 8 | dummyData.push({ 9 | id: i 10 | }); 11 | } 12 | 13 | export default dummyData; 14 | -------------------------------------------------------------------------------- /src/data/menuData.ts: -------------------------------------------------------------------------------- 1 | export const menu1Data = [ 2 | { 3 | id: '0', 4 | name: '2 pc Chickenjoy', 5 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 6 | price: 5, 7 | image: require('../images/food-app/food1.png'), 8 | }, 9 | { 10 | id: '1', 11 | name: '1 pc Chickenjoy with Rice', 12 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 13 | price: 10, 14 | image: require('../images/food-app/food2.png'), 15 | }, 16 | { 17 | id: '2', 18 | name: '4 pc Chickenjoy', 19 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 20 | price: 10, 21 | image: require('../images/food-app/food3.png'), 22 | }, 23 | { 24 | id: '3', 25 | name: '2 Spicy Chickenjoy', 26 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 27 | price: 10, 28 | image: require('../images/food-app/food4.png'), 29 | }, 30 | ]; 31 | 32 | export const menu2Data = [ 33 | { 34 | id: '0', 35 | name: '1 pc Spicy Chicken Breast', 36 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 37 | price: 10, 38 | image: require('../images/food-app/food5.png'), 39 | }, 40 | { 41 | id: '1', 42 | name: '3 pc Chicken Tenders', 43 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 44 | price: 10, 45 | image: require('../images/food-app/food6.png'), 46 | }, 47 | { 48 | id: '2', 49 | name: '1 pc Chicken Breast with Rice', 50 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 51 | price: 10, 52 | image: require('../images/food-app/food7.jpeg'), 53 | }, 54 | { 55 | id: '3', 56 | name: '2 pc Spicy Chickenjoy', 57 | description: 'Our signature Chickenjoy fried chicken served with 1 side', 58 | price: 10, 59 | image: require('../images/food-app/food8.png'), 60 | }, 61 | ]; 62 | 63 | export const menu3Data = [ 64 | { 65 | id: '0', 66 | name: 'Purple Cake', 67 | description: 'Sweet and sour purple cacke', 68 | price: 10, 69 | image: require('../images/food-app/food9.png'), 70 | }, 71 | { 72 | id: '1', 73 | name: 'Peach Mango Pie', 74 | description: 'Sweet and flaky Peach Mango Pie', 75 | price: 10, 76 | image: require('../images/food-app/food10.png'), 77 | }, 78 | { 79 | id: '2', 80 | name: 'Chocolate Ice Cream', 81 | description: 'Sweet and cold', 82 | price: 10, 83 | image: require('../images/food-app/food11.png'), 84 | }, 85 | ]; 86 | -------------------------------------------------------------------------------- /src/data/musicData.ts: -------------------------------------------------------------------------------- 1 | export const musicData = [ 2 | { 3 | id: '0', 4 | image: require('../images/zing/1.png'), 5 | bannerImage: require('../images/zing/1banner.jpeg'), 6 | }, 7 | { 8 | id: '1', 9 | image: require('../images/zing/2.png'), 10 | bannerImage: require('../images/zing/2banner.jpeg'), 11 | }, 12 | { 13 | id: '2', 14 | image: require('../images/zing/3.png'), 15 | bannerImage: require('../images/zing/3banner.jpeg'), 16 | }, 17 | { 18 | id: '3', 19 | image: require('../images/zing/4.png'), 20 | bannerImage: require('../images/zing/4banner.jpeg'), 21 | }, 22 | { 23 | id: '4', 24 | image: require('../images/zing/5.png'), 25 | bannerImage: require('../images/zing/5banner.jpeg'), 26 | }, 27 | { 28 | id: '5', 29 | image: require('../images/zing/6.png'), 30 | bannerImage: require('../images/zing/6banner.jpeg'), 31 | }, 32 | ]; 33 | -------------------------------------------------------------------------------- /src/data/usersData.ts: -------------------------------------------------------------------------------- 1 | export interface UserModel { 2 | id: number; 3 | avatar: string; 4 | } 5 | 6 | export default [ 7 | { 8 | id: 0, 9 | avatar: require('../images/users/girl1.jpeg'), 10 | }, 11 | { 12 | id: 1, 13 | avatar: require('../images/users/girl2.jpeg'), 14 | }, 15 | { 16 | id: 2, 17 | avatar: require('../images/users/girl3.jpeg'), 18 | }, 19 | { 20 | id: 3, 21 | avatar: require('../images/users/girl4.jpeg'), 22 | }, 23 | { 24 | id: 4, 25 | avatar: require('../images/users/girl5.jpeg'), 26 | }, 27 | ]; 28 | -------------------------------------------------------------------------------- /src/data/videosData.ts: -------------------------------------------------------------------------------- 1 | export interface VideoModel { 2 | id: number; 3 | channelName: string; 4 | uri: string; 5 | caption: string; 6 | musicName: string; 7 | likes: number; 8 | comments: number; 9 | avatarUri: string; 10 | } 11 | 12 | export default [ 13 | { 14 | id: 1, 15 | channelName: 'cutedog', 16 | uri: 'https://v.pinimg.com/videos/mc/720p/f6/88/88/f68888290d70aca3cbd4ad9cd3aa732f.mp4', 17 | caption: 'Cute dog shaking hands #cute #puppy', 18 | musicName: 'Song #1', 19 | likes: 4321, 20 | comments: 2841, 21 | avatarUri: 'https://wallpaperaccess.com/full/1669289.jpg', 22 | }, 23 | { 24 | id: 2, 25 | channelName: 'meow', 26 | uri: 'https://v.pinimg.com/videos/mc/720p/11/05/2c/11052c35282355459147eabe31cf3c75.mp4', 27 | caption: 'Doggies eating candy #cute #puppy', 28 | musicName: 'Song #2', 29 | likes: 2411, 30 | comments: 1222, 31 | avatarUri: 'https://wallpaperaccess.com/thumb/266770.jpg', 32 | }, 33 | { 34 | id: 3, 35 | channelName: 'yummy', 36 | uri: 'https://v.pinimg.com/videos/mc/720p/c9/22/d8/c922d8391146cc2fdbeb367e8da0d61f.mp4', 37 | caption: 'Brown little puppy #cute #puppy', 38 | musicName: 'Song #3', 39 | likes: 3100, 40 | comments: 801, 41 | avatarUri: 'https://wallpaperaccess.com/thumb/384178.jpg', 42 | }, 43 | ]; 44 | -------------------------------------------------------------------------------- /src/images/facebook-emojis/haha.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/haha.gif -------------------------------------------------------------------------------- /src/images/facebook-emojis/like.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/like.gif -------------------------------------------------------------------------------- /src/images/facebook-emojis/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/like.png -------------------------------------------------------------------------------- /src/images/facebook-emojis/love.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/love.gif -------------------------------------------------------------------------------- /src/images/facebook-emojis/sad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/sad.gif -------------------------------------------------------------------------------- /src/images/facebook-emojis/wow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/facebook-emojis/wow.gif -------------------------------------------------------------------------------- /src/images/food-app/food1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food1.png -------------------------------------------------------------------------------- /src/images/food-app/food10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food10.png -------------------------------------------------------------------------------- /src/images/food-app/food11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food11.png -------------------------------------------------------------------------------- /src/images/food-app/food2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food2.png -------------------------------------------------------------------------------- /src/images/food-app/food3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food3.png -------------------------------------------------------------------------------- /src/images/food-app/food4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food4.png -------------------------------------------------------------------------------- /src/images/food-app/food5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food5.png -------------------------------------------------------------------------------- /src/images/food-app/food6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food6.png -------------------------------------------------------------------------------- /src/images/food-app/food7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food7.jpeg -------------------------------------------------------------------------------- /src/images/food-app/food8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food8.png -------------------------------------------------------------------------------- /src/images/food-app/food9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/food9.png -------------------------------------------------------------------------------- /src/images/food-app/foodBanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/foodBanner.png -------------------------------------------------------------------------------- /src/images/food-app/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/left-arrow.png -------------------------------------------------------------------------------- /src/images/food-app/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/food-app/search.png -------------------------------------------------------------------------------- /src/images/heart-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/heart-outline.png -------------------------------------------------------------------------------- /src/images/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/heart.png -------------------------------------------------------------------------------- /src/images/messenger/action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/action.png -------------------------------------------------------------------------------- /src/images/messenger/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/camera.png -------------------------------------------------------------------------------- /src/images/messenger/caret-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/caret-right.png -------------------------------------------------------------------------------- /src/images/messenger/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/gallery.png -------------------------------------------------------------------------------- /src/images/messenger/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/like.png -------------------------------------------------------------------------------- /src/images/messenger/send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/send.png -------------------------------------------------------------------------------- /src/images/messenger/voice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/messenger/voice.png -------------------------------------------------------------------------------- /src/images/minh-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/minh-banner.png -------------------------------------------------------------------------------- /src/images/minh-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/minh-logo.png -------------------------------------------------------------------------------- /src/images/momo/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/avatar.png -------------------------------------------------------------------------------- /src/images/momo/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/bell.png -------------------------------------------------------------------------------- /src/images/momo/deposit-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/deposit-circle.png -------------------------------------------------------------------------------- /src/images/momo/deposit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/deposit.png -------------------------------------------------------------------------------- /src/images/momo/qr-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/qr-circle.png -------------------------------------------------------------------------------- /src/images/momo/qr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/qr.png -------------------------------------------------------------------------------- /src/images/momo/scan-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/scan-circle.png -------------------------------------------------------------------------------- /src/images/momo/scan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/scan.png -------------------------------------------------------------------------------- /src/images/momo/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/search.png -------------------------------------------------------------------------------- /src/images/momo/withdraw-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/withdraw-circle.png -------------------------------------------------------------------------------- /src/images/momo/withdraw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/momo/withdraw.png -------------------------------------------------------------------------------- /src/images/music-note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/music-note.png -------------------------------------------------------------------------------- /src/images/pick-phone/iphone_11_pro_max_gold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/pick-phone/iphone_11_pro_max_gold.png -------------------------------------------------------------------------------- /src/images/pick-phone/iphone_11_pro_max_midnight_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/pick-phone/iphone_11_pro_max_midnight_green.png -------------------------------------------------------------------------------- /src/images/pick-phone/iphone_11_pro_max_silver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/pick-phone/iphone_11_pro_max_silver.png -------------------------------------------------------------------------------- /src/images/pick-phone/iphone_11_pro_max_space_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/pick-phone/iphone_11_pro_max_space_gray.png -------------------------------------------------------------------------------- /src/images/users/girl0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl0.jpg -------------------------------------------------------------------------------- /src/images/users/girl1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl1.jpeg -------------------------------------------------------------------------------- /src/images/users/girl2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl2.jpeg -------------------------------------------------------------------------------- /src/images/users/girl3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl3.jpeg -------------------------------------------------------------------------------- /src/images/users/girl4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl4.jpeg -------------------------------------------------------------------------------- /src/images/users/girl5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/users/girl5.jpeg -------------------------------------------------------------------------------- /src/images/zing/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/1.png -------------------------------------------------------------------------------- /src/images/zing/1banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/1banner.jpeg -------------------------------------------------------------------------------- /src/images/zing/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/2.png -------------------------------------------------------------------------------- /src/images/zing/2banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/2banner.jpeg -------------------------------------------------------------------------------- /src/images/zing/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/3.png -------------------------------------------------------------------------------- /src/images/zing/3banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/3banner.jpeg -------------------------------------------------------------------------------- /src/images/zing/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/4.png -------------------------------------------------------------------------------- /src/images/zing/4banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/4banner.jpeg -------------------------------------------------------------------------------- /src/images/zing/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/5.png -------------------------------------------------------------------------------- /src/images/zing/5banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/5banner.jpeg -------------------------------------------------------------------------------- /src/images/zing/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/6.png -------------------------------------------------------------------------------- /src/images/zing/6banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zing/6banner.jpeg -------------------------------------------------------------------------------- /src/images/zoomable-image/avengers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/minhtechie/react-native-animations/8b71dde2570657a7dbe1ccd57773594cdbc65a02/src/images/zoomable-image/avengers.jpg -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import {Dimensions} from 'react-native'; 2 | 3 | export const {width: WINDOW_WIDTH, height: WINDOW_HEIGHT} = 4 | Dimensions.get('window'); 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "compilerOptions": { 4 | /* Basic Options */ 5 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | "lib": ["es2017"], /* Specify library files to be included in the compilation. */ 8 | "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | // "outDir": "./", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "removeComments": true, /* Do not emit comments to output. */ 17 | "noEmit": true, /* Do not emit outputs. */ 18 | // "incremental": true, /* Enable incremental compilation */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | 38 | /* Module Resolution Options */ 39 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 40 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 41 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 42 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 43 | // "typeRoots": [], /* List of folders to include type definitions from. */ 44 | // "types": [], /* Type declaration files to be included in compilation. */ 45 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 46 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 47 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 48 | "skipLibCheck": false, /* Skip type checking of declaration files. */ 49 | "resolveJsonModule": true /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */ 50 | 51 | /* Source Map Options */ 52 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 53 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 54 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 55 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 56 | 57 | /* Experimental Options */ 58 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 59 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 60 | }, 61 | "exclude": [ 62 | "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" 63 | ] 64 | } 65 | --------------------------------------------------------------------------------