├── .buckconfig ├── .editorconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── Gemfile ├── README.md ├── __tests__ └── App-test.tsx ├── _bundle └── config ├── _node-version ├── _ruby-version ├── android ├── app │ ├── build.gradle │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── reactnativeanimations │ │ │ └── ReactNativeFlipper.java │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ │ └── index.android.bundle │ │ ├── java │ │ │ └── com │ │ │ │ └── reactnativeanimations │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ └── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── drawable-mdpi │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backiconmask.png │ │ │ ├── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backiconmask.png │ │ │ ├── src_addtocart_productimg.jpeg │ │ │ ├── src_bkashpayment_bkashlogo.png │ │ │ ├── src_pizzaslider_images_pizza1.png │ │ │ ├── src_pizzaslider_images_pizza2.png │ │ │ ├── src_pizzaslider_images_pizza3.png │ │ │ ├── src_pizzaslider_images_pizza4.png │ │ │ ├── src_sharedelementtransitions_addtocart_images_cheeseburger.png │ │ │ ├── src_sharedelementtransitions_addtocart_images_hotsoup.png │ │ │ └── src_sharedelementtransitions_addtocart_images_salad.png │ │ │ ├── drawable-xhdpi │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ └── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ └── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── drawable-xxxhdpi │ │ │ ├── node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ └── node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ │ └── release │ │ └── java │ │ └── com │ │ └── reactnativeanimations │ │ └── ReactNativeFlipper.java ├── 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 ├── .xcode.env ├── Podfile ├── Podfile.lock ├── ReactNativeAnimations.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── ReactNativeAnimations.xcscheme ├── ReactNativeAnimations.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── ReactNativeAnimations │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m ├── ReactNativeAnimationsTests │ ├── Info.plist │ └── ReactNativeAnimationsTests.m └── _xcode.env ├── metro.config.js ├── package.json ├── src ├── HomeScreen.js ├── SwipeSlider │ ├── Button.js │ ├── Card.js │ ├── Cart.js │ ├── GestureContainer.js │ ├── images │ │ ├── pizza-2.png │ │ ├── pizza1.png │ │ ├── pizza2.png │ │ ├── pizza3.png │ │ └── pizza4.png │ └── index.js ├── TwitterLike │ ├── TweetActionButtons.js │ ├── header.js │ ├── index.js │ ├── like.json │ └── tweet.js ├── addToCart │ ├── index.js │ ├── productImg.jpeg │ └── productPage.js ├── bKashPayment │ ├── bKash-logo.png │ ├── index.js │ ├── tapToPay.js │ └── userCard.js ├── chatDelete │ ├── chat.js │ ├── deleteIcon.js │ ├── index.js │ └── swipable.js ├── googleCalendar │ └── index.js ├── pullToRefresh │ ├── card.js │ ├── circlesRotate.json │ ├── index.js │ └── tabBar.js ├── sharedElementTransitions │ └── addToCart │ │ ├── ProductDetails.js │ │ ├── ProductPage.js │ │ ├── components │ │ ├── Cart.js │ │ ├── CartItems.js │ │ ├── Categories.js │ │ ├── FakeCartItems.js │ │ ├── FakeImage.js │ │ └── ProductList.js │ │ ├── context │ │ └── CartProvider.js │ │ ├── images │ │ ├── cheeseburger.png │ │ ├── hot-soup.png │ │ └── salad.png │ │ └── index.js ├── slider │ ├── backgrounImage.js │ ├── dots.js │ └── slider.js ├── swipeToDelete │ ├── card.js │ ├── header.js │ ├── index.js │ ├── swipable.js │ └── textAvatar.js ├── whatsAppSearch │ └── index.js └── youtube │ ├── header.js │ ├── index.js │ ├── tabBar.js │ ├── tabs.js │ ├── videoCard.js │ ├── youtube.js │ └── youtubePlayer.js ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Windows files 2 | [*.bat] 3 | end_of_line = crlf 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; Flow doesn't support platforms 12 | .*/Libraries/Utilities/LoadingView.js 13 | 14 | [untyped] 15 | .*/node_modules/@react-native-community/cli/.*/.* 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/interface.js 21 | node_modules/react-native/flow/ 22 | 23 | [options] 24 | emoji=true 25 | 26 | exact_by_default=true 27 | 28 | format.bracket_spacing=false 29 | 30 | module.file_ext=.js 31 | module.file_ext=.json 32 | module.file_ext=.ios.js 33 | 34 | munge_underscores=true 35 | 36 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 37 | module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 38 | 39 | suppress_type=$FlowIssue 40 | suppress_type=$FlowFixMe 41 | suppress_type=$FlowFixMeProps 42 | suppress_type=$FlowFixMeState 43 | 44 | [lints] 45 | sketchy-null-number=warn 46 | sketchy-null-mixed=warn 47 | sketchy-number=warn 48 | untyped-type-import=warn 49 | nonstrict-import=warn 50 | deprecated-type=warn 51 | unsafe-getters-setters=warn 52 | unnecessary-invariant=warn 53 | signature-verification-failure=warn 54 | 55 | [strict] 56 | deprecated-type 57 | nonstrict-import 58 | sketchy-null 59 | unclear-type 60 | unsafe-getters-setters 61 | untyped-import 62 | untyped-type-import 63 | 64 | [version] 65 | ^0.158.0 66 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Windows files should use crlf line endings 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | *.hprof 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | !debug.keystore 44 | 45 | # fastlane 46 | # 47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 48 | # screenshots whenever they are needed. 49 | # For more information about the recommended setup visit: 50 | # https://docs.fastlane.tools/best-practices/source-control/ 51 | 52 | */fastlane/report.xml 53 | */fastlane/Preview.html 54 | */fastlane/screenshots 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # CocoaPods 60 | /ios/Pods/ 61 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | import React from 'react'; 9 | import {Platform, StyleSheet} from 'react-native'; 10 | 11 | import TwitterLikeAnimation from './src/TwitterLike'; 12 | import Slider from './src/slider/slider'; 13 | import AddToCart from './src/addToCart'; 14 | import BkashPayment from './src/bKashPayment'; 15 | import DeleteChat from './src/chatDelete'; 16 | import GoogleCalendar from './src/googleCalendar'; 17 | import PullToRefresh from './src/pullToRefresh'; 18 | import SwipeToDelete from './src/swipeToDelete'; 19 | import WhatsappHeader from './src/whatsAppSearch'; 20 | import Youtube from './src/youtube'; 21 | import ProductPage from './src/addToCart/productPage'; 22 | import {NavigationContainer} from '@react-navigation/native'; 23 | // import { 24 | // createNativeStackNavigator, 25 | // TransitionPresets, 26 | // } from '@react-navigation/native-stack'; 27 | 28 | import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; 29 | 30 | import HomeScreen from './src/HomeScreen'; 31 | import SharedElementExample from './src/sharedElementTransitions/addToCart'; 32 | import SwipeSlider from './src/SwipeSlider'; 33 | 34 | const IS_IOS = Platform.OS === 'ios'; 35 | const screenOptions = IS_IOS 36 | ? {} 37 | : { 38 | ...TransitionPresets.SlideFromRightIOS, 39 | }; 40 | 41 | const Stack = createStackNavigator(); 42 | 43 | const App = () => { 44 | return ( 45 | <> 46 | 47 | 51 | 52 | 53 | 58 | 63 | 68 | 69 | 74 | 75 | 76 | 77 | 82 | 87 | 88 | 89 | 90 | 91 | ); 92 | }; 93 | 94 | const styles = StyleSheet.create({ 95 | menuItem: { 96 | padding: 20, 97 | borderBottomWidth: 1, 98 | borderBottomColor: '#dcdcdc', 99 | flexDirection: 'row', 100 | alignItems: 'center', 101 | }, 102 | menuItemIcon: { 103 | fontSize: 24, 104 | fontWeight: 'bold', 105 | color: '#000', 106 | marginRight: 20, 107 | }, 108 | menuItemName: { 109 | fontSize: 20, 110 | fontWeight: 'bold', 111 | color: '#000', 112 | }, 113 | }); 114 | 115 | export default App; 116 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby File.read(File.join(__dir__, '.ruby-version')).strip 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.3' 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Native-Animations 2 | 3 | React Native Animations is a collection of animations built using React Native 4 | 5 | | SL | Animation Name | Demo URL | 6 | | :--- | :----: | ---: | 7 | | 1 | Youtube Player | [link](https://www.youtube.com/shorts/j4ecNSpfLZs) | 8 | | 2 | Pull to Refresh | [link](https://www.youtube.com/shorts/i_V9RQdYEWU) | 9 | | 3 | Delete Chat | [link](https://www.youtube.com/shorts/y2IlplGbu-Y) | 10 | | 4 | Add to Cart | [link](https://www.youtube.com/shorts/Zj8YP7nUtuU) | 11 | | 5 | whatsapp search | link | 12 | | 6 | Gmail Swipe to delete | [link](https://www.youtube.com/shorts/rT3Tf1021vM) | 13 | | 7 | Twitter Like | [link](https://www.youtube.com/shorts/gjePIVVdKYU) | 14 | | 8 | Slider | link | 15 | | 9 | Shared Element Transition with Add to cart| [link](https://www.youtube.com/shorts/JK-tBDjePaM) | 16 | -------------------------------------------------------------------------------- /__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 | -------------------------------------------------------------------------------- /_bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /_node-version: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /_ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.6 2 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | import com.android.build.OutputFile 5 | 6 | apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 7 | 8 | /** 9 | * This is the configuration block to customize your React Native Android app. 10 | * By default you don't need to apply any configuration, just uncomment the lines you need. 11 | */ 12 | react { 13 | /* Folders */ 14 | // The root of your project, i.e. where "package.json" lives. Default is '..' 15 | // root = file("../") 16 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 17 | // reactNativeDir = file("../node_modules/react-native") 18 | // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen 19 | // codegenDir = file("../node_modules/react-native-codegen") 20 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 21 | // cliFile = file("../node_modules/react-native/cli.js") 22 | 23 | /* Variants */ 24 | // The list of variants to that are debuggable. For those we're going to 25 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 26 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 27 | // debuggableVariants = ["liteDebug", "prodDebug"] 28 | 29 | /* Bundling */ 30 | // A list containing the node command and its flags. Default is just 'node'. 31 | // nodeExecutableAndArgs = ["node"] 32 | // 33 | // The command to run when bundling. By default is 'bundle' 34 | // bundleCommand = "ram-bundle" 35 | // 36 | // The path to the CLI configuration file. Default is empty. 37 | // bundleConfig = file(../rn-cli.config.js) 38 | // 39 | // The name of the generated asset file containing your JS bundle 40 | // bundleAssetName = "MyApplication.android.bundle" 41 | // 42 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 43 | // entryFile = file("../js/MyApplication.android.js") 44 | // 45 | // A list of extra flags to pass to the 'bundle' commands. 46 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 47 | // extraPackagerArgs = [] 48 | 49 | /* Hermes Commands */ 50 | // The hermes compiler command to run. By default it is 'hermesc' 51 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 52 | // 53 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 54 | // hermesFlags = ["-O", "-output-source-map"] 55 | } 56 | 57 | /** 58 | * Set this to true to create four separate APKs instead of one, 59 | * one for each native architecture. This is useful if you don't 60 | * use App Bundles (https://developer.android.com/guide/app-bundle/) 61 | * and want to have separate APKs to upload to the Play Store. 62 | */ 63 | def enableSeparateBuildPerCPUArchitecture = false 64 | 65 | /** 66 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 67 | */ 68 | def enableProguardInReleaseBuilds = false 69 | 70 | /** 71 | * The preferred build flavor of JavaScriptCore (JSC) 72 | * 73 | * For example, to use the international variant, you can use: 74 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 75 | * 76 | * The international variant includes ICU i18n library and necessary data 77 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 78 | * give correct results when using with locales other than en-US. Note that 79 | * this variant is about 6MiB larger per architecture than default. 80 | */ 81 | def jscFlavor = 'org.webkit:android-jsc:+' 82 | 83 | /** 84 | * Private function to get the list of Native Architectures you want to build. 85 | * This reads the value from reactNativeArchitectures in your gradle.properties 86 | * file and works together with the --active-arch-only flag of react-native run-android. 87 | */ 88 | def reactNativeArchitectures() { 89 | def value = project.getProperties().get("reactNativeArchitectures") 90 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 91 | } 92 | 93 | android { 94 | ndkVersion rootProject.ext.ndkVersion 95 | 96 | compileSdkVersion rootProject.ext.compileSdkVersion 97 | 98 | namespace "com.reactnativeanimations" 99 | defaultConfig { 100 | applicationId "com.reactnativeanimations" 101 | minSdkVersion rootProject.ext.minSdkVersion 102 | targetSdkVersion rootProject.ext.targetSdkVersion 103 | versionCode 1 104 | versionName "1.0" 105 | } 106 | 107 | splits { 108 | abi { 109 | reset() 110 | enable enableSeparateBuildPerCPUArchitecture 111 | universalApk false // If true, also generate a universal APK 112 | include (*reactNativeArchitectures()) 113 | } 114 | } 115 | signingConfigs { 116 | debug { 117 | storeFile file('debug.keystore') 118 | storePassword 'android' 119 | keyAlias 'androiddebugkey' 120 | keyPassword 'android' 121 | } 122 | } 123 | buildTypes { 124 | debug { 125 | signingConfig signingConfigs.debug 126 | } 127 | release { 128 | // Caution! In production, you need to generate your own keystore file. 129 | // see https://reactnative.dev/docs/signed-apk-android. 130 | signingConfig signingConfigs.debug 131 | minifyEnabled enableProguardInReleaseBuilds 132 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 133 | } 134 | } 135 | 136 | // applicationVariants are e.g. debug, release 137 | applicationVariants.all { variant -> 138 | variant.outputs.each { output -> 139 | // For each separate APK per architecture, set a unique version code as described here: 140 | // https://developer.android.com/studio/build/configure-apk-splits.html 141 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 142 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 143 | def abi = output.getFilter(OutputFile.ABI) 144 | if (abi != null) { // null for the universal-debug, universal-release variants 145 | output.versionCodeOverride = 146 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 147 | } 148 | 149 | } 150 | } 151 | } 152 | 153 | dependencies { 154 | // The version of react-native is set by the React Native Gradle Plugin 155 | implementation("com.facebook.react:react-android") 156 | 157 | implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") 158 | 159 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 160 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 161 | exclude group:'com.squareup.okhttp3', module:'okhttp' 162 | } 163 | 164 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 165 | if (hermesEnabled.toBoolean()) { 166 | implementation("com.facebook.react:hermes-android") 167 | } else { 168 | implementation jscFlavor 169 | } 170 | } 171 | 172 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 173 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/reactnativeanimations/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.reactnativeanimations; 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.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 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 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/reactnativeanimations/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.reactnativeanimations; 2 | 3 | import android.os.Bundle; 4 | import com.facebook.react.ReactActivity; 5 | import com.facebook.react.ReactActivityDelegate; 6 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 7 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 8 | 9 | 10 | public class MainActivity extends ReactActivity { 11 | 12 | /** 13 | * Returns the name of the main component registered from JavaScript. This is used to schedule 14 | * rendering of the component. 15 | */ 16 | @Override 17 | protected String getMainComponentName() { 18 | return "ReactNativeAnimations"; 19 | } 20 | 21 | @Override 22 | protected void onCreate(Bundle savedInstanceState) { 23 | super.onCreate(null); 24 | } 25 | 26 | /** 27 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 28 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 29 | * (aka React 18) with two boolean flags. 30 | */ 31 | @Override 32 | protected ReactActivityDelegate createReactActivityDelegate() { 33 | return new DefaultReactActivityDelegate( 34 | this, 35 | getMainComponentName(), 36 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 37 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled 38 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). 39 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/reactnativeanimations/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.reactnativeanimations; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-hdpi/node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-hdpi/node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-hdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-hdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_elements_src_assets_backiconmask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_elements_src_assets_backiconmask.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backiconmask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backiconmask.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_addtocart_productimg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_addtocart_productimg.jpeg -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_bkashpayment_bkashlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_bkashpayment_bkashlogo.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza1.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza2.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza3.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_pizzaslider_images_pizza4.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_cheeseburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_cheeseburger.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_hotsoup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_hotsoup.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_salad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-mdpi/src_sharedelementtransitions_addtocart_images_salad.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigation_nativestack_node_modules_reactnavigation_elements_src_assets_backicon.png -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/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/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactNativeAnimations 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/app/src/release/java/com/reactnativeanimations/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.reactnativeanimations; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /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 = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle:7.3.1") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/redwanul10/React-Native-Animations/b42d00eb45905f03d88d07fc4025d8eb1f7817a8/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ReactNativeAnimations' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeAnimations", 3 | "displayName": "ReactNativeAnimations" 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 | // https://dribbble.com/shots/7037754-Add-item-to-cart-Food-Delivery-App 12 | -------------------------------------------------------------------------------- /ios/.xcode.env: -------------------------------------------------------------------------------- 1 | export NODE_BINARY=$(command -v node) 2 | -------------------------------------------------------------------------------- /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, min_ios_version_supported 5 | prepare_react_native_project! 6 | 7 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 8 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 9 | # 10 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 11 | # ```js 12 | # module.exports = { 13 | # dependencies: { 14 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 15 | # ``` 16 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 17 | 18 | linkage = ENV['USE_FRAMEWORKS'] 19 | if linkage != nil 20 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 21 | use_frameworks! :linkage => linkage.to_sym 22 | end 23 | 24 | target 'ReactNativeAnimations' do 25 | config = use_native_modules! 26 | 27 | # Flags change depending on the env values. 28 | flags = get_default_flags() 29 | 30 | use_react_native!( 31 | :path => config[:reactNativePath], 32 | # Hermes is now enabled by default. Disable by setting this flag to false. 33 | # Upcoming versions of React Native may rely on get_default_flags(), but 34 | # we make it explicit here to aid in the React Native upgrade process. 35 | :hermes_enabled => flags[:hermes_enabled], 36 | :fabric_enabled => flags[:fabric_enabled], 37 | # Enables Flipper. 38 | # 39 | # Note that if you have use_frameworks! enabled, Flipper will not work and 40 | # you should disable the next line. 41 | :flipper_configuration => flipper_config, 42 | # An absolute path to your application root. 43 | :app_path => "#{Pod::Config.instance.installation_root}/.." 44 | ) 45 | 46 | target 'ReactNativeAnimationsTests' do 47 | inherit! :complete 48 | # Pods for testing 49 | end 50 | 51 | post_install do |installer| 52 | react_native_post_install( 53 | installer, 54 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 55 | # necessary for Mac Catalyst builds 56 | :mac_catalyst_enabled => false 57 | ) 58 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 59 | end 60 | end 61 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations.xcodeproj/xcshareddata/xcschemes/ReactNativeAnimations.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/ReactNativeAnimations.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"ReactNativeAnimations"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 27 | /// 28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. 31 | - (BOOL)concurrentRootEnabled 32 | { 33 | return true; 34 | } 35 | 36 | @end 37 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ReactNativeAnimations 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 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 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 | AntDesign.ttf 57 | Entypo.ttf 58 | EvilIcons.ttf 59 | Feather.ttf 60 | FontAwesome.ttf 61 | FontAwesome5_Brands.ttf 62 | FontAwesome5_Regular.ttf 63 | FontAwesome5_Solid.ttf 64 | Fontisto.ttf 65 | Foundation.ttf 66 | Ionicons.ttf 67 | MaterialCommunityIcons.ttf 68 | MaterialIcons.ttf 69 | Octicons.ttf 70 | SimpleLineIcons.ttf 71 | Zocial.ttf 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimations/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/ReactNativeAnimations/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ios/ReactNativeAnimationsTests/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/ReactNativeAnimationsTests/ReactNativeAnimationsTests.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 ReactNativeAnimationsTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ReactNativeAnimationsTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /ios/_xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /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": "ReactNativeAnimations", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios --simulator='iPhone 13'", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "@react-native-community/blur": "^4.3.2", 14 | "@react-navigation/native": "^6.1.6", 15 | "@react-navigation/native-stack": "^6.9.13", 16 | "@react-navigation/stack": "^6.3.16", 17 | "lottie-react-native": "^5.1.5", 18 | "react": "18.2.0", 19 | "react-native": "0.71.4", 20 | "react-native-anchor-point": "^1.0.6", 21 | "react-native-gesture-handler": "^2.9.0", 22 | "react-native-linear-gradient": "^2.6.2", 23 | "react-native-material-ripple": "^0.9.1", 24 | "react-native-reanimated": "^3.0.2", 25 | "react-native-redash": "^18.1.0", 26 | "react-native-safe-area-context": "^4.5.0", 27 | "react-native-screens": "^3.20.0", 28 | "react-native-svg": "^13.8.0", 29 | "react-native-vector-icons": "^9.2.0" 30 | }, 31 | "devDependencies": { 32 | "@babel/core": "^7.20.0", 33 | "@babel/preset-env": "^7.20.0", 34 | "@babel/runtime": "^7.20.0", 35 | "@react-native-community/eslint-config": "^3.2.0", 36 | "@tsconfig/react-native": "^2.0.2", 37 | "@types/jest": "^29.2.1", 38 | "@types/react": "^18.0.24", 39 | "@types/react-test-renderer": "^18.0.0", 40 | "babel-jest": "^29.2.1", 41 | "eslint": "^8.19.0", 42 | "jest": "^29.2.1", 43 | "metro-react-native-babel-preset": "0.73.8", 44 | "prettier": "^2.4.1", 45 | "react-test-renderer": "18.2.0", 46 | "typescript": "4.8.4" 47 | }, 48 | "jest": { 49 | "preset": "react-native" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import { 2 | View, 3 | Text, 4 | Pressable, 5 | SafeAreaView, 6 | StyleSheet, 7 | ScrollView, 8 | } from 'react-native'; 9 | import React from 'react'; 10 | 11 | const AnimationComponents = [ 12 | 'Slider', 13 | 'Whatsapp Header', 14 | 'Swipe To Delete', 15 | 'Bkash Payment', 16 | 'Product Page', 17 | 'Delete Chat', 18 | 'Google Calendar', 19 | 'Pull to Refresh', 20 | 'Youtube Player', 21 | 'Twitter Like', 22 | 'Swipe Slider', 23 | 'Ecommerce Shared Element Transision', 24 | ]; 25 | 26 | const HomeScreen = ({navigation}) => { 27 | return ( 28 | 29 | 30 | {AnimationComponents.map((item, index) => { 31 | return ( 32 | navigation.navigate(item)} 35 | style={styles.menuItem}> 36 | 👉 37 | {`${index + 1}. ${item}`} 38 | 39 | ); 40 | })} 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default HomeScreen; 47 | 48 | const styles = StyleSheet.create({ 49 | menuItem: { 50 | padding: 20, 51 | borderBottomWidth: 1, 52 | borderBottomColor: '#dcdcdc', 53 | flexDirection: 'row', 54 | alignItems: 'center', 55 | }, 56 | menuItemIcon: { 57 | fontSize: 24, 58 | fontWeight: 'bold', 59 | color: '#000', 60 | marginRight: 20, 61 | }, 62 | menuItemName: { 63 | fontSize: 20, 64 | fontWeight: 'bold', 65 | color: '#000', 66 | }, 67 | }); 68 | -------------------------------------------------------------------------------- /src/SwipeSlider/Button.js: -------------------------------------------------------------------------------- 1 | import {Text, Pressable, StyleSheet} from 'react-native'; 2 | import React from 'react'; 3 | 4 | export default function Button({title, onPress, radius = 0}) { 5 | return ( 6 | 9 | {title} 10 | 11 | ); 12 | } 13 | 14 | const styles = StyleSheet.create({ 15 | btnContainter: { 16 | color: 'white', 17 | backgroundColor: 'black', 18 | fontSize: 20, 19 | fontWeight: 'bold', 20 | // borderRadius: 10, 21 | // overflow: 'hidden', 22 | width: '100%', 23 | // marginTop: 20, 24 | paddingVertical: 20, 25 | }, 26 | btnText: { 27 | color: 'white', 28 | fontSize: 20, 29 | textAlign: 'center', 30 | fontWeight: 'bold', 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /src/SwipeSlider/Card.js: -------------------------------------------------------------------------------- 1 | import {View, Text, StyleSheet, Dimensions, StatusBar} from 'react-native'; 2 | import React from 'react'; 3 | import Animated, { 4 | Extrapolate, 5 | interpolate, 6 | useAnimatedStyle, 7 | withDelay, 8 | withSpring, 9 | withTiming, 10 | } from 'react-native-reanimated'; 11 | import {CART_HEIGHT} from '.'; 12 | 13 | const {width} = Dimensions.get('window'); 14 | 15 | const clampOptions = { 16 | extrapolateLeft: Extrapolate.CLAMP, 17 | extrapolateRight: Extrapolate.CLAMP, 18 | }; 19 | 20 | export default function Card({translationX, index, item, translateY}) { 21 | // Input Ranges 22 | const inpurRange = [width * (index - 1), width * index, width * (index + 1)]; 23 | const opacityInputRange = [ 24 | width * (index - 1) + width * 0.8, 25 | width * index, 26 | width * (index + 1) - width * 0.8, 27 | ]; 28 | 29 | const AnimatedBgImageStyle = useAnimatedStyle(() => { 30 | const rotate = interpolate( 31 | translationX.value, 32 | inpurRange, 33 | 34 | [300, 0, -300], 35 | clampOptions, 36 | ); 37 | 38 | const imageTranslateY = interpolate( 39 | translationX.value, 40 | inpurRange, 41 | [250, 0, 250], 42 | clampOptions, 43 | ); 44 | 45 | return { 46 | transform: [{translateY: imageTranslateY}, {rotate: `${rotate}deg`}], 47 | }; 48 | }); 49 | 50 | const animatedOpacityStyle = useAnimatedStyle(() => { 51 | const opacity = interpolate( 52 | translationX.value, 53 | opacityInputRange, 54 | 55 | [0, 1, 0], 56 | clampOptions, 57 | ); 58 | 59 | return { 60 | opacity, 61 | }; 62 | }); 63 | 64 | const AnimatedBgStyle = useAnimatedStyle(() => { 65 | const opacity = interpolate( 66 | translationX.value, 67 | opacityInputRange, 68 | [0, 1, 0], 69 | clampOptions, 70 | ); 71 | 72 | return { 73 | opacity, 74 | }; 75 | }); 76 | 77 | const animatedTranslateTop = useAnimatedStyle(() => { 78 | const imageTranslateY = interpolate( 79 | translateY.value, 80 | [0, CART_HEIGHT], 81 | [-CART_HEIGHT * 0.2, 0], 82 | clampOptions, 83 | ); 84 | 85 | return { 86 | // transform: [{translateY: withDelay(400, withTiming(imageTranslateY))}], 87 | transform: [{translateY: withSpring(imageTranslateY)}], 88 | }; 89 | }); 90 | 91 | return ( 92 | 93 | 98 | {/* Background Image */} 99 | 100 | 101 | 102 | 103 | 104 | {/* Main Image */} 105 | 106 | 107 | 111 | 112 | 113 | {/* Heading */} 114 | 116 | {item.title} 117 | {item.price} 118 | 119 | 120 | 121 | ); 122 | } 123 | 124 | const styles = StyleSheet.create({ 125 | bgImageContainer: { 126 | width: width, 127 | height: width, 128 | ...StyleSheet.absoluteFillObject, 129 | top: -width * 0.2, 130 | }, 131 | bgImage: { 132 | width: '100%', 133 | height: '100%', 134 | opacity: 0.2, 135 | transform: [{scale: 1.5}, {translateY: -30}], 136 | }, 137 | title: { 138 | fontSize: 25, 139 | fontWeight: 'bold', 140 | marginBottom: 5, 141 | color: 'black', 142 | }, 143 | price: {fontSize: 20, fontWeight: 'bold', color: '#f66085'}, 144 | contentContainer: { 145 | alignItems: 'center', 146 | marginTop: width * 0.5, 147 | }, 148 | mainImage: { 149 | width: width * 0.7, 150 | height: width * 0.7, 151 | }, 152 | descriptionWrapper: { 153 | alignItems: 'center', 154 | marginTop: '10%', 155 | }, 156 | }); 157 | -------------------------------------------------------------------------------- /src/SwipeSlider/Cart.js: -------------------------------------------------------------------------------- 1 | import {View, Text, StyleSheet, Image, Pressable} from 'react-native'; 2 | import React from 'react'; 3 | import {FlatList} from 'react-native-gesture-handler'; 4 | import Button from './Button'; 5 | import Animated, {useAnimatedStyle} from 'react-native-reanimated'; 6 | import {CART_HEIGHT} from '.'; 7 | 8 | export default function Cart({data, translateY, onClose}) { 9 | const animatedStyle = useAnimatedStyle(() => { 10 | return { 11 | transform: [{translateY: translateY.value}], 12 | }; 13 | }); 14 | return ( 15 | 16 | 17 | {/* CART */} 18 | 19 | ( 23 | 24 | 28 | 29 | 30 | {item.title} 31 | 32 | 33 | {item.price} 34 | 35 | 36 | 37 | )} 38 | /> 39 | 40 |