Repository: oblador/react-native-animatable Branch: master Commit: dfd7413734eb Files: 137 Total size: 238.2 KB Directory structure: gitextract_ur70ta99/ ├── .editorconfig ├── .eslintrc.js ├── .github/ │ └── workflows/ │ ├── deploy.yml │ └── tests.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── Examples/ │ ├── AnimatableExplorer/ │ │ ├── .bundle/ │ │ │ └── config │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── .prettierrc.js │ │ ├── .watchmanconfig │ │ ├── AnimationCell.tsx │ │ ├── App.tsx │ │ ├── Gemfile │ │ ├── README.md │ │ ├── __tests__/ │ │ │ └── App.test.tsx │ │ ├── android/ │ │ │ ├── app/ │ │ │ │ ├── build.gradle │ │ │ │ ├── debug.keystore │ │ │ │ ├── proguard-rules.pro │ │ │ │ └── src/ │ │ │ │ ├── debug/ │ │ │ │ │ ├── AndroidManifest.xml │ │ │ │ │ └── java/ │ │ │ │ │ └── com/ │ │ │ │ │ └── animatableexplorer/ │ │ │ │ │ └── ReactNativeFlipper.java │ │ │ │ ├── main/ │ │ │ │ │ ├── AndroidManifest.xml │ │ │ │ │ ├── java/ │ │ │ │ │ │ └── com/ │ │ │ │ │ │ └── animatableexplorer/ │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ │ └── res/ │ │ │ │ │ ├── drawable/ │ │ │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ │ └── values/ │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ └── release/ │ │ │ │ └── java/ │ │ │ │ └── com/ │ │ │ │ └── animatableexplorer/ │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── build.gradle │ │ │ ├── gradle/ │ │ │ │ └── wrapper/ │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ │ ├── gradle.properties │ │ │ ├── gradlew │ │ │ ├── gradlew.bat │ │ │ └── settings.gradle │ │ ├── app.json │ │ ├── babel.config.js │ │ ├── groupedAnimationTypes.ts │ │ ├── index.js │ │ ├── ios/ │ │ │ ├── .xcode.env │ │ │ ├── AnimatableExplorer/ │ │ │ │ ├── AppDelegate.h │ │ │ │ ├── AppDelegate.mm │ │ │ │ ├── Images.xcassets/ │ │ │ │ │ ├── AppIcon.appiconset/ │ │ │ │ │ │ └── Contents.json │ │ │ │ │ └── Contents.json │ │ │ │ ├── Info.plist │ │ │ │ ├── LaunchScreen.storyboard │ │ │ │ └── main.m │ │ │ ├── AnimatableExplorer.xcodeproj/ │ │ │ │ ├── project.pbxproj │ │ │ │ └── xcshareddata/ │ │ │ │ └── xcschemes/ │ │ │ │ └── AnimatableExplorer.xcscheme │ │ │ ├── AnimatableExplorer.xcworkspace/ │ │ │ │ ├── contents.xcworkspacedata │ │ │ │ └── xcshareddata/ │ │ │ │ └── IDEWorkspaceChecks.plist │ │ │ ├── AnimatableExplorerTests/ │ │ │ │ ├── AnimatableExplorerTests.m │ │ │ │ └── Info.plist │ │ │ └── Podfile │ │ ├── jest.config.js │ │ ├── metro.config.js │ │ ├── package.json │ │ └── tsconfig.json │ └── MakeItRain/ │ ├── .bundle/ │ │ └── config │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── App.js │ ├── Gemfile │ ├── README.md │ ├── __tests__/ │ │ └── App.test.tsx │ ├── android/ │ │ ├── app/ │ │ │ ├── build.gradle │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src/ │ │ │ ├── debug/ │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java/ │ │ │ │ └── com/ │ │ │ │ └── makeitrain/ │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main/ │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java/ │ │ │ │ │ └── com/ │ │ │ │ │ └── makeitrain/ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res/ │ │ │ │ ├── drawable/ │ │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ └── values/ │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release/ │ │ │ └── java/ │ │ │ └── com/ │ │ │ └── makeitrain/ │ │ │ └── ReactNativeFlipper.java │ │ ├── build.gradle │ │ ├── gradle/ │ │ │ └── wrapper/ │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ │ ├── gradle.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── index.js │ ├── ios/ │ │ ├── .xcode.env │ │ ├── MakeItRain/ │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.mm │ │ │ ├── Images.xcassets/ │ │ │ │ ├── AppIcon.appiconset/ │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── main.m │ │ ├── MakeItRain.xcodeproj/ │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata/ │ │ │ └── xcschemes/ │ │ │ └── MakeItRain.xcscheme │ │ ├── MakeItRain.xcworkspace/ │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata/ │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── MakeItRainTests/ │ │ │ ├── Info.plist │ │ │ └── MakeItRainTests.m │ │ └── Podfile │ ├── jest.config.js │ ├── metro.config.js │ ├── package.json │ └── tsconfig.json ├── LICENSE ├── README.md ├── __tests__/ │ ├── createAnimation.js │ └── getDefaultStyleValue.js ├── babel.config.js ├── createAnimatableComponent.js ├── createAnimation.js ├── definitions/ │ ├── attention-seekers.js │ ├── bouncing-entrances.js │ ├── bouncing-exits.js │ ├── fading-entrances.js │ ├── fading-exits.js │ ├── flippers.js │ ├── index.js │ ├── lightspeed.js │ ├── sliding-entrances.js │ ├── sliding-exits.js │ ├── zooming-entrances.js │ └── zooming-exits.js ├── easing.js ├── flattenStyle.js ├── getDefaultStyleValue.js ├── getStyleValues.js ├── index.js ├── package.json ├── registry.js ├── typings/ │ └── react-native-animatable.d.ts └── wrapStyleTransforms.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # http://editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ================================================ FILE: .eslintrc.js ================================================ module.exports = { extends: ['airbnb', 'prettier'], plugins: ['prettier'], parser: '@babel/eslint-parser', rules: { 'react/sort-comp': [0], 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], 'react/static-property-placement': [0], 'react/destructuring-assignment': [0], 'react/jsx-props-no-spreading': [0], 'import/no-extraneous-dependencies': [0], 'import/no-unresolved': [2, { ignore: ['^react(-native)?$'] }], 'import/extensions': [2, { js: 'never', json: 'always' }], 'prefer-object-spread': [0], 'default-param-last': [0], }, }; ================================================ FILE: .github/workflows/deploy.yml ================================================ name: Deploy on: push: branches: - master jobs: publish: name: Release new version if: github.repository_owner == 'oblador' runs-on: ubuntu-latest environment: Deploy permissions: id-token: write steps: - uses: actions/checkout@v4 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: '20' - name: Publish uses: JS-DevTools/npm-publish@v3 with: token: ${{ secrets.NPM_PUBLISH_TOKEN }} provenance: true ================================================ FILE: .github/workflows/tests.yml ================================================ name: Tests on: - push - pull_request jobs: tests: name: Tests runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: '20' - name: Install dependencies run: yarn --frozen-lockfile --non-interactive --silent --ignore-scripts - name: Static analysis run: yarn lint - name: Run tests run: yarn jest ================================================ FILE: .gitignore ================================================ # Logs *.log # Dependency directory # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git node_modules # Jest coverage coverage ================================================ FILE: .npmignore ================================================ *.log .DS_Store .babelrc .prettierrc .editorconfig .eslintrc .travis.yml babel.config.js __tests__ node_modules Examples yarn.lock ================================================ FILE: .prettierrc ================================================ { "singleQuote": true, "trailingComma": "all" } ================================================ FILE: Examples/AnimatableExplorer/.bundle/config ================================================ BUNDLE_PATH: "vendor/bundle" BUNDLE_FORCE_RUBY_PLATFORM: 1 ================================================ FILE: Examples/AnimatableExplorer/.eslintrc.js ================================================ module.exports = { root: true, extends: '@react-native', }; ================================================ FILE: Examples/AnimatableExplorer/.gitignore ================================================ # OSX # .DS_Store # Xcode # build/ *.pbxuser !default.pbxuser *.mode1v3 !default.mode1v3 *.mode2v3 !default.mode2v3 *.perspectivev3 !default.perspectivev3 xcuserdata *.xccheckout *.moved-aside DerivedData *.hmap *.ipa *.xcuserstate ios/.xcode.env.local # Android/IntelliJ # build/ .idea .gradle local.properties *.iml *.hprof .cxx/ *.keystore !debug.keystore # node.js # node_modules/ npm-debug.log yarn-error.log # fastlane # # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the # screenshots whenever they are needed. # For more information about the recommended setup visit: # https://docs.fastlane.tools/best-practices/source-control/ **/fastlane/report.xml **/fastlane/Preview.html **/fastlane/screenshots **/fastlane/test_output # Bundle artifact *.jsbundle # Ruby / CocoaPods /ios/Pods/ /vendor/bundle/ # Temporary files created by Metro to check the health of the file watcher .metro-health-check* # testing /coverage ================================================ FILE: Examples/AnimatableExplorer/.prettierrc.js ================================================ module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', }; ================================================ FILE: Examples/AnimatableExplorer/.watchmanconfig ================================================ {} ================================================ FILE: Examples/AnimatableExplorer/AnimationCell.tsx ================================================ import React, {memo, useCallback, useRef} from 'react'; import {StyleSheet, Text, TouchableWithoutFeedback} from 'react-native'; import {Animation, View} from 'react-native-animatable'; const styles = StyleSheet.create({ cell: { padding: 16, marginBottom: 10, marginHorizontal: 10, }, name: { color: 'white', fontSize: 16, textAlign: 'center', }, }); interface AnimationCellProps { animationType: Animation; color: string; onPress: (view: View, animationType: Animation) => void; useNativeDriver: boolean; } export default memo(function AnimationCell({ useNativeDriver, color, onPress, animationType, }: AnimationCellProps) { const ref = useRef(null); const handlePress = useCallback(() => { if (ref.current && onPress) { onPress(ref.current, animationType); } }, [ref, onPress, animationType]); return ( {animationType} ); }); ================================================ FILE: Examples/AnimatableExplorer/App.tsx ================================================ import React, {useCallback} from 'react'; import { SafeAreaView, SectionList, StyleSheet, TouchableWithoutFeedback, } from 'react-native'; import {View, Text, Animation} from 'react-native-animatable'; import Slider from '@react-native-community/slider'; import AnimationCell from './AnimationCell'; import {animationTypes} from './groupedAnimationTypes'; const COLORS = [ '#65b237', // green '#346ca5', // blue '#a0a0a0', // light grey '#ffc508', // yellow '#217983', // cobolt '#435056', // grey '#b23751', // red '#333333', // dark '#ff6821', // orange '#e3a09e', // pink '#1abc9c', // turquoise '#302614', // brown ]; const NATIVE_INCOMPATIBLE_ANIMATIONS = [ 'jello', 'lightSpeedIn', 'lightSpeedOut', ]; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, title: { fontSize: 28, fontWeight: '300', textAlign: 'center', margin: 20, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 20, backgroundColor: 'transparent', }, slider: { height: 30, margin: 10, }, toggle: { width: 120, backgroundColor: '#333', borderRadius: 3, padding: 5, fontSize: 14, alignSelf: 'center', textAlign: 'center', margin: 10, color: 'rgba(255, 255, 255, 1)', }, toggledOn: { color: 'rgba(255, 33, 33, 1)', fontSize: 16, transform: [ { rotate: '8deg', }, { translateY: -20, }, ], }, sectionHeader: { backgroundColor: '#F5FCFF', padding: 15, }, sectionHeaderText: { textAlign: 'center', fontSize: 18, }, }); export default function App() { const [duration, setDuration] = React.useState(1000); const [toggledOn, setToggledOn] = React.useState(false); const textRef = React.useRef(null); const handleRowPressed = useCallback( (componentRef: typeof View, animationType: Animation) => { componentRef.animate(animationType, duration); textRef.current?.animate(animationType, duration); }, [duration], ); return ( Animatable Explorer setDuration(Math.round(value))} maximumValue={2000} /> setToggledOn(prev => !prev)}> Toggle me! Tap one of the following to animate for {duration} ms item} sections={animationTypes} removeClippedSubviews={false} renderSectionHeader={({section}) => ( {section.title} )} renderItem={({item, index}) => ( )} /> ); } ================================================ FILE: Examples/AnimatableExplorer/Gemfile ================================================ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version ruby ">= 2.6.10" gem 'cocoapods', '~> 1.13' gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' ================================================ FILE: Examples/AnimatableExplorer/README.md ================================================ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). # Getting Started >**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. ## Step 1: Start the Metro Server First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. To start Metro, run the following command from the _root_ of your React Native project: ```bash # using npm npm start # OR using Yarn yarn start ``` ## Step 2: Start your Application Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: ### For Android ```bash # using npm npm run android # OR using Yarn yarn android ``` ### For iOS ```bash # using npm npm run ios # OR using Yarn yarn ios ``` If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. ## Step 3: Modifying your App Now that you have successfully run the app, let's modify it. 1. Open `App.tsx` in your text editor of choice and edit some lines. 2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! ## Congratulations! :tada: You've successfully run and modified your React Native App. :partying_face: ### Now what? - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). # Troubleshooting If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. # Learn More To learn more about React Native, take a look at the following resources: - [React Native Website](https://reactnative.dev) - learn more about React Native. - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. ================================================ FILE: Examples/AnimatableExplorer/__tests__/App.test.tsx ================================================ /** * @format */ import 'react-native'; import React from 'react'; import App from '../App'; // Note: import explicitly to use the types shiped with jest. import {it} from '@jest/globals'; // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer'; it('renders correctly', () => { renderer.create(); }); ================================================ FILE: Examples/AnimatableExplorer/android/app/build.gradle ================================================ apply plugin: "com.android.application" apply plugin: "com.facebook.react" /** * This is the configuration block to customize your React Native Android app. * By default you don't need to apply any configuration, just uncomment the lines you need. */ react { /* Folders */ // The root of your project, i.e. where "package.json" lives. Default is '..' // root = file("../") // The folder where the react-native NPM package is. Default is ../node_modules/react-native // reactNativeDir = file("../node_modules/react-native") // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen // codegenDir = file("../node_modules/@react-native/codegen") // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js // cliFile = file("../node_modules/react-native/cli.js") /* Variants */ // The list of variants to that are debuggable. For those we're going to // skip the bundling of the JS bundle and the assets. By default is just 'debug'. // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. // debuggableVariants = ["liteDebug", "prodDebug"] /* Bundling */ // A list containing the node command and its flags. Default is just 'node'. // nodeExecutableAndArgs = ["node"] // // The command to run when bundling. By default is 'bundle' // bundleCommand = "ram-bundle" // // The path to the CLI configuration file. Default is empty. // bundleConfig = file(../rn-cli.config.js) // // The name of the generated asset file containing your JS bundle // bundleAssetName = "MyApplication.android.bundle" // // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' // entryFile = file("../js/MyApplication.android.js") // // A list of extra flags to pass to the 'bundle' commands. // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle // extraPackagerArgs = [] /* Hermes Commands */ // The hermes compiler command to run. By default it is 'hermesc' // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" // // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" // hermesFlags = ["-O", "-output-source-map"] } /** * Set this to true to Run Proguard on Release builds to minify the Java bytecode. */ def enableProguardInReleaseBuilds = false /** * The preferred build flavor of JavaScriptCore (JSC) * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+' android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion namespace "com.animatableexplorer" defaultConfig { applicationId "com.animatableexplorer" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution! In production, you need to generate your own keystore file. // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } } dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.squareup.okhttp3', module:'okhttp' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor } } apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) ================================================ FILE: Examples/AnimatableExplorer/android/app/proguard-rules.pro ================================================ # Add project specific ProGuard rules here. # By default, the flags in this file are appended to flags specified # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt # You can edit the include path and order by changing the proguardFiles # directive in build.gradle. # # For more details, see # http://developer.android.com/guide/developing/tools/proguard.html # Add any project specific keep options here: ================================================ FILE: Examples/AnimatableExplorer/android/app/src/debug/AndroidManifest.xml ================================================ ================================================ FILE: Examples/AnimatableExplorer/android/app/src/debug/java/com/animatableexplorer/ReactNativeFlipper.java ================================================ /** * Copyright (c) Meta Platforms, Inc. and affiliates. * *

This source code is licensed under the MIT license found in the LICENSE file in the root * directory of this source tree. */ package com.animatableexplorer; import android.content.Context; import com.facebook.flipper.android.AndroidFlipperClient; import com.facebook.flipper.android.utils.FlipperUtils; import com.facebook.flipper.core.FlipperClient; import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; import com.facebook.flipper.plugins.inspector.DescriptorMapping; import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; import com.facebook.react.ReactInstanceEventListener; import com.facebook.react.ReactInstanceManager; import com.facebook.react.bridge.ReactContext; import com.facebook.react.modules.network.NetworkingModule; import okhttp3.OkHttpClient; /** * Class responsible of loading Flipper inside your React Native application. This is the debug * flavor of it. Here you can add your own plugins and customize the Flipper setup. */ public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { if (FlipperUtils.shouldEnableFlipper(context)) { final FlipperClient client = AndroidFlipperClient.getInstance(context); client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); client.addPlugin(new DatabasesFlipperPlugin(context)); client.addPlugin(new SharedPreferencesFlipperPlugin(context)); client.addPlugin(CrashReporterPlugin.getInstance()); NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } }); client.addPlugin(networkFlipperPlugin); client.start(); // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized // Hence we run if after all native modules have been initialized ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); if (reactContext == null) { reactInstanceManager.addReactInstanceEventListener( new ReactInstanceEventListener() { @Override public void onReactContextInitialized(ReactContext reactContext) { reactInstanceManager.removeReactInstanceEventListener(this); reactContext.runOnNativeModulesQueueThread( new Runnable() { @Override public void run() { client.addPlugin(new FrescoFlipperPlugin()); } }); } }); } else { client.addPlugin(new FrescoFlipperPlugin()); } } } } ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/AndroidManifest.xml ================================================ ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/java/com/animatableexplorer/MainActivity.java ================================================ package com.animatableexplorer; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; import com.facebook.react.defaults.DefaultReactActivityDelegate; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "AnimatableExplorer"; } /** * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React * (aka React 18) with two boolean flags. */ @Override protected ReactActivityDelegate createReactActivityDelegate() { return new DefaultReactActivityDelegate( this, getMainComponentName(), // If you opted-in for the New Architecture, we enable the Fabric Renderer. DefaultNewArchitectureEntryPoint.getFabricEnabled()); } } ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/java/com/animatableexplorer/MainApplication.java ================================================ package com.animatableexplorer; import android.app.Application; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; import com.facebook.react.defaults.DefaultReactNativeHost; import com.facebook.soloader.SoLoader; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } @Override protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; } @Override protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { // If you opted-in for the New Architecture, we load the native entry point for this app. DefaultNewArchitectureEntryPoint.load(); } ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } } ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/res/drawable/rn_edit_text_material.xml ================================================ ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/res/values/strings.xml ================================================ AnimatableExplorer ================================================ FILE: Examples/AnimatableExplorer/android/app/src/main/res/values/styles.xml ================================================ ================================================ FILE: Examples/AnimatableExplorer/android/app/src/release/java/com/animatableexplorer/ReactNativeFlipper.java ================================================ /** * Copyright (c) Meta Platforms, Inc. and affiliates. * *

This source code is licensed under the MIT license found in the LICENSE file in the root * directory of this source tree. */ package com.animatableexplorer; import android.content.Context; import com.facebook.react.ReactInstanceManager; /** * Class responsible of loading Flipper inside your React Native application. This is the release * flavor of it so it's empty as we don't want to load Flipper. */ public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { // Do nothing as we don't want to initialize Flipper on Release. } } ================================================ FILE: Examples/AnimatableExplorer/android/build.gradle ================================================ // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") } } ================================================ FILE: Examples/AnimatableExplorer/android/gradle/wrapper/gradle-wrapper.properties ================================================ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip networkTimeout=10000 zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists ================================================ FILE: Examples/AnimatableExplorer/android/gradle.properties ================================================ # Project-wide Gradle settings. # IDE (e.g. Android Studio) users: # Gradle settings configured through the IDE *will override* # any settings specified in this file. # For more details on how to configure your build environment visit # http://www.gradle.org/docs/current/userguide/build_environment.html # Specifies the JVM arguments used for the daemon process. # The setting is particularly useful for tweaking memory settings. # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m # When configured, Gradle will run in incubating parallel mode. # This option should only be used with decoupled projects. More details, visit # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects # org.gradle.parallel=true # AndroidX package structure to make it clearer which packages are bundled with the # Android operating system, and which are packaged with your app's APK # https://developer.android.com/topic/libraries/support-library/androidx-rn android.useAndroidX=true # Automatically convert third-party libraries to use AndroidX android.enableJetifier=true # Version of flipper SDK to use with React Native FLIPPER_VERSION=0.182.0 # Use this property to specify which architecture you want to build. # You can also override it from the CLI using # ./gradlew -PreactNativeArchitectures=x86_64 reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 # Use this property to enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=false # Use this property to enable or disable the Hermes JS engine. # If set to false, you will be using JSC instead. hermesEnabled=true ================================================ FILE: Examples/AnimatableExplorer/android/gradlew ================================================ #!/bin/sh # # Copyright © 2015-2021 the original authors. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # https://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. # ############################################################################## # # Gradle start up script for POSIX generated by Gradle. # # Important for running: # # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is # noncompliant, but you have some other compliant shell such as ksh or # bash, then to run this script, type that shell name before the whole # command line, like: # # ksh Gradle # # Busybox and similar reduced shells will NOT work, because this script # requires all of these POSIX shell features: # * functions; # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», # «${var#prefix}», «${var%suffix}», and «$( cmd )»; # * compound commands having a testable exit status, especially «case»; # * various built-in commands including «command», «set», and «ulimit». # # Important for patching: # # (2) This script targets any POSIX shell, so it avoids extensions provided # by Bash, Ksh, etc; in particular arrays are avoided. # # The "traditional" practice of packing multiple parameters into a # space-separated string is a well documented source of bugs and security # problems, so this is (mostly) avoided, by progressively accumulating # options in "$@", and eventually passing that to Java. # # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; # see the in-line comments for details. # # There are tweaks for specific operating systems such as AIX, CygWin, # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. # ############################################################################## # Attempt to set APP_HOME # Resolve links: $0 may be a link app_path=$0 # Need this for daisy-chained symlinks. while APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path [ -h "$app_path" ] do ls=$( ls -ld "$app_path" ) link=${ls#*' -> '} case $link in #( /*) app_path=$link ;; #( *) app_path=$APP_HOME$link ;; esac done # This is normally unused # shellcheck disable=SC2034 APP_BASE_NAME=${0##*/} APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum warn () { echo "$*" } >&2 die () { echo echo "$*" echo exit 1 } >&2 # OS specific support (must be 'true' or 'false'). cygwin=false msys=false darwin=false nonstop=false case "$( uname )" in #( CYGWIN* ) cygwin=true ;; #( Darwin* ) darwin=true ;; #( MSYS* | MINGW* ) msys=true ;; #( NONSTOP* ) nonstop=true ;; esac CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar # Determine the Java command to use to start the JVM. if [ -n "$JAVA_HOME" ] ; then if [ -x "$JAVA_HOME/jre/sh/java" ] ; then # IBM's JDK on AIX uses strange locations for the executables JAVACMD=$JAVA_HOME/jre/sh/java else JAVACMD=$JAVA_HOME/bin/java fi if [ ! -x "$JAVACMD" ] ; then die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME Please set the JAVA_HOME variable in your environment to match the location of your Java installation." fi else JAVACMD=java which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. Please set the JAVA_HOME variable in your environment to match the location of your Java installation." fi # Increase the maximum file descriptors if we can. if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then case $MAX_FD in #( max*) # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. # shellcheck disable=SC3045 MAX_FD=$( ulimit -H -n ) || warn "Could not query maximum file descriptor limit" esac case $MAX_FD in #( '' | soft) :;; #( *) # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. # shellcheck disable=SC3045 ulimit -n "$MAX_FD" || warn "Could not set maximum file descriptor limit to $MAX_FD" esac fi # Collect all arguments for the java command, stacking in reverse order: # * args from the command line # * the main class name # * -classpath # * -D...appname settings # * --module-path (only if needed) # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. # For Cygwin or MSYS, switch paths to Windows format before running java if "$cygwin" || "$msys" ; then APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) JAVACMD=$( cygpath --unix "$JAVACMD" ) # Now convert the arguments - kludge to limit ourselves to /bin/sh for arg do if case $arg in #( -*) false ;; # don't mess with options #( /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath [ -e "$t" ] ;; #( *) false ;; esac then arg=$( cygpath --path --ignore --mixed "$arg" ) fi # Roll the args list around exactly as many times as the number of # args, so each arg winds up back in the position where it started, but # possibly modified. # # NB: a `for` loop captures its iteration list before it begins, so # changing the positional parameters here affects neither the number of # iterations, nor the values presented in `arg`. shift # remove old arg set -- "$@" "$arg" # push replacement arg done fi # Collect all arguments for the java command; # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of # shell script including quotes and variable substitutions, so put them in # double quotes to make sure that they get re-expanded; and # * put everything else in single quotes, so that it's not re-expanded. set -- \ "-Dorg.gradle.appname=$APP_BASE_NAME" \ -classpath "$CLASSPATH" \ org.gradle.wrapper.GradleWrapperMain \ "$@" # Stop when "xargs" is not available. if ! command -v xargs >/dev/null 2>&1 then die "xargs is not available" fi # Use "xargs" to parse quoted args. # # With -n1 it outputs one arg per line, with the quotes and backslashes removed. # # In Bash we could simply go: # # readarray ARGS < <( xargs -n1 <<<"$var" ) && # set -- "${ARGS[@]}" "$@" # # but POSIX shell has neither arrays nor command substitution, so instead we # post-process each arg (as a line of input to sed) to backslash-escape any # character that might be a shell metacharacter, then use eval to reverse # that process (while maintaining the separation between arguments), and wrap # the whole thing up as a single "set" statement. # # This will of course break if any of these variables contains a newline or # an unmatched quote. # eval "set -- $( printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | xargs -n1 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | tr '\n' ' ' )" '"$@"' exec "$JAVACMD" "$@" ================================================ FILE: Examples/AnimatableExplorer/android/gradlew.bat ================================================ @rem @rem Copyright 2015 the original author or authors. @rem @rem Licensed under the Apache License, Version 2.0 (the "License"); @rem you may not use this file except in compliance with the License. @rem You may obtain a copy of the License at @rem @rem https://www.apache.org/licenses/LICENSE-2.0 @rem @rem Unless required by applicable law or agreed to in writing, software @rem distributed under the License is distributed on an "AS IS" BASIS, @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @rem See the License for the specific language governing permissions and @rem limitations under the License. @rem @if "%DEBUG%"=="" @echo off @rem ########################################################################## @rem @rem Gradle startup script for Windows @rem @rem ########################################################################## @rem Set local scope for the variables with windows NT shell if "%OS%"=="Windows_NT" setlocal set DIRNAME=%~dp0 if "%DIRNAME%"=="" set DIRNAME=. @rem This is normally unused set APP_BASE_NAME=%~n0 set APP_HOME=%DIRNAME% @rem Resolve any "." and ".." in APP_HOME to make it shorter. for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" @rem Find java.exe if defined JAVA_HOME goto findJavaFromJavaHome set JAVA_EXE=java.exe %JAVA_EXE% -version >NUL 2>&1 if %ERRORLEVEL% equ 0 goto execute echo. echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. echo. echo Please set the JAVA_HOME variable in your environment to match the echo location of your Java installation. goto fail :findJavaFromJavaHome set JAVA_HOME=%JAVA_HOME:"=% set JAVA_EXE=%JAVA_HOME%/bin/java.exe if exist "%JAVA_EXE%" goto execute echo. echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% echo. echo Please set the JAVA_HOME variable in your environment to match the echo location of your Java installation. goto fail :execute @rem Setup the command line set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar @rem Execute Gradle "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* :end @rem End local scope for the variables with windows NT shell if %ERRORLEVEL% equ 0 goto mainEnd :fail rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of rem the _cmd.exe /c_ return code! set EXIT_CODE=%ERRORLEVEL% if %EXIT_CODE% equ 0 set EXIT_CODE=1 if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% exit /b %EXIT_CODE% :mainEnd if "%OS%"=="Windows_NT" endlocal :omega ================================================ FILE: Examples/AnimatableExplorer/android/settings.gradle ================================================ rootProject.name = 'AnimatableExplorer' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') ================================================ FILE: Examples/AnimatableExplorer/app.json ================================================ { "name": "AnimatableExplorer", "displayName": "AnimatableExplorer" } ================================================ FILE: Examples/AnimatableExplorer/babel.config.js ================================================ module.exports = { presets: ['module:metro-react-native-babel-preset'], }; ================================================ FILE: Examples/AnimatableExplorer/groupedAnimationTypes.ts ================================================ import {Animation} from 'react-native-animatable'; interface GroupedAnimationType { title: string; data: Animation[]; } export const animationTypes: GroupedAnimationType[] = [ { title: 'Attention Seekers', data: [ 'bounce', 'flash', 'jello', 'pulse', 'rotate', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', ], }, { title: 'Bouncing Entrances', data: [ 'bounceIn', 'bounceInDown', 'bounceInUp', 'bounceInLeft', 'bounceInRight', ], }, { title: 'Bouncing Exits', data: [ 'bounceOut', 'bounceOutDown', 'bounceOutUp', 'bounceOutLeft', 'bounceOutRight', ], }, { title: 'Fading Entrances', data: [ 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInUp', 'fadeInUpBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', ], }, { title: 'Fading Exits', data: [ 'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', ], }, { title: 'Flippers', data: ['flipInX', 'flipInY', 'flipOutX', 'flipOutY'], }, { title: 'Lightspeed', data: ['lightSpeedIn', 'lightSpeedOut'], }, { title: 'Sliding Entrances', data: ['slideInDown', 'slideInUp', 'slideInLeft', 'slideInRight'], }, { title: 'Sliding Exits', data: ['slideOutDown', 'slideOutUp', 'slideOutLeft', 'slideOutRight'], }, { title: 'Zooming Entrances', data: ['zoomIn', 'zoomInDown', 'zoomInUp', 'zoomInLeft', 'zoomInRight'], }, { title: 'Zooming Exits', data: [ 'zoomOut', 'zoomOutDown', 'zoomOutUp', 'zoomOutLeft', 'zoomOutRight', ], }, ]; ================================================ FILE: Examples/AnimatableExplorer/index.js ================================================ import { AppRegistry } from 'react-native'; import App from './App'; import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App); ================================================ FILE: Examples/AnimatableExplorer/ios/.xcode.env ================================================ # This `.xcode.env` file is versioned and is used to source the environment # used when running script phases inside Xcode. # To customize your local environment, you can create an `.xcode.env.local` # file that is not versioned. # NODE_BINARY variable contains the PATH to the node executable. # # Customize the NODE_BINARY variable here. # For example, to use nvm with brew, add the following line # . "$(brew --prefix nvm)/nvm.sh" --no-use export NODE_BINARY=$(command -v node) ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/AppDelegate.h ================================================ #import #import @interface AppDelegate : RCTAppDelegate @end ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/AppDelegate.mm ================================================ #import "AppDelegate.h" #import @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.moduleName = @"AnimatableExplorer"; // You can add your custom initial props in the dictionary below. // They will be passed down to the ViewController used by React Native. self.initialProps = @{}; return [super application:application didFinishLaunchingWithOptions:launchOptions]; } - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif } @end ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/Images.xcassets/AppIcon.appiconset/Contents.json ================================================ { "images" : [ { "idiom" : "iphone", "scale" : "2x", "size" : "20x20" }, { "idiom" : "iphone", "scale" : "3x", "size" : "20x20" }, { "idiom" : "iphone", "scale" : "2x", "size" : "29x29" }, { "idiom" : "iphone", "scale" : "3x", "size" : "29x29" }, { "idiom" : "iphone", "scale" : "2x", "size" : "40x40" }, { "idiom" : "iphone", "scale" : "3x", "size" : "40x40" }, { "idiom" : "iphone", "scale" : "2x", "size" : "60x60" }, { "idiom" : "iphone", "scale" : "3x", "size" : "60x60" }, { "idiom" : "ios-marketing", "scale" : "1x", "size" : "1024x1024" } ], "info" : { "author" : "xcode", "version" : 1 } } ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/Images.xcassets/Contents.json ================================================ { "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/Info.plist ================================================ CFBundleDevelopmentRegion en CFBundleDisplayName AnimatableExplorer CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName $(PRODUCT_NAME) CFBundlePackageType APPL CFBundleShortVersionString $(MARKETING_VERSION) CFBundleSignature ???? CFBundleVersion $(CURRENT_PROJECT_VERSION) LSRequiresIPhoneOS NSAppTransportSecurity NSExceptionDomains localhost NSExceptionAllowsInsecureHTTPLoads NSLocationWhenInUseUsageDescription UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities armv7 UISupportedInterfaceOrientations UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIViewControllerBasedStatusBarAppearance ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/LaunchScreen.storyboard ================================================ ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer/main.m ================================================ #import #import "AppDelegate.h" int main(int argc, char *argv[]) { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); } } ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer.xcodeproj/project.pbxproj ================================================ // !$*UTF8*$! { archiveVersion = 1; classes = { }; objectVersion = 54; objects = { /* Begin PBXBuildFile section */ 00E356F31AD99517003FC87E /* AnimatableExplorerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* AnimatableExplorerTests.m */; }; 0C80B921A6F3F58F76C31292 /* libPods-AnimatableExplorer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-AnimatableExplorer.a */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 7699B88040F8A987B510C191 /* libPods-AnimatableExplorer-AnimatableExplorerTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-AnimatableExplorer-AnimatableExplorerTests.a */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; proxyType = 1; remoteGlobalIDString = 13B07F861A680F5B00A75B9A; remoteInfo = AnimatableExplorer; }; /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ 00E356EE1AD99517003FC87E /* AnimatableExplorerTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = AnimatableExplorerTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 00E356F21AD99517003FC87E /* AnimatableExplorerTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AnimatableExplorerTests.m; sourceTree = ""; }; 13B07F961A680F5B00A75B9A /* AnimatableExplorer.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = AnimatableExplorer.app; sourceTree = BUILT_PRODUCTS_DIR; }; 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = AnimatableExplorer/AppDelegate.h; sourceTree = ""; }; 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = AnimatableExplorer/AppDelegate.mm; sourceTree = ""; }; 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = AnimatableExplorer/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = AnimatableExplorer/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = AnimatableExplorer/main.m; sourceTree = ""; }; 19F6CBCC0A4E27FBF8BF4A61 /* libPods-AnimatableExplorer-AnimatableExplorerTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AnimatableExplorer-AnimatableExplorerTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 3B4392A12AC88292D35C810B /* Pods-AnimatableExplorer.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AnimatableExplorer.debug.xcconfig"; path = "Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer.debug.xcconfig"; sourceTree = ""; }; 5709B34CF0A7D63546082F79 /* Pods-AnimatableExplorer.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AnimatableExplorer.release.xcconfig"; path = "Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer.release.xcconfig"; sourceTree = ""; }; 5B7EB9410499542E8C5724F5 /* Pods-AnimatableExplorer-AnimatableExplorerTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AnimatableExplorer-AnimatableExplorerTests.debug.xcconfig"; path = "Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests.debug.xcconfig"; sourceTree = ""; }; 5DCACB8F33CDC322A6C60F78 /* libPods-AnimatableExplorer.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AnimatableExplorer.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = AnimatableExplorer/LaunchScreen.storyboard; sourceTree = ""; }; 89C6BE57DB24E9ADA2F236DE /* Pods-AnimatableExplorer-AnimatableExplorerTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AnimatableExplorer-AnimatableExplorerTests.release.xcconfig"; path = "Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests.release.xcconfig"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ 00E356EB1AD99517003FC87E /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( 7699B88040F8A987B510C191 /* libPods-AnimatableExplorer-AnimatableExplorerTests.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( 0C80B921A6F3F58F76C31292 /* libPods-AnimatableExplorer.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ 00E356EF1AD99517003FC87E /* AnimatableExplorerTests */ = { isa = PBXGroup; children = ( 00E356F21AD99517003FC87E /* AnimatableExplorerTests.m */, 00E356F01AD99517003FC87E /* Supporting Files */, ); path = AnimatableExplorerTests; sourceTree = ""; }; 00E356F01AD99517003FC87E /* Supporting Files */ = { isa = PBXGroup; children = ( 00E356F11AD99517003FC87E /* Info.plist */, ); name = "Supporting Files"; sourceTree = ""; }; 13B07FAE1A68108700A75B9A /* AnimatableExplorer */ = { isa = PBXGroup; children = ( 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 13B07FB51A68108700A75B9A /* Images.xcassets */, 13B07FB61A68108700A75B9A /* Info.plist */, 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 13B07FB71A68108700A75B9A /* main.m */, ); name = AnimatableExplorer; sourceTree = ""; }; 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { isa = PBXGroup; children = ( ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 5DCACB8F33CDC322A6C60F78 /* libPods-AnimatableExplorer.a */, 19F6CBCC0A4E27FBF8BF4A61 /* libPods-AnimatableExplorer-AnimatableExplorerTests.a */, ); name = Frameworks; sourceTree = ""; }; 832341AE1AAA6A7D00B99B32 /* Libraries */ = { isa = PBXGroup; children = ( ); name = Libraries; sourceTree = ""; }; 83CBB9F61A601CBA00E9B192 = { isa = PBXGroup; children = ( 13B07FAE1A68108700A75B9A /* AnimatableExplorer */, 832341AE1AAA6A7D00B99B32 /* Libraries */, 00E356EF1AD99517003FC87E /* AnimatableExplorerTests */, 83CBBA001A601CBA00E9B192 /* Products */, 2D16E6871FA4F8E400B85C8A /* Frameworks */, BBD78D7AC51CEA395F1C20DB /* Pods */, ); indentWidth = 2; sourceTree = ""; tabWidth = 2; usesTabs = 0; }; 83CBBA001A601CBA00E9B192 /* Products */ = { isa = PBXGroup; children = ( 13B07F961A680F5B00A75B9A /* AnimatableExplorer.app */, 00E356EE1AD99517003FC87E /* AnimatableExplorerTests.xctest */, ); name = Products; sourceTree = ""; }; BBD78D7AC51CEA395F1C20DB /* Pods */ = { isa = PBXGroup; children = ( 3B4392A12AC88292D35C810B /* Pods-AnimatableExplorer.debug.xcconfig */, 5709B34CF0A7D63546082F79 /* Pods-AnimatableExplorer.release.xcconfig */, 5B7EB9410499542E8C5724F5 /* Pods-AnimatableExplorer-AnimatableExplorerTests.debug.xcconfig */, 89C6BE57DB24E9ADA2F236DE /* Pods-AnimatableExplorer-AnimatableExplorerTests.release.xcconfig */, ); path = Pods; sourceTree = ""; }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ 00E356ED1AD99517003FC87E /* AnimatableExplorerTests */ = { isa = PBXNativeTarget; buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "AnimatableExplorerTests" */; buildPhases = ( A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 00E356EA1AD99517003FC87E /* Sources */, 00E356EB1AD99517003FC87E /* Frameworks */, 00E356EC1AD99517003FC87E /* Resources */, C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, ); buildRules = ( ); dependencies = ( 00E356F51AD99517003FC87E /* PBXTargetDependency */, ); name = AnimatableExplorerTests; productName = AnimatableExplorerTests; productReference = 00E356EE1AD99517003FC87E /* AnimatableExplorerTests.xctest */; productType = "com.apple.product-type.bundle.unit-test"; }; 13B07F861A680F5B00A75B9A /* AnimatableExplorer */ = { isa = PBXNativeTarget; buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "AnimatableExplorer" */; buildPhases = ( C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, FD10A7F022414F080027D42C /* Start Packager */, 13B07F871A680F5B00A75B9A /* Sources */, 13B07F8C1A680F5B00A75B9A /* Frameworks */, 13B07F8E1A680F5B00A75B9A /* Resources */, 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, ); buildRules = ( ); dependencies = ( ); name = AnimatableExplorer; productName = AnimatableExplorer; productReference = 13B07F961A680F5B00A75B9A /* AnimatableExplorer.app */; productType = "com.apple.product-type.application"; }; /* End PBXNativeTarget section */ /* Begin PBXProject section */ 83CBB9F71A601CBA00E9B192 /* Project object */ = { isa = PBXProject; attributes = { LastUpgradeCheck = 1210; TargetAttributes = { 00E356ED1AD99517003FC87E = { CreatedOnToolsVersion = 6.2; TestTargetID = 13B07F861A680F5B00A75B9A; }; 13B07F861A680F5B00A75B9A = { LastSwiftMigration = 1120; }; }; }; buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "AnimatableExplorer" */; compatibilityVersion = "Xcode 12.0"; developmentRegion = en; hasScannedForEncodings = 0; knownRegions = ( en, Base, ); mainGroup = 83CBB9F61A601CBA00E9B192; productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; projectDirPath = ""; projectRoot = ""; targets = ( 13B07F861A680F5B00A75B9A /* AnimatableExplorer */, 00E356ED1AD99517003FC87E /* AnimatableExplorerTests */, ); }; /* End PBXProject section */ /* Begin PBXResourcesBuildPhase section */ 00E356EC1AD99517003FC87E /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F8E1A680F5B00A75B9A /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( "$(SRCROOT)/.xcode.env.local", "$(SRCROOT)/.xcode.env", ); name = "Bundle React Native code and images"; outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; }; 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( "${PODS_PODFILE_DIR_PATH}/Podfile.lock", "${PODS_ROOT}/Manifest.lock", ); name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( ); outputPaths = ( "$(DERIVED_FILE_DIR)/Pods-AnimatableExplorer-AnimatableExplorerTests-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( "${PODS_PODFILE_DIR_PATH}/Podfile.lock", "${PODS_ROOT}/Manifest.lock", ); name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( ); outputPaths = ( "$(DERIVED_FILE_DIR)/Pods-AnimatableExplorer-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-resources-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Copy Pods Resources"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-resources-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer/Pods-AnimatableExplorer-resources.sh\"\n"; showEnvVarsInLog = 0; }; F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-resources-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Copy Pods Resources"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-resources-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AnimatableExplorer-AnimatableExplorerTests/Pods-AnimatableExplorer-AnimatableExplorerTests-resources.sh\"\n"; showEnvVarsInLog = 0; }; FD10A7F022414F080027D42C /* Start Packager */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( ); name = "Start Packager"; outputFileListPaths = ( ); outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ /* Begin PBXSourcesBuildPhase section */ 00E356EA1AD99517003FC87E /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 00E356F31AD99517003FC87E /* AnimatableExplorerTests.m in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F871A680F5B00A75B9A /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 13B07FC11A68108700A75B9A /* main.m in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXSourcesBuildPhase section */ /* Begin PBXTargetDependency section */ 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { isa = PBXTargetDependency; target = 13B07F861A680F5B00A75B9A /* AnimatableExplorer */; targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; }; /* End PBXTargetDependency section */ /* Begin XCBuildConfiguration section */ 00E356F61AD99517003FC87E /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-AnimatableExplorer-AnimatableExplorerTests.debug.xcconfig */; buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", ); INFOPLIST_FILE = AnimatableExplorerTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", "@loader_path/Frameworks", ); OTHER_LDFLAGS = ( "-ObjC", "-lc++", "$(inherited)", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AnimatableExplorer.app/AnimatableExplorer"; }; name = Debug; }; 00E356F71AD99517003FC87E /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-AnimatableExplorer-AnimatableExplorerTests.release.xcconfig */; buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; COPY_PHASE_STRIP = NO; INFOPLIST_FILE = AnimatableExplorerTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", "@loader_path/Frameworks", ); OTHER_LDFLAGS = ( "-ObjC", "-lc++", "$(inherited)", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AnimatableExplorer.app/AnimatableExplorer"; }; name = Release; }; 13B07F941A680F5B00A75B9A /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-AnimatableExplorer.debug.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; ENABLE_BITCODE = NO; INFOPLIST_FILE = AnimatableExplorer/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); MARKETING_VERSION = 1.0; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", "-lc++", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = AnimatableExplorer; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; }; 13B07F951A680F5B00A75B9A /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-AnimatableExplorer.release.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; INFOPLIST_FILE = AnimatableExplorer/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); MARKETING_VERSION = 1.0; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", "-lc++", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = AnimatableExplorer; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; }; 83CBBA201A601CBA00E9B192 /* Debug */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_NO_COMMON_BLOCKS = YES; GCC_OPTIMIZATION_LEVEL = 0; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, ); GCC_SYMBOLS_PRIVATE_EXTERN = NO; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( /usr/lib/swift, "$(inherited)", ); LIBRARY_SEARCH_PATHS = ( "\"$(SDKROOT)/usr/lib/swift\"", "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); OTHER_LDFLAGS = ( "$(inherited)", "-Wl", "-ld_classic", ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; name = Debug; }; 83CBBA211A601CBA00E9B192 /* Release */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = YES; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; GCC_PREPROCESSOR_DEFINITIONS = ( "$(inherited)", _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, ); GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( /usr/lib/swift, "$(inherited)", ); LIBRARY_SEARCH_PATHS = ( "\"$(SDKROOT)/usr/lib/swift\"", "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = NO; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); OTHER_LDFLAGS = ( "$(inherited)", "-Wl", "-ld_classic", ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES; }; name = Release; }; /* End XCBuildConfiguration section */ /* Begin XCConfigurationList section */ 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "AnimatableExplorerTests" */ = { isa = XCConfigurationList; buildConfigurations = ( 00E356F61AD99517003FC87E /* Debug */, 00E356F71AD99517003FC87E /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "AnimatableExplorer" */ = { isa = XCConfigurationList; buildConfigurations = ( 13B07F941A680F5B00A75B9A /* Debug */, 13B07F951A680F5B00A75B9A /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "AnimatableExplorer" */ = { isa = XCConfigurationList; buildConfigurations = ( 83CBBA201A601CBA00E9B192 /* Debug */, 83CBBA211A601CBA00E9B192 /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; /* End XCConfigurationList section */ }; rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; } ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer.xcodeproj/xcshareddata/xcschemes/AnimatableExplorer.xcscheme ================================================ ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer.xcworkspace/contents.xcworkspacedata ================================================ ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorer.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorerTests/AnimatableExplorerTests.m ================================================ #import #import #import #import #define TIMEOUT_SECONDS 600 #define TEXT_TO_LOOK_FOR @"Welcome to React" @interface AnimatableExplorerTests : XCTestCase @end @implementation AnimatableExplorerTests - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test { if (test(view)) { return YES; } for (UIView *subview in [view subviews]) { if ([self findSubviewInView:subview matching:test]) { return YES; } } return NO; } - (void)testRendersWelcomeScreen { UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; BOOL foundElement = NO; __block NSString *redboxError = nil; #ifdef DEBUG RCTSetLogFunction( ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { if (level >= RCTLogLevelError) { redboxError = message; } }); #endif while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { return YES; } return NO; }]; } #ifdef DEBUG RCTSetLogFunction(RCTDefaultLogFunction); #endif XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); } @end ================================================ FILE: Examples/AnimatableExplorer/ios/AnimatableExplorerTests/Info.plist ================================================ CFBundleDevelopmentRegion en CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName $(PRODUCT_NAME) CFBundlePackageType BNDL CFBundleShortVersionString 1.0 CFBundleSignature ???? CFBundleVersion 1 ================================================ FILE: Examples/AnimatableExplorer/ios/Podfile ================================================ # Resolve react_native_pods.rb with node to allow for hoisting require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, min_ios_version_supported prepare_react_native_project! # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded # # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` # ```js # module.exports = { # dependencies: { # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), # ``` flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'AnimatableExplorer' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() use_react_native!( :path => config[:reactNativePath], # Hermes is now enabled by default. Disable by setting this flag to false. :hermes_enabled => flags[:hermes_enabled], :fabric_enabled => flags[:fabric_enabled], # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. :flipper_configuration => flipper_config, # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'AnimatableExplorerTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false ) __apply_Xcode_12_5_M1_post_install_workaround(installer) end end ================================================ FILE: Examples/AnimatableExplorer/jest.config.js ================================================ module.exports = { preset: 'react-native', }; ================================================ FILE: Examples/AnimatableExplorer/metro.config.js ================================================ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); /** * Metro configuration * https://facebook.github.io/metro/docs/configuration * * @type {import('metro-config').MetroConfig} */ const config = {}; module.exports = mergeConfig(getDefaultConfig(__dirname), config); ================================================ FILE: Examples/AnimatableExplorer/package.json ================================================ { "name": "AnimatableExplorer", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "postinstall": "DESTINATION='node_modules/react-native-animatable' LIB_FILE=`cd ../.. && echo \\`pwd\\`/\\`npm pack\\`` && (rm -rf $DESTINATION || true) && mkdir $DESTINATION && tar -xvzf $LIB_FILE -C $DESTINATION --strip-components 1 && rm $LIB_FILE", "test": "jest" }, "dependencies": { "@react-native-community/slider": "^4.4.3", "react": "18.2.0", "react-native": "0.72.6", "react-native-animatable": "*" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } } ================================================ FILE: Examples/AnimatableExplorer/tsconfig.json ================================================ { "extends": "@tsconfig/react-native/tsconfig.json" } ================================================ FILE: Examples/MakeItRain/.bundle/config ================================================ BUNDLE_PATH: "vendor/bundle" BUNDLE_FORCE_RUBY_PLATFORM: 1 ================================================ FILE: Examples/MakeItRain/.eslintrc.js ================================================ module.exports = { root: true, extends: '@react-native', }; ================================================ FILE: Examples/MakeItRain/.gitignore ================================================ # OSX # .DS_Store # Xcode # build/ *.pbxuser !default.pbxuser *.mode1v3 !default.mode1v3 *.mode2v3 !default.mode2v3 *.perspectivev3 !default.perspectivev3 xcuserdata *.xccheckout *.moved-aside DerivedData *.hmap *.ipa *.xcuserstate ios/.xcode.env.local # Android/IntelliJ # build/ .idea .gradle local.properties *.iml *.hprof .cxx/ *.keystore !debug.keystore # node.js # node_modules/ npm-debug.log yarn-error.log # fastlane # # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the # screenshots whenever they are needed. # For more information about the recommended setup visit: # https://docs.fastlane.tools/best-practices/source-control/ **/fastlane/report.xml **/fastlane/Preview.html **/fastlane/screenshots **/fastlane/test_output # Bundle artifact *.jsbundle # Ruby / CocoaPods /ios/Pods/ /vendor/bundle/ # Temporary files created by Metro to check the health of the file watcher .metro-health-check* # testing /coverage ================================================ FILE: Examples/MakeItRain/.prettierrc.js ================================================ module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', }; ================================================ FILE: Examples/MakeItRain/.watchmanconfig ================================================ {} ================================================ FILE: Examples/MakeItRain/App.js ================================================ import React from 'react'; import {Dimensions, ImageBackground} from 'react-native'; import * as Animatable from 'react-native-animatable'; import erlich from './assets/erlich.png'; import moneyFront from './assets/money-front.png'; import moneyBack from './assets/money-back.png'; const MONEY_DIMENSIONS = {width: 49, height: 26}; const SCREEN_DIMENSIONS = Dimensions.get('window'); const WIGGLE_ROOM = 50; const FlippingImage = ({ back = false, delay, duration = 1000, source, style = {}, }) => ( ); const Swinging = ({ amplitude, rotation = 7, delay, duration = 700, children, }) => ( {children} ); const Falling = ({duration, delay, style, children}) => ( Math.pow(t, 1.7)} iterationCount="infinite" useNativeDriver style={style}> {children} ); const ErlichBachman = ({children}) => ( {children} ); const randomize = max => Math.random() * max; const range = count => { const array = []; for (let i = 0; i < count; i++) { array.push(i); } return array; }; const MakeItRain = ({count = 15, duration = 3000}) => ( {range(count) .map(i => randomize(1000)) .map((flipDelay, i) => ( ))} ); export default MakeItRain; ================================================ FILE: Examples/MakeItRain/Gemfile ================================================ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version ruby ">= 2.6.10" gem 'cocoapods', '~> 1.13' gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' ================================================ FILE: Examples/MakeItRain/README.md ================================================ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). # Getting Started >**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. ## Step 1: Start the Metro Server First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. To start Metro, run the following command from the _root_ of your React Native project: ```bash # using npm npm start # OR using Yarn yarn start ``` ## Step 2: Start your Application Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: ### For Android ```bash # using npm npm run android # OR using Yarn yarn android ``` ### For iOS ```bash # using npm npm run ios # OR using Yarn yarn ios ``` If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. ## Step 3: Modifying your App Now that you have successfully run the app, let's modify it. 1. Open `App.tsx` in your text editor of choice and edit some lines. 2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! ## Congratulations! :tada: You've successfully run and modified your React Native App. :partying_face: ### Now what? - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). # Troubleshooting If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. # Learn More To learn more about React Native, take a look at the following resources: - [React Native Website](https://reactnative.dev) - learn more about React Native. - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. ================================================ FILE: Examples/MakeItRain/__tests__/App.test.tsx ================================================ /** * @format */ import 'react-native'; import React from 'react'; import App from '../App'; // Note: import explicitly to use the types shiped with jest. import {it} from '@jest/globals'; // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer'; it('renders correctly', () => { renderer.create(); }); ================================================ FILE: Examples/MakeItRain/android/app/build.gradle ================================================ apply plugin: "com.android.application" apply plugin: "com.facebook.react" /** * This is the configuration block to customize your React Native Android app. * By default you don't need to apply any configuration, just uncomment the lines you need. */ react { /* Folders */ // The root of your project, i.e. where "package.json" lives. Default is '..' // root = file("../") // The folder where the react-native NPM package is. Default is ../node_modules/react-native // reactNativeDir = file("../node_modules/react-native") // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen // codegenDir = file("../node_modules/@react-native/codegen") // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js // cliFile = file("../node_modules/react-native/cli.js") /* Variants */ // The list of variants to that are debuggable. For those we're going to // skip the bundling of the JS bundle and the assets. By default is just 'debug'. // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. // debuggableVariants = ["liteDebug", "prodDebug"] /* Bundling */ // A list containing the node command and its flags. Default is just 'node'. // nodeExecutableAndArgs = ["node"] // // The command to run when bundling. By default is 'bundle' // bundleCommand = "ram-bundle" // // The path to the CLI configuration file. Default is empty. // bundleConfig = file(../rn-cli.config.js) // // The name of the generated asset file containing your JS bundle // bundleAssetName = "MyApplication.android.bundle" // // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' // entryFile = file("../js/MyApplication.android.js") // // A list of extra flags to pass to the 'bundle' commands. // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle // extraPackagerArgs = [] /* Hermes Commands */ // The hermes compiler command to run. By default it is 'hermesc' // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" // // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" // hermesFlags = ["-O", "-output-source-map"] } /** * Set this to true to Run Proguard on Release builds to minify the Java bytecode. */ def enableProguardInReleaseBuilds = false /** * The preferred build flavor of JavaScriptCore (JSC) * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+' android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion namespace "com.makeitrain" defaultConfig { applicationId "com.makeitrain" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution! In production, you need to generate your own keystore file. // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } } dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.squareup.okhttp3', module:'okhttp' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor } } apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) ================================================ FILE: Examples/MakeItRain/android/app/proguard-rules.pro ================================================ # Add project specific ProGuard rules here. # By default, the flags in this file are appended to flags specified # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt # You can edit the include path and order by changing the proguardFiles # directive in build.gradle. # # For more details, see # http://developer.android.com/guide/developing/tools/proguard.html # Add any project specific keep options here: ================================================ FILE: Examples/MakeItRain/android/app/src/debug/AndroidManifest.xml ================================================ ================================================ FILE: Examples/MakeItRain/android/app/src/debug/java/com/makeitrain/ReactNativeFlipper.java ================================================ /** * Copyright (c) Meta Platforms, Inc. and affiliates. * *

This source code is licensed under the MIT license found in the LICENSE file in the root * directory of this source tree. */ package com.makeitrain; import android.content.Context; import com.facebook.flipper.android.AndroidFlipperClient; import com.facebook.flipper.android.utils.FlipperUtils; import com.facebook.flipper.core.FlipperClient; import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; import com.facebook.flipper.plugins.inspector.DescriptorMapping; import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; import com.facebook.react.ReactInstanceEventListener; import com.facebook.react.ReactInstanceManager; import com.facebook.react.bridge.ReactContext; import com.facebook.react.modules.network.NetworkingModule; import okhttp3.OkHttpClient; /** * Class responsible of loading Flipper inside your React Native application. This is the debug * flavor of it. Here you can add your own plugins and customize the Flipper setup. */ public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { if (FlipperUtils.shouldEnableFlipper(context)) { final FlipperClient client = AndroidFlipperClient.getInstance(context); client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); client.addPlugin(new DatabasesFlipperPlugin(context)); client.addPlugin(new SharedPreferencesFlipperPlugin(context)); client.addPlugin(CrashReporterPlugin.getInstance()); NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } }); client.addPlugin(networkFlipperPlugin); client.start(); // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized // Hence we run if after all native modules have been initialized ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); if (reactContext == null) { reactInstanceManager.addReactInstanceEventListener( new ReactInstanceEventListener() { @Override public void onReactContextInitialized(ReactContext reactContext) { reactInstanceManager.removeReactInstanceEventListener(this); reactContext.runOnNativeModulesQueueThread( new Runnable() { @Override public void run() { client.addPlugin(new FrescoFlipperPlugin()); } }); } }); } else { client.addPlugin(new FrescoFlipperPlugin()); } } } } ================================================ FILE: Examples/MakeItRain/android/app/src/main/AndroidManifest.xml ================================================ ================================================ FILE: Examples/MakeItRain/android/app/src/main/java/com/makeitrain/MainActivity.java ================================================ package com.makeitrain; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; import com.facebook.react.defaults.DefaultReactActivityDelegate; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "MakeItRain"; } /** * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React * (aka React 18) with two boolean flags. */ @Override protected ReactActivityDelegate createReactActivityDelegate() { return new DefaultReactActivityDelegate( this, getMainComponentName(), // If you opted-in for the New Architecture, we enable the Fabric Renderer. DefaultNewArchitectureEntryPoint.getFabricEnabled()); } } ================================================ FILE: Examples/MakeItRain/android/app/src/main/java/com/makeitrain/MainApplication.java ================================================ package com.makeitrain; import android.app.Application; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; import com.facebook.react.defaults.DefaultReactNativeHost; import com.facebook.soloader.SoLoader; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } @Override protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; } @Override protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { // If you opted-in for the New Architecture, we load the native entry point for this app. DefaultNewArchitectureEntryPoint.load(); } ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } } ================================================ FILE: Examples/MakeItRain/android/app/src/main/res/drawable/rn_edit_text_material.xml ================================================ ================================================ FILE: Examples/MakeItRain/android/app/src/main/res/values/strings.xml ================================================ MakeItRain ================================================ FILE: Examples/MakeItRain/android/app/src/main/res/values/styles.xml ================================================ ================================================ FILE: Examples/MakeItRain/android/app/src/release/java/com/makeitrain/ReactNativeFlipper.java ================================================ /** * Copyright (c) Meta Platforms, Inc. and affiliates. * *

This source code is licensed under the MIT license found in the LICENSE file in the root * directory of this source tree. */ package com.makeitrain; import android.content.Context; import com.facebook.react.ReactInstanceManager; /** * Class responsible of loading Flipper inside your React Native application. This is the release * flavor of it so it's empty as we don't want to load Flipper. */ public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { // Do nothing as we don't want to initialize Flipper on Release. } } ================================================ FILE: Examples/MakeItRain/android/build.gradle ================================================ // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") } } ================================================ FILE: Examples/MakeItRain/android/gradle/wrapper/gradle-wrapper.properties ================================================ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip networkTimeout=10000 zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists ================================================ FILE: Examples/MakeItRain/android/gradle.properties ================================================ # Project-wide Gradle settings. # IDE (e.g. Android Studio) users: # Gradle settings configured through the IDE *will override* # any settings specified in this file. # For more details on how to configure your build environment visit # http://www.gradle.org/docs/current/userguide/build_environment.html # Specifies the JVM arguments used for the daemon process. # The setting is particularly useful for tweaking memory settings. # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m # When configured, Gradle will run in incubating parallel mode. # This option should only be used with decoupled projects. More details, visit # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects # org.gradle.parallel=true # AndroidX package structure to make it clearer which packages are bundled with the # Android operating system, and which are packaged with your app's APK # https://developer.android.com/topic/libraries/support-library/androidx-rn android.useAndroidX=true # Automatically convert third-party libraries to use AndroidX android.enableJetifier=true # Version of flipper SDK to use with React Native FLIPPER_VERSION=0.182.0 # Use this property to specify which architecture you want to build. # You can also override it from the CLI using # ./gradlew -PreactNativeArchitectures=x86_64 reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 # Use this property to enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=false # Use this property to enable or disable the Hermes JS engine. # If set to false, you will be using JSC instead. hermesEnabled=true ================================================ FILE: Examples/MakeItRain/android/gradlew ================================================ #!/bin/sh # # Copyright © 2015-2021 the original authors. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # https://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. # ############################################################################## # # Gradle start up script for POSIX generated by Gradle. # # Important for running: # # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is # noncompliant, but you have some other compliant shell such as ksh or # bash, then to run this script, type that shell name before the whole # command line, like: # # ksh Gradle # # Busybox and similar reduced shells will NOT work, because this script # requires all of these POSIX shell features: # * functions; # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», # «${var#prefix}», «${var%suffix}», and «$( cmd )»; # * compound commands having a testable exit status, especially «case»; # * various built-in commands including «command», «set», and «ulimit». # # Important for patching: # # (2) This script targets any POSIX shell, so it avoids extensions provided # by Bash, Ksh, etc; in particular arrays are avoided. # # The "traditional" practice of packing multiple parameters into a # space-separated string is a well documented source of bugs and security # problems, so this is (mostly) avoided, by progressively accumulating # options in "$@", and eventually passing that to Java. # # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; # see the in-line comments for details. # # There are tweaks for specific operating systems such as AIX, CygWin, # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. # ############################################################################## # Attempt to set APP_HOME # Resolve links: $0 may be a link app_path=$0 # Need this for daisy-chained symlinks. while APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path [ -h "$app_path" ] do ls=$( ls -ld "$app_path" ) link=${ls#*' -> '} case $link in #( /*) app_path=$link ;; #( *) app_path=$APP_HOME$link ;; esac done # This is normally unused # shellcheck disable=SC2034 APP_BASE_NAME=${0##*/} APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum warn () { echo "$*" } >&2 die () { echo echo "$*" echo exit 1 } >&2 # OS specific support (must be 'true' or 'false'). cygwin=false msys=false darwin=false nonstop=false case "$( uname )" in #( CYGWIN* ) cygwin=true ;; #( Darwin* ) darwin=true ;; #( MSYS* | MINGW* ) msys=true ;; #( NONSTOP* ) nonstop=true ;; esac CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar # Determine the Java command to use to start the JVM. if [ -n "$JAVA_HOME" ] ; then if [ -x "$JAVA_HOME/jre/sh/java" ] ; then # IBM's JDK on AIX uses strange locations for the executables JAVACMD=$JAVA_HOME/jre/sh/java else JAVACMD=$JAVA_HOME/bin/java fi if [ ! -x "$JAVACMD" ] ; then die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME Please set the JAVA_HOME variable in your environment to match the location of your Java installation." fi else JAVACMD=java which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. Please set the JAVA_HOME variable in your environment to match the location of your Java installation." fi # Increase the maximum file descriptors if we can. if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then case $MAX_FD in #( max*) # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. # shellcheck disable=SC3045 MAX_FD=$( ulimit -H -n ) || warn "Could not query maximum file descriptor limit" esac case $MAX_FD in #( '' | soft) :;; #( *) # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. # shellcheck disable=SC3045 ulimit -n "$MAX_FD" || warn "Could not set maximum file descriptor limit to $MAX_FD" esac fi # Collect all arguments for the java command, stacking in reverse order: # * args from the command line # * the main class name # * -classpath # * -D...appname settings # * --module-path (only if needed) # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. # For Cygwin or MSYS, switch paths to Windows format before running java if "$cygwin" || "$msys" ; then APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) JAVACMD=$( cygpath --unix "$JAVACMD" ) # Now convert the arguments - kludge to limit ourselves to /bin/sh for arg do if case $arg in #( -*) false ;; # don't mess with options #( /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath [ -e "$t" ] ;; #( *) false ;; esac then arg=$( cygpath --path --ignore --mixed "$arg" ) fi # Roll the args list around exactly as many times as the number of # args, so each arg winds up back in the position where it started, but # possibly modified. # # NB: a `for` loop captures its iteration list before it begins, so # changing the positional parameters here affects neither the number of # iterations, nor the values presented in `arg`. shift # remove old arg set -- "$@" "$arg" # push replacement arg done fi # Collect all arguments for the java command; # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of # shell script including quotes and variable substitutions, so put them in # double quotes to make sure that they get re-expanded; and # * put everything else in single quotes, so that it's not re-expanded. set -- \ "-Dorg.gradle.appname=$APP_BASE_NAME" \ -classpath "$CLASSPATH" \ org.gradle.wrapper.GradleWrapperMain \ "$@" # Stop when "xargs" is not available. if ! command -v xargs >/dev/null 2>&1 then die "xargs is not available" fi # Use "xargs" to parse quoted args. # # With -n1 it outputs one arg per line, with the quotes and backslashes removed. # # In Bash we could simply go: # # readarray ARGS < <( xargs -n1 <<<"$var" ) && # set -- "${ARGS[@]}" "$@" # # but POSIX shell has neither arrays nor command substitution, so instead we # post-process each arg (as a line of input to sed) to backslash-escape any # character that might be a shell metacharacter, then use eval to reverse # that process (while maintaining the separation between arguments), and wrap # the whole thing up as a single "set" statement. # # This will of course break if any of these variables contains a newline or # an unmatched quote. # eval "set -- $( printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | xargs -n1 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | tr '\n' ' ' )" '"$@"' exec "$JAVACMD" "$@" ================================================ FILE: Examples/MakeItRain/android/gradlew.bat ================================================ @rem @rem Copyright 2015 the original author or authors. @rem @rem Licensed under the Apache License, Version 2.0 (the "License"); @rem you may not use this file except in compliance with the License. @rem You may obtain a copy of the License at @rem @rem https://www.apache.org/licenses/LICENSE-2.0 @rem @rem Unless required by applicable law or agreed to in writing, software @rem distributed under the License is distributed on an "AS IS" BASIS, @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @rem See the License for the specific language governing permissions and @rem limitations under the License. @rem @if "%DEBUG%"=="" @echo off @rem ########################################################################## @rem @rem Gradle startup script for Windows @rem @rem ########################################################################## @rem Set local scope for the variables with windows NT shell if "%OS%"=="Windows_NT" setlocal set DIRNAME=%~dp0 if "%DIRNAME%"=="" set DIRNAME=. @rem This is normally unused set APP_BASE_NAME=%~n0 set APP_HOME=%DIRNAME% @rem Resolve any "." and ".." in APP_HOME to make it shorter. for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" @rem Find java.exe if defined JAVA_HOME goto findJavaFromJavaHome set JAVA_EXE=java.exe %JAVA_EXE% -version >NUL 2>&1 if %ERRORLEVEL% equ 0 goto execute echo. echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. echo. echo Please set the JAVA_HOME variable in your environment to match the echo location of your Java installation. goto fail :findJavaFromJavaHome set JAVA_HOME=%JAVA_HOME:"=% set JAVA_EXE=%JAVA_HOME%/bin/java.exe if exist "%JAVA_EXE%" goto execute echo. echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% echo. echo Please set the JAVA_HOME variable in your environment to match the echo location of your Java installation. goto fail :execute @rem Setup the command line set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar @rem Execute Gradle "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* :end @rem End local scope for the variables with windows NT shell if %ERRORLEVEL% equ 0 goto mainEnd :fail rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of rem the _cmd.exe /c_ return code! set EXIT_CODE=%ERRORLEVEL% if %EXIT_CODE% equ 0 set EXIT_CODE=1 if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% exit /b %EXIT_CODE% :mainEnd if "%OS%"=="Windows_NT" endlocal :omega ================================================ FILE: Examples/MakeItRain/android/settings.gradle ================================================ rootProject.name = 'MakeItRain' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') ================================================ FILE: Examples/MakeItRain/app.json ================================================ { "name": "MakeItRain", "displayName": "MakeItRain" } ================================================ FILE: Examples/MakeItRain/babel.config.js ================================================ module.exports = { presets: ['module:metro-react-native-babel-preset'], }; ================================================ FILE: Examples/MakeItRain/index.js ================================================ /** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); ================================================ FILE: Examples/MakeItRain/ios/.xcode.env ================================================ # This `.xcode.env` file is versioned and is used to source the environment # used when running script phases inside Xcode. # To customize your local environment, you can create an `.xcode.env.local` # file that is not versioned. # NODE_BINARY variable contains the PATH to the node executable. # # Customize the NODE_BINARY variable here. # For example, to use nvm with brew, add the following line # . "$(brew --prefix nvm)/nvm.sh" --no-use export NODE_BINARY=$(command -v node) ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/AppDelegate.h ================================================ #import #import @interface AppDelegate : RCTAppDelegate @end ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/AppDelegate.mm ================================================ #import "AppDelegate.h" #import @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.moduleName = @"MakeItRain"; // You can add your custom initial props in the dictionary below. // They will be passed down to the ViewController used by React Native. self.initialProps = @{}; return [super application:application didFinishLaunchingWithOptions:launchOptions]; } - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif } @end ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/Images.xcassets/AppIcon.appiconset/Contents.json ================================================ { "images" : [ { "idiom" : "iphone", "scale" : "2x", "size" : "20x20" }, { "idiom" : "iphone", "scale" : "3x", "size" : "20x20" }, { "idiom" : "iphone", "scale" : "2x", "size" : "29x29" }, { "idiom" : "iphone", "scale" : "3x", "size" : "29x29" }, { "idiom" : "iphone", "scale" : "2x", "size" : "40x40" }, { "idiom" : "iphone", "scale" : "3x", "size" : "40x40" }, { "idiom" : "iphone", "scale" : "2x", "size" : "60x60" }, { "idiom" : "iphone", "scale" : "3x", "size" : "60x60" }, { "idiom" : "ios-marketing", "scale" : "1x", "size" : "1024x1024" } ], "info" : { "author" : "xcode", "version" : 1 } } ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/Images.xcassets/Contents.json ================================================ { "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/Info.plist ================================================ CFBundleDevelopmentRegion en CFBundleDisplayName MakeItRain CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName $(PRODUCT_NAME) CFBundlePackageType APPL CFBundleShortVersionString $(MARKETING_VERSION) CFBundleSignature ???? CFBundleVersion $(CURRENT_PROJECT_VERSION) LSRequiresIPhoneOS NSAppTransportSecurity NSExceptionDomains localhost NSExceptionAllowsInsecureHTTPLoads NSLocationWhenInUseUsageDescription UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities armv7 UISupportedInterfaceOrientations UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIViewControllerBasedStatusBarAppearance ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/LaunchScreen.storyboard ================================================ ================================================ FILE: Examples/MakeItRain/ios/MakeItRain/main.m ================================================ #import #import "AppDelegate.h" int main(int argc, char *argv[]) { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); } } ================================================ FILE: Examples/MakeItRain/ios/MakeItRain.xcodeproj/project.pbxproj ================================================ // !$*UTF8*$! { archiveVersion = 1; classes = { }; objectVersion = 54; objects = { /* Begin PBXBuildFile section */ 00E356F31AD99517003FC87E /* MakeItRainTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* MakeItRainTests.m */; }; 0C80B921A6F3F58F76C31292 /* libPods-MakeItRain.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-MakeItRain.a */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 7699B88040F8A987B510C191 /* libPods-MakeItRain-MakeItRainTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-MakeItRain-MakeItRainTests.a */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; proxyType = 1; remoteGlobalIDString = 13B07F861A680F5B00A75B9A; remoteInfo = MakeItRain; }; /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ 00E356EE1AD99517003FC87E /* MakeItRainTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = MakeItRainTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 00E356F21AD99517003FC87E /* MakeItRainTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = MakeItRainTests.m; sourceTree = ""; }; 13B07F961A680F5B00A75B9A /* MakeItRain.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MakeItRain.app; sourceTree = BUILT_PRODUCTS_DIR; }; 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = MakeItRain/AppDelegate.h; sourceTree = ""; }; 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = MakeItRain/AppDelegate.mm; sourceTree = ""; }; 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = MakeItRain/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = MakeItRain/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = MakeItRain/main.m; sourceTree = ""; }; 19F6CBCC0A4E27FBF8BF4A61 /* libPods-MakeItRain-MakeItRainTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MakeItRain-MakeItRainTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 3B4392A12AC88292D35C810B /* Pods-MakeItRain.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MakeItRain.debug.xcconfig"; path = "Target Support Files/Pods-MakeItRain/Pods-MakeItRain.debug.xcconfig"; sourceTree = ""; }; 5709B34CF0A7D63546082F79 /* Pods-MakeItRain.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MakeItRain.release.xcconfig"; path = "Target Support Files/Pods-MakeItRain/Pods-MakeItRain.release.xcconfig"; sourceTree = ""; }; 5B7EB9410499542E8C5724F5 /* Pods-MakeItRain-MakeItRainTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MakeItRain-MakeItRainTests.debug.xcconfig"; path = "Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests.debug.xcconfig"; sourceTree = ""; }; 5DCACB8F33CDC322A6C60F78 /* libPods-MakeItRain.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MakeItRain.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = MakeItRain/LaunchScreen.storyboard; sourceTree = ""; }; 89C6BE57DB24E9ADA2F236DE /* Pods-MakeItRain-MakeItRainTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MakeItRain-MakeItRainTests.release.xcconfig"; path = "Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests.release.xcconfig"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ 00E356EB1AD99517003FC87E /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( 7699B88040F8A987B510C191 /* libPods-MakeItRain-MakeItRainTests.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( 0C80B921A6F3F58F76C31292 /* libPods-MakeItRain.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ 00E356EF1AD99517003FC87E /* MakeItRainTests */ = { isa = PBXGroup; children = ( 00E356F21AD99517003FC87E /* MakeItRainTests.m */, 00E356F01AD99517003FC87E /* Supporting Files */, ); path = MakeItRainTests; sourceTree = ""; }; 00E356F01AD99517003FC87E /* Supporting Files */ = { isa = PBXGroup; children = ( 00E356F11AD99517003FC87E /* Info.plist */, ); name = "Supporting Files"; sourceTree = ""; }; 13B07FAE1A68108700A75B9A /* MakeItRain */ = { isa = PBXGroup; children = ( 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 13B07FB51A68108700A75B9A /* Images.xcassets */, 13B07FB61A68108700A75B9A /* Info.plist */, 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 13B07FB71A68108700A75B9A /* main.m */, ); name = MakeItRain; sourceTree = ""; }; 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { isa = PBXGroup; children = ( ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 5DCACB8F33CDC322A6C60F78 /* libPods-MakeItRain.a */, 19F6CBCC0A4E27FBF8BF4A61 /* libPods-MakeItRain-MakeItRainTests.a */, ); name = Frameworks; sourceTree = ""; }; 832341AE1AAA6A7D00B99B32 /* Libraries */ = { isa = PBXGroup; children = ( ); name = Libraries; sourceTree = ""; }; 83CBB9F61A601CBA00E9B192 = { isa = PBXGroup; children = ( 13B07FAE1A68108700A75B9A /* MakeItRain */, 832341AE1AAA6A7D00B99B32 /* Libraries */, 00E356EF1AD99517003FC87E /* MakeItRainTests */, 83CBBA001A601CBA00E9B192 /* Products */, 2D16E6871FA4F8E400B85C8A /* Frameworks */, BBD78D7AC51CEA395F1C20DB /* Pods */, ); indentWidth = 2; sourceTree = ""; tabWidth = 2; usesTabs = 0; }; 83CBBA001A601CBA00E9B192 /* Products */ = { isa = PBXGroup; children = ( 13B07F961A680F5B00A75B9A /* MakeItRain.app */, 00E356EE1AD99517003FC87E /* MakeItRainTests.xctest */, ); name = Products; sourceTree = ""; }; BBD78D7AC51CEA395F1C20DB /* Pods */ = { isa = PBXGroup; children = ( 3B4392A12AC88292D35C810B /* Pods-MakeItRain.debug.xcconfig */, 5709B34CF0A7D63546082F79 /* Pods-MakeItRain.release.xcconfig */, 5B7EB9410499542E8C5724F5 /* Pods-MakeItRain-MakeItRainTests.debug.xcconfig */, 89C6BE57DB24E9ADA2F236DE /* Pods-MakeItRain-MakeItRainTests.release.xcconfig */, ); path = Pods; sourceTree = ""; }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ 00E356ED1AD99517003FC87E /* MakeItRainTests */ = { isa = PBXNativeTarget; buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "MakeItRainTests" */; buildPhases = ( A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 00E356EA1AD99517003FC87E /* Sources */, 00E356EB1AD99517003FC87E /* Frameworks */, 00E356EC1AD99517003FC87E /* Resources */, C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, ); buildRules = ( ); dependencies = ( 00E356F51AD99517003FC87E /* PBXTargetDependency */, ); name = MakeItRainTests; productName = MakeItRainTests; productReference = 00E356EE1AD99517003FC87E /* MakeItRainTests.xctest */; productType = "com.apple.product-type.bundle.unit-test"; }; 13B07F861A680F5B00A75B9A /* MakeItRain */ = { isa = PBXNativeTarget; buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "MakeItRain" */; buildPhases = ( C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, FD10A7F022414F080027D42C /* Start Packager */, 13B07F871A680F5B00A75B9A /* Sources */, 13B07F8C1A680F5B00A75B9A /* Frameworks */, 13B07F8E1A680F5B00A75B9A /* Resources */, 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, ); buildRules = ( ); dependencies = ( ); name = MakeItRain; productName = MakeItRain; productReference = 13B07F961A680F5B00A75B9A /* MakeItRain.app */; productType = "com.apple.product-type.application"; }; /* End PBXNativeTarget section */ /* Begin PBXProject section */ 83CBB9F71A601CBA00E9B192 /* Project object */ = { isa = PBXProject; attributes = { LastUpgradeCheck = 1210; TargetAttributes = { 00E356ED1AD99517003FC87E = { CreatedOnToolsVersion = 6.2; TestTargetID = 13B07F861A680F5B00A75B9A; }; 13B07F861A680F5B00A75B9A = { LastSwiftMigration = 1120; }; }; }; buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "MakeItRain" */; compatibilityVersion = "Xcode 12.0"; developmentRegion = en; hasScannedForEncodings = 0; knownRegions = ( en, Base, ); mainGroup = 83CBB9F61A601CBA00E9B192; productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; projectDirPath = ""; projectRoot = ""; targets = ( 13B07F861A680F5B00A75B9A /* MakeItRain */, 00E356ED1AD99517003FC87E /* MakeItRainTests */, ); }; /* End PBXProject section */ /* Begin PBXResourcesBuildPhase section */ 00E356EC1AD99517003FC87E /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F8E1A680F5B00A75B9A /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( "$(SRCROOT)/.xcode.env.local", "$(SRCROOT)/.xcode.env", ); name = "Bundle React Native code and images"; outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; }; 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( "${PODS_PODFILE_DIR_PATH}/Podfile.lock", "${PODS_ROOT}/Manifest.lock", ); name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( ); outputPaths = ( "$(DERIVED_FILE_DIR)/Pods-MakeItRain-MakeItRainTests-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( "${PODS_PODFILE_DIR_PATH}/Podfile.lock", "${PODS_ROOT}/Manifest.lock", ); name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( ); outputPaths = ( "$(DERIVED_FILE_DIR)/Pods-MakeItRain-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-resources-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Copy Pods Resources"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-resources-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-MakeItRain/Pods-MakeItRain-resources.sh\"\n"; showEnvVarsInLog = 0; }; F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-resources-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Copy Pods Resources"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-resources-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-MakeItRain-MakeItRainTests/Pods-MakeItRain-MakeItRainTests-resources.sh\"\n"; showEnvVarsInLog = 0; }; FD10A7F022414F080027D42C /* Start Packager */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( ); name = "Start Packager"; outputFileListPaths = ( ); outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ /* Begin PBXSourcesBuildPhase section */ 00E356EA1AD99517003FC87E /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 00E356F31AD99517003FC87E /* MakeItRainTests.m in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; 13B07F871A680F5B00A75B9A /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 13B07FC11A68108700A75B9A /* main.m in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXSourcesBuildPhase section */ /* Begin PBXTargetDependency section */ 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { isa = PBXTargetDependency; target = 13B07F861A680F5B00A75B9A /* MakeItRain */; targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; }; /* End PBXTargetDependency section */ /* Begin XCBuildConfiguration section */ 00E356F61AD99517003FC87E /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-MakeItRain-MakeItRainTests.debug.xcconfig */; buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", ); INFOPLIST_FILE = MakeItRainTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", "@loader_path/Frameworks", ); OTHER_LDFLAGS = ( "-ObjC", "-lc++", "$(inherited)", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/MakeItRain.app/MakeItRain"; }; name = Debug; }; 00E356F71AD99517003FC87E /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-MakeItRain-MakeItRainTests.release.xcconfig */; buildSettings = { BUNDLE_LOADER = "$(TEST_HOST)"; COPY_PHASE_STRIP = NO; INFOPLIST_FILE = MakeItRainTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", "@loader_path/Frameworks", ); OTHER_LDFLAGS = ( "-ObjC", "-lc++", "$(inherited)", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/MakeItRain.app/MakeItRain"; }; name = Release; }; 13B07F941A680F5B00A75B9A /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-MakeItRain.debug.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; ENABLE_BITCODE = NO; INFOPLIST_FILE = MakeItRain/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); MARKETING_VERSION = 1.0; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", "-lc++", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = MakeItRain; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; }; 13B07F951A680F5B00A75B9A /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-MakeItRain.release.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; INFOPLIST_FILE = MakeItRain/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); MARKETING_VERSION = 1.0; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", "-lc++", ); PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = MakeItRain; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; }; 83CBBA201A601CBA00E9B192 /* Debug */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_NO_COMMON_BLOCKS = YES; GCC_OPTIMIZATION_LEVEL = 0; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, ); GCC_SYMBOLS_PRIVATE_EXTERN = NO; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( /usr/lib/swift, "$(inherited)", ); LIBRARY_SEARCH_PATHS = ( "\"$(SDKROOT)/usr/lib/swift\"", "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); OTHER_LDFLAGS = ( "$(inherited)", "-Wl", "-ld_classic", ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; name = Debug; }; 83CBBA211A601CBA00E9B192 /* Release */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; CLANG_CXX_LANGUAGE_STANDARD = "c++17"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = YES; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; GCC_PREPROCESSOR_DEFINITIONS = ( "$(inherited)", _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, ); GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 12.4; LD_RUNPATH_SEARCH_PATHS = ( /usr/lib/swift, "$(inherited)", ); LIBRARY_SEARCH_PATHS = ( "\"$(SDKROOT)/usr/lib/swift\"", "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = NO; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = ( "$(OTHER_CFLAGS)", "-DFOLLY_NO_CONFIG", "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); OTHER_LDFLAGS = ( "$(inherited)", "-Wl", "-ld_classic", ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES; }; name = Release; }; /* End XCBuildConfiguration section */ /* Begin XCConfigurationList section */ 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "MakeItRainTests" */ = { isa = XCConfigurationList; buildConfigurations = ( 00E356F61AD99517003FC87E /* Debug */, 00E356F71AD99517003FC87E /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "MakeItRain" */ = { isa = XCConfigurationList; buildConfigurations = ( 13B07F941A680F5B00A75B9A /* Debug */, 13B07F951A680F5B00A75B9A /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "MakeItRain" */ = { isa = XCConfigurationList; buildConfigurations = ( 83CBBA201A601CBA00E9B192 /* Debug */, 83CBBA211A601CBA00E9B192 /* Release */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; /* End XCConfigurationList section */ }; rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; } ================================================ FILE: Examples/MakeItRain/ios/MakeItRain.xcodeproj/xcshareddata/xcschemes/MakeItRain.xcscheme ================================================ ================================================ FILE: Examples/MakeItRain/ios/MakeItRain.xcworkspace/contents.xcworkspacedata ================================================ ================================================ FILE: Examples/MakeItRain/ios/MakeItRain.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: Examples/MakeItRain/ios/MakeItRainTests/Info.plist ================================================ CFBundleDevelopmentRegion en CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName $(PRODUCT_NAME) CFBundlePackageType BNDL CFBundleShortVersionString 1.0 CFBundleSignature ???? CFBundleVersion 1 ================================================ FILE: Examples/MakeItRain/ios/MakeItRainTests/MakeItRainTests.m ================================================ #import #import #import #import #define TIMEOUT_SECONDS 600 #define TEXT_TO_LOOK_FOR @"Welcome to React" @interface MakeItRainTests : XCTestCase @end @implementation MakeItRainTests - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test { if (test(view)) { return YES; } for (UIView *subview in [view subviews]) { if ([self findSubviewInView:subview matching:test]) { return YES; } } return NO; } - (void)testRendersWelcomeScreen { UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; BOOL foundElement = NO; __block NSString *redboxError = nil; #ifdef DEBUG RCTSetLogFunction( ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { if (level >= RCTLogLevelError) { redboxError = message; } }); #endif while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { return YES; } return NO; }]; } #ifdef DEBUG RCTSetLogFunction(RCTDefaultLogFunction); #endif XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); } @end ================================================ FILE: Examples/MakeItRain/ios/Podfile ================================================ # Resolve react_native_pods.rb with node to allow for hoisting require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, min_ios_version_supported prepare_react_native_project! # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded # # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` # ```js # module.exports = { # dependencies: { # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), # ``` flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'MakeItRain' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() use_react_native!( :path => config[:reactNativePath], # Hermes is now enabled by default. Disable by setting this flag to false. :hermes_enabled => flags[:hermes_enabled], :fabric_enabled => flags[:fabric_enabled], # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. :flipper_configuration => flipper_config, # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'MakeItRainTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false ) __apply_Xcode_12_5_M1_post_install_workaround(installer) end end ================================================ FILE: Examples/MakeItRain/jest.config.js ================================================ module.exports = { preset: 'react-native', }; ================================================ FILE: Examples/MakeItRain/metro.config.js ================================================ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); /** * Metro configuration * https://facebook.github.io/metro/docs/configuration * * @type {import('metro-config').MetroConfig} */ const config = {}; module.exports = mergeConfig(getDefaultConfig(__dirname), config); ================================================ FILE: Examples/MakeItRain/package.json ================================================ { "name": "MakeItRain", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "postinstall": "DESTINATION='node_modules/react-native-animatable' LIB_FILE=`cd ../.. && echo \\`pwd\\`/\\`npm pack\\`` && (rm -rf $DESTINATION || true) && mkdir $DESTINATION && tar -xvzf $LIB_FILE -C $DESTINATION --strip-components 1 && rm $LIB_FILE", "start": "react-native start", "test": "jest" }, "dependencies": { "react": "18.2.0", "react-native": "0.72.6", "react-native-animatable": "*" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } } ================================================ FILE: Examples/MakeItRain/tsconfig.json ================================================ { "extends": "@tsconfig/react-native/tsconfig.json" } ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2015 Joel Arvidsson Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # react-native-animatable Declarative transitions and animations for React Native [![Tests](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml/badge.svg)](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml) [![npm](https://img.shields.io/npm/v/react-native-animatable.svg)](https://npmjs.com/package/react-native-animatable) [![npm](https://img.shields.io/npm/dm/react-native-animatable.svg)](https://npmjs.com/package/react-native-animatable) ## Installation `$ npm install react-native-animatable --save` ## Usage To animate things you must use the `createAnimatableComponent` composer similar to the `Animated.createAnimatedComponent`. The common components `View`, `Text` and `Image` are precomposed and exposed under the `Animatable` namespace. If you have your own component that you wish to animate, simply wrap it with a `Animatable.View` or compose it with: ```js import * as Animatable from 'react-native-animatable'; MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); ``` ### Declarative Usage #### Animations ```html Zoom me up, Scotty ``` #### Looping To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. ```html Up and down you go ❤️ ``` ![Animatable looping demo](https://cloud.githubusercontent.com/assets/378279/10716023/9f4a6670-7b00-11e5-944c-d52a1dcf0884.gif) #### Generic transitions You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. *Note: If you are using colors, please use `rgba()` syntax.* *Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.* ```html this.setState({fontSize: (this.state.fontSize || 10) + 5 })}> Size me up, Scotty ``` #### Properties *Note: Other properties will be passed down to underlying component.* | Prop | Description | Default | |---|---|---| |**`animation`**|Name of the animation, see below for available animations. |*None*| |**`duration`**|For how long the animation will run (milliseconds). |`1000`| |**`delay`**|Optionally delay animation (milliseconds). |`0`| |**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`| |**`easing`**|Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. |`ease`| |**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`| |**`iterationDelay`**|For how long to pause between animation iterations (milliseconds). |`0`| |**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. |*None*| |**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*| |**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*| |**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*| |**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*| |**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |`false`| |**`isInteraction`**|Whether or not this animation creates an "interaction handle" on the InteractionManager. |`false` if `iterationCount` is less than or equal to one| ### Imperative Usage #### Animations All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. ```js import * as Animatable from 'react-native-animatable'; class ExampleView extends Component { handleViewRef = ref => this.view = ref; bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')); render() { return ( Bounce me! ); } } ``` To stop any ongoing animations, just invoke `stopAnimation()` on that element. You can also animate imperatively by using the `animate()` function on the element for custom animations, for example: ``` this.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } }); ``` #### Generic transitions ##### `transition(fromValues, toValues[[, duration], easing])` Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. ##### `transitionTo(toValues[[, duration], easing])` This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. ```js import * as Animatable from 'react-native-animatable'; class ExampleView extends Component { handleTextRef = ref => this.text = ref; render() { return ( this.text.transitionTo({ opacity: 0.2 })}> Fade me! ); } } ``` ## Custom Animations Animations can be referred to by a global name or a definition object. ### Animation Definition Schema An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. A simple fade in animation: ```js const fadeIn = { from: { opacity: 0, }, to: { opacity: 1, }, }; ``` ```html Fade me in ``` Combining multiple styles to create a zoom out animation: ```js const zoomOut = { 0: { opacity: 1, scale: 1, }, 0.5: { opacity: 1, scale: 0.3, }, 1: { opacity: 0, scale: 0, }, }; ``` ```html Zoom me out ``` To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. ```js Animatable.initializeRegistryWithDefinitions({ myFancyAnimation: { from: { ... }, to: { ... }, } }); ``` ## React Europe Talk [![18922912_1935104760082516_4717918248927023870_o](https://user-images.githubusercontent.com/378279/36341201-fd11e80c-13ea-11e8-8585-ab1d0c5ae27d.jpg)](https://www.youtube.com/watch?v=3SITFIGz4xo) The talk __*A Novel Approach to Declarative Animations in React Native*__ from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). ## `MakeItRain` example See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. [![MakeItRain Example](https://user-images.githubusercontent.com/378279/36341976-06326ad6-13f7-11e8-8fe1-ab947bbea5c8.gif)](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) ## `AnimatableExplorer` example See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more. ![Animatable Explorer](https://user-images.githubusercontent.com/378279/36341974-f697e5d8-13f6-11e8-8e2a-21d8c2a4b340.gif) ## Animations Animations are heavily inspired by [Animated.css](https://daneden.github.io/animate.css/). ### Attention Seekers ![animatable-attention](https://cloud.githubusercontent.com/assets/378279/10590307/ef73b1ba-767d-11e5-8fb9-9779d3a53a50.gif) * `bounce` * `flash` * `jello` * `pulse` * `rotate` * `rubberBand` * `shake` * `swing` * `tada` * `wobble` ### Bouncing Entrances ![animatable-bouncein](https://cloud.githubusercontent.com/assets/378279/10590306/ef572bbc-767d-11e5-8440-8e61d401537a.gif) * `bounceIn` * `bounceInDown` * `bounceInUp` * `bounceInLeft` * `bounceInRight` ### Bouncing Exits ![animatable-bounceout](https://cloud.githubusercontent.com/assets/378279/10590305/ef56e4cc-767d-11e5-9562-6cd3210faf34.gif) * `bounceOut` * `bounceOutDown` * `bounceOutUp` * `bounceOutLeft` * `bounceOutRight` ### Fading Entrances ![animatable-fadein](https://cloud.githubusercontent.com/assets/378279/10590304/ef4f09b4-767d-11e5-9a43-06e97e8ee2c1.gif) * `fadeIn` * `fadeInDown` * `fadeInDownBig` * `fadeInUp` * `fadeInUpBig` * `fadeInLeft` * `fadeInLeftBig` * `fadeInRight` * `fadeInRightBig` ### Fading Exits ![animatable-fadeout](https://cloud.githubusercontent.com/assets/378279/10590303/ef3e9598-767d-11e5-83bc-bd48d6017131.gif) * `fadeOut` * `fadeOutDown` * `fadeOutDownBig` * `fadeOutUp` * `fadeOutUpBig` * `fadeOutLeft` * `fadeOutLeftBig` * `fadeOutRight` * `fadeOutRightBig` ### Flippers ![animatable-flip](https://cloud.githubusercontent.com/assets/378279/10590296/ef3076ca-767d-11e5-9f62-6b9c696dad51.gif) * `flipInX` * `flipInY` * `flipOutX` * `flipOutY` ### Lightspeed ![animatable-lightspeed](https://cloud.githubusercontent.com/assets/378279/10590301/ef374c8e-767d-11e5-83ad-b249d2731f43.gif) * `lightSpeedIn` * `lightSpeedOut` ### Sliding Entrances ![animatable-slidein](https://cloud.githubusercontent.com/assets/378279/10590300/ef36dfe2-767d-11e5-932b-1cccce78087b.gif) * `slideInDown` * `slideInUp` * `slideInLeft` * `slideInRight` ### Sliding Exits ![animatable-slideout](https://cloud.githubusercontent.com/assets/378279/10590299/ef35a3ca-767d-11e5-94e0-441fd49b6444.gif) * `slideOutDown` * `slideOutUp` * `slideOutLeft` * `slideOutRight` ### Zooming Entrances ![animatable-zoomin](https://cloud.githubusercontent.com/assets/378279/10590302/ef37d438-767d-11e5-8480-a212e21c2192.gif) * `zoomIn` * `zoomInDown` * `zoomInUp` * `zoomInLeft` * `zoomInRight` ### Zooming Exits ![animatable-zoomout](https://cloud.githubusercontent.com/assets/378279/10590298/ef33fa52-767d-11e5-80fe-6b8dbb5e53d0.gif) * `zoomOut` * `zoomOutDown` * `zoomOutUp` * `zoomOutLeft` * `zoomOutRight` ## [Changelog](https://github.com/oblador/react-native-animatable/releases) ## License [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015 ================================================ FILE: __tests__/createAnimation.js ================================================ /* eslint-env jest */ import createAnimation from '../createAnimation'; describe('createAnimation', () => { it('should support from and to keys', () => { expect( createAnimation({ from: { opacity: 0, }, to: { opacity: 1, }, }), ).toEqual({ opacity: { inputRange: [0, 1], outputRange: [0, 1], }, }); }); it('should support fraction keyframes', () => { expect( createAnimation({ 0: { opacity: 0, }, 1: { opacity: 1, }, }), ).toEqual({ opacity: { inputRange: [0, 1], outputRange: [0, 1], }, }); }); it('should throw if only one keyframe is defined', () => { expect(() => createAnimation({ from: { opacity: 1, }, }), ).toThrow('Animation definitions must have at least two values.'); }); it('should throw if one keyframe is invalid', () => { expect(() => createAnimation({ unparsed: 0.1, to: { opacity: 1, }, }), ).toThrow('Animation definitions must have at least two values.'); }); it('should support and flatten transform values', () => { expect( createAnimation({ from: { transform: [ { translateY: 0, }, ], }, to: { transform: [ { translateY: 10, }, ], }, }), ).toEqual({ translateY: { inputRange: [0, 1], outputRange: [0, 10], }, }); }); it('should support and multiple properties with different keyframes', () => { expect( createAnimation({ 0: { transform: [ { scale: 0, }, ], opacity: 0, }, 0.8: { transform: [ { scale: 1, }, ], }, 1: { opacity: 1, }, }), ).toEqual({ scale: { inputRange: [0, 0.8], outputRange: [0, 1], }, opacity: { inputRange: [0, 1], outputRange: [0, 1], }, }); }); it('should return value from cache', () => { const definition = { from: { opacity: 0, }, to: { opacity: 1, }, }; const firstAnimation = createAnimation(definition); const secondAnimation = createAnimation(definition); expect(secondAnimation).toBe(firstAnimation); }); }); ================================================ FILE: __tests__/getDefaultStyleValue.js ================================================ /* eslint-env jest */ import getDefaultStyleValue from '../getDefaultStyleValue'; describe('getDefaultStyleValue', () => { it('should return 0deg for skew and rotate keys', () => { expect(getDefaultStyleValue('skewX')).toEqual('0deg'); expect(getDefaultStyleValue('skewY')).toEqual('0deg'); expect(getDefaultStyleValue('rotateX')).toEqual('0deg'); expect(getDefaultStyleValue('rotateY')).toEqual('0deg'); }); it('should fallback to general margins', () => { expect(getDefaultStyleValue('marginTop', { margin: 10 })).toEqual(10); expect(getDefaultStyleValue('marginTop', { marginVertical: 10 })).toEqual( 10, ); expect(getDefaultStyleValue('marginLeft', { margin: 10 })).toEqual(10); expect(getDefaultStyleValue('marginLeft', { marginVertical: 10 })).toEqual( 0, ); expect(getDefaultStyleValue('marginHorizontal', { margin: 10 })).toEqual( 10, ); }); it('should fallback to general paddings', () => { expect(getDefaultStyleValue('paddingTop', { padding: 10 })).toEqual(10); expect(getDefaultStyleValue('paddingTop', { paddingVertical: 10 })).toEqual( 10, ); expect(getDefaultStyleValue('paddingLeft', { padding: 10 })).toEqual(10); expect( getDefaultStyleValue('paddingLeft', { paddingVertical: 10 }), ).toEqual(0); expect(getDefaultStyleValue('paddingHorizontal', { padding: 10 })).toEqual( 10, ); }); }); ================================================ FILE: babel.config.js ================================================ module.exports = { presets: ['module:metro-react-native-babel-preset'], }; ================================================ FILE: createAnimatableComponent.js ================================================ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Animated, Easing } from 'react-native'; import wrapStyleTransforms from './wrapStyleTransforms'; import getStyleValues from './getStyleValues'; import flattenStyle from './flattenStyle'; import createAnimation from './createAnimation'; import { getAnimationByName, getAnimationNames } from './registry'; import EASING_FUNCTIONS from './easing'; // These styles are not number based and thus needs to be interpolated const INTERPOLATION_STYLE_PROPERTIES = [ // Transform styles 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'transformMatrix', // View styles 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'shadowColor', // Text styles 'color', 'textDecorationColor', // Image styles 'tintColor', ]; const ZERO_CLAMPED_STYLE_PROPERTIES = ['width', 'height']; // Create a copy of `source` without `keys` function omit(keys, source) { const filtered = {}; Object.keys(source).forEach((key) => { if (keys.indexOf(key) === -1) { filtered[key] = source[key]; } }); return filtered; } // Yes it's absurd, but actually fast function deepEquals(a, b) { return a === b || JSON.stringify(a) === JSON.stringify(b); } // Determine to what value the animation should tween to function getAnimationTarget(iteration, direction) { switch (direction) { case 'reverse': return 0; case 'alternate': return iteration % 2 ? 0 : 1; case 'alternate-reverse': return iteration % 2 ? 1 : 0; case 'normal': default: return 1; } } // Like getAnimationTarget but opposite function getAnimationOrigin(iteration, direction) { return getAnimationTarget(iteration, direction) ? 0 : 1; } function getCompiledAnimation(animation) { if (typeof animation === 'string') { const compiledAnimation = getAnimationByName(animation); if (!compiledAnimation) { throw new Error(`No animation registred by the name of ${animation}`); } return compiledAnimation; } return createAnimation(animation); } function makeInterpolatedStyle(compiledAnimation, animationValue) { const style = {}; Object.keys(compiledAnimation).forEach((key) => { if (key === 'style') { Object.assign(style, compiledAnimation.style); } else if (key !== 'easing') { style[key] = animationValue.interpolate(compiledAnimation[key]); } }); return wrapStyleTransforms(style); } function transitionToValue( property, transitionValue, toValue, duration, easing, useNativeDriver = false, delay, onTransitionBegin, onTransitionEnd, ) { const animation = duration || easing || delay ? Animated.timing(transitionValue, { toValue, delay, duration: duration || 1000, easing: typeof easing === 'function' ? easing : EASING_FUNCTIONS[easing || 'ease'], useNativeDriver, }) : Animated.spring(transitionValue, { toValue, useNativeDriver }); setTimeout(() => onTransitionBegin(property), delay); animation.start(() => onTransitionEnd(property)); } // Make (almost) any component animatable, similar to Animated.createAnimatedComponent export default function createAnimatableComponent(WrappedComponent) { const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; const Animatable = Animated.createAnimatedComponent(WrappedComponent); return class AnimatableComponent extends Component { static displayName = `withAnimatable(${wrappedComponentName})`; static propTypes = { animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), duration: PropTypes.number, direction: PropTypes.oneOf([ 'normal', 'reverse', 'alternate', 'alternate-reverse', ]), delay: PropTypes.number, easing: PropTypes.oneOfType([ PropTypes.oneOf(Object.keys(EASING_FUNCTIONS)), PropTypes.func, ]), iterationCount(props, propName) { const val = props[propName]; if (val !== 'infinite' && !(typeof val === 'number' && val >= 1)) { return new Error( 'iterationCount must be a positive number or "infinite"', ); } return null; }, iterationDelay: PropTypes.number, onAnimationBegin: PropTypes.func, onAnimationEnd: PropTypes.func, onTransitionBegin: PropTypes.func, onTransitionEnd: PropTypes.func, style: PropTypes.oneOfType([ PropTypes.number, PropTypes.array, PropTypes.object, ]), transition: PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string), ]), useNativeDriver: PropTypes.bool, isInteraction: PropTypes.bool, }; static defaultProps = { animation: undefined, delay: 0, direction: 'normal', duration: undefined, easing: undefined, iterationCount: 1, iterationDelay: 0, onAnimationBegin() {}, onAnimationEnd() {}, onTransitionBegin() {}, onTransitionEnd() {}, style: undefined, transition: undefined, useNativeDriver: false, isInteraction: undefined, }; constructor(props) { super(props); const animationValue = new Animated.Value( getAnimationOrigin(0, this.props.direction), ); let animationStyle = {}; let compiledAnimation = {}; if (props.animation) { compiledAnimation = getCompiledAnimation(props.animation); animationStyle = makeInterpolatedStyle( compiledAnimation, animationValue, ); } this.state = { animationValue, animationStyle, compiledAnimation, transitionStyle: {}, transitionValues: {}, currentTransitionValues: {}, }; if (props.transition) { this.state = { ...this.state, ...this.initializeTransitionState(props.transition), }; } this.delayTimer = null; // Alias registered animations for backwards compatibility getAnimationNames().forEach((animationName) => { if (!(animationName in this)) { this[animationName] = this.animate.bind(this, animationName); } }); } initializeTransitionState(transitionKeys) { const transitionValues = {}; const styleValues = {}; const currentTransitionValues = getStyleValues( transitionKeys, this.props.style, ); Object.keys(currentTransitionValues).forEach((key) => { const value = currentTransitionValues[key]; if ( INTERPOLATION_STYLE_PROPERTIES.indexOf(key) !== -1 || typeof value !== 'number' ) { transitionValues[key] = new Animated.Value(0); styleValues[key] = value; } else { const animationValue = new Animated.Value(value); transitionValues[key] = animationValue; styleValues[key] = animationValue; } }); return { currentTransitionValues, transitionStyle: styleValues, transitionValues, }; } getTransitionState(keys) { const transitionKeys = typeof keys === 'string' ? [keys] : keys; let { transitionValues, currentTransitionValues, transitionStyle } = this.state; const missingKeys = transitionKeys.filter( (key) => !this.state.transitionValues[key], ); if (missingKeys.length) { const transitionState = this.initializeTransitionState(missingKeys); transitionValues = { ...transitionValues, ...transitionState.transitionValues, }; currentTransitionValues = { ...currentTransitionValues, ...transitionState.currentTransitionValues, }; transitionStyle = { ...transitionStyle, ...transitionState.transitionStyle, }; } return { transitionValues, currentTransitionValues, transitionStyle }; } ref = null; handleRef = (ref) => { this.ref = ref; }; setNativeProps(nativeProps) { if (this.ref) { this.ref.setNativeProps(nativeProps); } } componentDidMount() { const { animation, duration, delay, onAnimationBegin, iterationDelay } = this.props; if (animation) { const startAnimation = () => { onAnimationBegin(); this.startAnimation(duration, 0, iterationDelay, (endState) => this.props.onAnimationEnd(endState), ); this.delayTimer = null; }; if (delay) { this.delayTimer = setTimeout(startAnimation, delay); } else { startAnimation(); } } } // eslint-disable-next-line camelcase UNSAFE_componentWillReceiveProps(props) { const { animation, delay, duration, easing, iterationDelay, transition, onAnimationBegin, } = props; if (transition) { const values = getStyleValues(transition, props.style); this.transitionTo(values, duration, easing, delay); } else if (!deepEquals(animation, this.props.animation)) { if (animation) { if (this.delayTimer) { this.setAnimation(animation); } else { onAnimationBegin(); this.animate(animation, duration, iterationDelay).then((endState) => this.props.onAnimationEnd(endState), ); } } else { this.stopAnimation(); } } } componentWillUnmount() { if (this.delayTimer) { clearTimeout(this.delayTimer); } } setAnimation(animation, callback) { const compiledAnimation = getCompiledAnimation(animation); this.setState( (state) => ({ animationStyle: makeInterpolatedStyle( compiledAnimation, state.animationValue, ), compiledAnimation, }), callback, ); } animate(animation, duration, iterationDelay) { return new Promise((resolve) => { this.setAnimation(animation, () => { this.startAnimation(duration, 0, iterationDelay, resolve); }); }); } stopAnimation() { this.setState({ scheduledAnimation: false, animationStyle: {}, }); this.state.animationValue.stopAnimation(); if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; } } startAnimation(duration, iteration, iterationDelay, callback) { const { animationValue, compiledAnimation } = this.state; const { direction, iterationCount, useNativeDriver, isInteraction } = this.props; let easing = this.props.easing || compiledAnimation.easing || 'ease'; let currentIteration = iteration || 0; const fromValue = getAnimationOrigin(currentIteration, direction); const toValue = getAnimationTarget(currentIteration, direction); animationValue.setValue(fromValue); if (typeof easing === 'string') { easing = EASING_FUNCTIONS[easing]; } // Reverse easing if on the way back const reversed = direction === 'reverse' || (direction === 'alternate' && !toValue) || (direction === 'alternate-reverse' && !toValue); if (reversed) { easing = Easing.out(easing); } const config = { toValue, easing, isInteraction: typeof isInteraction !== 'undefined' ? isInteraction : iterationCount <= 1, duration: duration || this.props.duration || 1000, useNativeDriver, delay: (iterationDelay && currentIteration > 0) ? iterationDelay : 0, }; Animated.timing(animationValue, config).start((endState) => { currentIteration += 1; if ( endState.finished && this.props.animation && (iterationCount === 'infinite' || currentIteration < iterationCount) ) { this.startAnimation( duration, currentIteration, iterationDelay, callback, ); } else if (callback) { callback(endState); } }); } transition(fromValues, toValues, duration, easing) { const fromValuesFlat = flattenStyle(fromValues); const toValuesFlat = flattenStyle(toValues); const transitionKeys = Object.keys(toValuesFlat); const { transitionValues, currentTransitionValues, transitionStyle } = this.getTransitionState(transitionKeys); transitionKeys.forEach((property) => { const fromValue = fromValuesFlat[property]; const toValue = toValuesFlat[property]; let transitionValue = transitionValues[property]; if (!transitionValue) { transitionValue = new Animated.Value(0); } const needsInterpolation = INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1 || typeof value !== 'number'; const needsZeroClamping = ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1; if (needsInterpolation) { transitionValue.setValue(0); transitionStyle[property] = transitionValue.interpolate({ inputRange: [0, 1], outputRange: [fromValue, toValue], }); currentTransitionValues[property] = toValue; toValuesFlat[property] = 1; } else { if (needsZeroClamping) { transitionStyle[property] = transitionValue.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolateLeft: 'clamp', }); currentTransitionValues[property] = toValue; } else { transitionStyle[property] = transitionValue; } transitionValue.setValue(fromValue); } }); this.setState( { transitionValues, transitionStyle, currentTransitionValues }, () => { this.transitionToValues( toValuesFlat, duration || this.props.duration, easing, this.props.delay, ); }, ); } transitionTo(toValues, duration, easing, delay) { const { currentTransitionValues } = this.state; const toValuesFlat = flattenStyle(toValues); const transitions = { from: {}, to: {}, }; Object.keys(toValuesFlat).forEach((property) => { const toValue = toValuesFlat[property]; const needsInterpolation = INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1 || typeof value !== 'number'; const needsZeroClamping = ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1; const transitionStyle = this.state.transitionStyle[property]; const transitionValue = this.state.transitionValues[property]; if ( !needsInterpolation && !needsZeroClamping && transitionStyle && transitionStyle === transitionValue ) { transitionToValue( property, transitionValue, toValue, duration, easing, this.props.useNativeDriver, delay, (prop) => this.props.onTransitionBegin(prop), (prop) => this.props.onTransitionEnd(prop), ); } else { let currentTransitionValue = currentTransitionValues[property]; if ( typeof currentTransitionValue === 'undefined' && this.props.style ) { const style = getStyleValues(property, this.props.style); currentTransitionValue = style[property]; } transitions.from[property] = currentTransitionValue; transitions.to[property] = toValue; } }); if (Object.keys(transitions.from).length) { this.transition(transitions.from, transitions.to, duration, easing); } } transitionToValues(toValues, duration, easing, delay) { Object.keys(toValues).forEach((property) => { const transitionValue = this.state.transitionValues[property]; const toValue = toValues[property]; transitionToValue( property, transitionValue, toValue, duration, easing, this.props.useNativeDriver, delay, (prop) => this.props.onTransitionBegin(prop), (prop) => this.props.onTransitionEnd(prop), ); }); } render() { const { style, animation, transition } = this.props; if (animation && transition) { throw new Error('You cannot combine animation and transition props'); } const restProps = omit( [ 'animation', 'duration', 'direction', 'delay', 'easing', 'iterationCount', 'iterationDelay', 'onAnimationBegin', 'onAnimationEnd', 'onTransitionBegin', 'onTransitionEnd', 'style', 'transition', 'useNativeDriver', 'isInteraction', ], this.props, ); return ( ); } }; } ================================================ FILE: createAnimation.js ================================================ import flattenStyle from './flattenStyle'; function compareNumbers(a, b) { return a - b; } function notNull(value) { return value !== null; } function parsePosition(value) { if (value === 'from') { return 0; } if (value === 'to') { return 1; } const parsed = parseFloat(value, 10); if (Number.isNaN(parsed) || parsed < 0 || parsed > 1) { return null; } return parsed; } const cache = {}; export default function createAnimation(definition) { const cacheKey = JSON.stringify(definition); if (cache[cacheKey]) { return cache[cacheKey]; } const positions = Object.keys(definition).map(parsePosition).filter(notNull); positions.sort(compareNumbers); if (positions.length < 2) { throw new Error('Animation definitions must have at least two values.'); } const compiled = {}; if (definition.easing) { compiled.easing = definition.easing; } if (definition.style) { compiled.style = definition.style; } for (let i = 0; i < positions.length; i += 1) { const position = positions[i]; let keyframe = definition[position]; if (!keyframe) { if (position === 0) { keyframe = definition.from; } else if (position === 1) { keyframe = definition.to; } } if (!keyframe) { throw new Error('Missing animation keyframe, this should not happen'); } keyframe = flattenStyle(keyframe); Object.keys(keyframe).forEach((key) => { if (!(key in compiled)) { compiled[key] = { inputRange: [], outputRange: [], }; } compiled[key].inputRange.push(position); compiled[key].outputRange.push(keyframe[key]); }); } cache[cacheKey] = compiled; return compiled; } ================================================ FILE: definitions/attention-seekers.js ================================================ export const bounce = { 0: { translateY: 0, }, 0.2: { translateY: 0, }, 0.4: { translateY: -30, }, 0.43: { translateY: -30, }, 0.53: { translateY: 0, }, 0.7: { translateY: -15, }, 0.8: { translateY: 0, }, 0.9: { translateY: -4, }, 1: { translateY: 0, }, }; export const flash = { 0: { opacity: 1, }, 0.25: { opacity: 0, }, 0.5: { opacity: 1, }, 0.75: { opacity: 0, }, 1: { opacity: 1, }, }; export const jello = { 0: { skewX: '0deg', skewY: '0deg', }, 0.111: { skewX: '0deg', skewY: '0deg', }, 0.222: { skewX: '-12.5deg', skewY: '-12.5deg', }, 0.333: { skewX: '6.25deg', skewY: '6.25deg', }, 0.444: { skewX: '-3.125deg', skewY: '-3.125deg', }, 0.555: { skewX: '1.5625deg', skewY: '1.5625deg', }, 0.666: { skewX: '-0.78125deg', skewY: '-0.78125deg', }, 0.777: { skewX: '0.390625deg', skewY: '0.390625deg', }, 0.888: { skewX: '-0.1953125deg', skewY: '-0.1953125deg', }, 1: { skewX: '0deg', skewY: '0deg', }, }; export const pulse = { 0: { scale: 1, }, 0.5: { scale: 1.05, }, 1: { scale: 1, }, }; export const rotate = { 0: { rotate: '0deg', }, 0.25: { rotate: '90deg', }, 0.5: { rotate: '180deg', }, 0.75: { rotate: '270deg', }, 1: { rotate: '360deg', }, }; export const shake = { 0: { translateX: 0, }, 0.1: { translateX: -10, }, 0.2: { translateX: 10, }, 0.3: { translateX: -10, }, 0.4: { translateX: 10, }, 0.5: { translateX: -10, }, 0.6: { translateX: 10, }, 0.7: { translateX: -10, }, 0.8: { translateX: 10, }, 0.9: { translateX: -10, }, 1: { translateX: 0, }, }; export const swing = { 0: { rotate: '0deg', }, 0.2: { rotate: '15deg', }, 0.4: { rotate: '-10deg', }, 0.6: { rotate: '5deg', }, 0.8: { rotate: '-5deg', }, 1: { rotate: '0deg', }, }; export const rubberBand = { 0: { scaleX: 1, scaleY: 1, }, 0.3: { scaleX: 1.25, scaleY: 0.75, }, 0.4: { scaleX: 0.75, scaleY: 1.25, }, 0.5: { scaleX: 1.15, scaleY: 0.85, }, 0.65: { scaleX: 0.95, scaleY: 1.05, }, 0.75: { scaleX: 1.05, scaleY: 0.95, }, 1: { scaleX: 1, scaleY: 1, }, }; export const tada = { 0: { scale: 1, rotate: '0deg', }, 0.1: { scale: 0.9, rotate: '-3deg', }, 0.2: { scale: 0.9, rotate: '-3deg', }, 0.3: { scale: 1.1, rotate: '-3deg', }, 0.4: { rotate: '3deg', }, 0.5: { rotate: '-3deg', }, 0.6: { rotate: '3deg', }, 0.7: { rotate: '-3deg', }, 0.8: { rotate: '3deg', }, 0.9: { scale: 1.1, rotate: '3deg', }, 1: { scale: 1, rotate: '0deg', }, }; export const wobble = { 0: { translateX: 0, rotate: '0deg', }, 0.15: { translateX: -25, rotate: '-5deg', }, 0.3: { translateX: 20, rotate: '3deg', }, 0.45: { translateX: -15, rotate: '-3deg', }, 0.6: { translateX: 10, rotate: '2deg', }, 0.75: { translateX: -5, rotate: '-1deg', }, 1: { translateX: 0, rotate: '0deg', }, }; ================================================ FILE: definitions/bouncing-entrances.js ================================================ export const bounceIn = { 0: { opacity: 0, scale: 0.3, }, 0.2: { scale: 1.1, }, 0.4: { scale: 0.9, }, 0.6: { opacity: 1, scale: 1.03, }, 0.8: { scale: 0.97, }, 1: { opacity: 1, scale: 1, }, }; export const bounceInUp = { 0: { opacity: 0, translateY: 800, }, 0.6: { opacity: 1, translateY: -25, }, 0.75: { translateY: 10, }, 0.9: { translateY: -5, }, 1: { translateY: 0, }, }; export const bounceInDown = { 0: { opacity: 0, translateY: -800, }, 0.6: { opacity: 1, translateY: 25, }, 0.75: { translateY: -10, }, 0.9: { translateY: 5, }, 1: { translateY: 0, }, }; export const bounceInRight = { 0: { opacity: 0, translateX: 600, }, 0.6: { opacity: 1, translateX: -20, }, 0.75: { translateX: 8, }, 0.9: { translateX: -4, }, 1: { translateX: 0, }, }; export const bounceInLeft = { 0: { opacity: 0, translateX: -600, }, 0.6: { opacity: 1, translateX: 20, }, 0.75: { translateX: -8, }, 0.9: { translateX: 4, }, 1: { translateX: 0, }, }; ================================================ FILE: definitions/bouncing-exits.js ================================================ export const bounceOut = { 0: { opacity: 1, scale: 1, }, 0.2: { scale: 0.9, }, 0.5: { opacity: 1, scale: 1.11, }, 0.55: { scale: 1.11, }, 1: { opacity: 0, scale: 0.3, }, }; export const bounceOutUp = { 0: { opacity: 1, translateY: 0, }, 0.2: { opacity: 1, translateY: -10, }, 0.4: { translateY: 20, }, 0.45: { translateY: 20, }, 0.55: { opacity: 1, }, 1: { opacity: 0, translateY: -800, }, }; export const bounceOutDown = { 0: { opacity: 1, translateY: 0, }, 0.2: { opacity: 1, translateY: 10, }, 0.4: { translateY: -20, }, 0.45: { translateY: -20, }, 0.55: { opacity: 1, }, 1: { opacity: 0, translateY: 800, }, }; export const bounceOutRight = { 0: { opacity: 1, translateX: 0, }, 0.2: { opacity: 1, translateX: 10, }, 0.4: { translateX: -20, }, 0.45: { translateX: -20, }, 0.55: { opacity: 1, }, 1: { opacity: 0, translateX: 600, }, }; export const bounceOutLeft = { 0: { opacity: 1, translateX: 0, }, 0.2: { opacity: 1, translateX: -10, }, 0.4: { translateX: 20, }, 0.45: { translateX: 20, }, 0.55: { opacity: 1, }, 1: { opacity: 0, translateX: -600, }, }; ================================================ FILE: definitions/fading-entrances.js ================================================ function makeFadeInTranslation(translationType, fromValue) { return { from: { opacity: 0, [translationType]: fromValue, }, to: { opacity: 1, [translationType]: 0, }, }; } export const fadeIn = { from: { opacity: 0, }, to: { opacity: 1, }, }; export const fadeInDown = makeFadeInTranslation('translateY', -100); export const fadeInUp = makeFadeInTranslation('translateY', 100); export const fadeInLeft = makeFadeInTranslation('translateX', -100); export const fadeInRight = makeFadeInTranslation('translateX', 100); export const fadeInDownBig = makeFadeInTranslation('translateY', -500); export const fadeInUpBig = makeFadeInTranslation('translateY', 500); export const fadeInLeftBig = makeFadeInTranslation('translateX', -500); export const fadeInRightBig = makeFadeInTranslation('translateX', 500); ================================================ FILE: definitions/fading-exits.js ================================================ function makeFadeOutTranslation(translationType, toValue) { return { from: { opacity: 1, [translationType]: 0, }, to: { opacity: 0, [translationType]: toValue, }, }; } export const fadeOut = { from: { opacity: 1, }, to: { opacity: 0, }, }; export const fadeOutDown = makeFadeOutTranslation('translateY', 100); export const fadeOutUp = makeFadeOutTranslation('translateY', -100); export const fadeOutLeft = makeFadeOutTranslation('translateX', -100); export const fadeOutRight = makeFadeOutTranslation('translateX', 100); export const fadeOutDownBig = makeFadeOutTranslation('translateY', 500); export const fadeOutUpBig = makeFadeOutTranslation('translateY', -500); export const fadeOutLeftBig = makeFadeOutTranslation('translateX', -500); export const fadeOutRightBig = makeFadeOutTranslation('translateX', 500); ================================================ FILE: definitions/flippers.js ================================================ export const flipInX = { easing: 'ease-in', style: { backfaceVisibility: 'visible', perspective: 400, }, 0: { opacity: 0, rotateX: '90deg', }, 0.4: { rotateX: '-20deg', }, 0.6: { opacity: 1, rotateX: '10deg', }, 0.8: { rotateX: '-5deg', }, 1: { opacity: 1, rotateX: '0deg', }, }; export const flipInY = { easing: 'ease-in', style: { backfaceVisibility: 'visible', perspective: 400, }, 0: { opacity: 0, rotateY: '90deg', }, 0.4: { rotateY: '-20deg', }, 0.6: { opacity: 1, rotateY: '10deg', }, 0.8: { rotateY: '-5deg', }, 1: { opacity: 1, rotateY: '0deg', }, }; export const flipOutX = { style: { backfaceVisibility: 'visible', perspective: 400, }, 0: { opacity: 1, rotateX: '0deg', }, 0.3: { opacity: 1, rotateX: '-20deg', }, 1: { opacity: 0, rotateX: '90deg', }, }; export const flipOutY = { style: { backfaceVisibility: 'visible', perspective: 400, }, 0: { opacity: 1, rotateY: '0deg', }, 0.3: { opacity: 1, rotateY: '-20deg', }, 1: { opacity: 0, rotateY: '90deg', }, }; ================================================ FILE: definitions/index.js ================================================ export * from './attention-seekers'; export * from './bouncing-entrances'; export * from './bouncing-exits'; export * from './fading-entrances'; export * from './fading-exits'; export * from './flippers'; export * from './lightspeed'; export * from './sliding-entrances'; export * from './sliding-exits'; export * from './zooming-entrances'; export * from './zooming-exits'; ================================================ FILE: definitions/lightspeed.js ================================================ export const lightSpeedIn = { easing: 'ease-out', 0: { opacity: 0, translateX: 200, skewX: '-30deg', }, 0.6: { opacity: 1, translateX: 0, skewX: '20deg', }, 0.8: { skewX: '-5deg', }, 1: { opacity: 1, translateX: 0, skewX: '0deg', }, }; export const lightSpeedOut = { easing: 'ease-in', 0: { opacity: 1, translateX: 0, skewX: '0deg', }, 1: { opacity: 0, translateX: 200, skewX: '30deg', }, }; ================================================ FILE: definitions/sliding-entrances.js ================================================ function makeSlideInTranslation(translationType, fromValue) { return { from: { [translationType]: fromValue, }, to: { [translationType]: 0, }, }; } export const slideInDown = makeSlideInTranslation('translateY', -100); export const slideInUp = makeSlideInTranslation('translateY', 100); export const slideInLeft = makeSlideInTranslation('translateX', -100); export const slideInRight = makeSlideInTranslation('translateX', 100); ================================================ FILE: definitions/sliding-exits.js ================================================ function makeSlideOutTranslation(translationType, fromValue) { return { from: { [translationType]: 0, }, to: { [translationType]: fromValue, }, }; } export const slideOutDown = makeSlideOutTranslation('translateY', 100); export const slideOutUp = makeSlideOutTranslation('translateY', -100); export const slideOutLeft = makeSlideOutTranslation('translateX', -100); export const slideOutRight = makeSlideOutTranslation('translateX', 100); ================================================ FILE: definitions/zooming-entrances.js ================================================ import { Easing } from 'react-native'; function makeZoomInTranslation(translationType, pivotPoint) { const modifier = Math.min(1, Math.max(-1, pivotPoint)); return { easing: Easing.bezier(0.175, 0.885, 0.32, 1), 0: { opacity: 0, scale: 0.1, [translationType]: modifier * -1000, }, 0.6: { opacity: 1, scale: 0.457, [translationType]: pivotPoint, }, 1: { scale: 1, [translationType]: 0, }, }; } export const zoomIn = { from: { opacity: 0, scale: 0.3, }, 0.5: { opacity: 1, }, to: { opacity: 1, scale: 1, }, }; export const zoomInDown = makeZoomInTranslation('translateY', 60); export const zoomInUp = makeZoomInTranslation('translateY', -60); export const zoomInLeft = makeZoomInTranslation('translateX', 10); export const zoomInRight = makeZoomInTranslation('translateX', -10); ================================================ FILE: definitions/zooming-exits.js ================================================ import { Easing } from 'react-native'; function makeZoomOutTranslation(translationType, pivotPoint) { const modifier = Math.min(1, Math.max(-1, pivotPoint)); return { easing: Easing.bezier(0.175, 0.885, 0.32, 1), 0: { opacity: 1, scale: 1, [translationType]: 0, }, 0.4: { opacity: 1, scale: 0.457, [translationType]: pivotPoint, }, 1: { opacity: 0, scale: 0.1, [translationType]: modifier * -1000, }, }; } export const zoomOut = { from: { opacity: 1, scale: 1, }, 0.5: { opacity: 1, scale: 0.3, }, to: { opacity: 0, scale: 0, }, }; export const zoomOutDown = makeZoomOutTranslation('translateY', 60); export const zoomOutUp = makeZoomOutTranslation('translateY', -60); export const zoomOutLeft = makeZoomOutTranslation('translateX', 10); export const zoomOutRight = makeZoomOutTranslation('translateX', -10); ================================================ FILE: easing.js ================================================ import { Easing } from 'react-native'; const EASING_FUNCTIONS = { // Standard CSS easings linear: Easing.linear, ease: Easing.bezier(0.25, 0.1, 0.25, 1), 'ease-in': Easing.bezier(0.42, 0, 1, 1), 'ease-out': Easing.bezier(0, 0, 0.58, 1), 'ease-in-out': Easing.bezier(0.42, 0, 0.58, 1), // Penner Equations - http://matthewlein.com/ceaser/ & http://easings.net 'ease-in-cubic': Easing.bezier(0.55, 0.055, 0.675, 0.19), 'ease-out-cubic': Easing.bezier(0.215, 0.61, 0.355, 1.0), 'ease-in-out-cubic': Easing.bezier(0.645, 0.045, 0.355, 1.0), 'ease-in-circ': Easing.bezier(0.6, 0.04, 0.98, 0.335), 'ease-out-circ': Easing.bezier(0.075, 0.82, 0.165, 1.0), 'ease-in-out-circ': Easing.bezier(0.785, 0.135, 0.15, 0.86), 'ease-in-expo': Easing.bezier(0.95, 0.05, 0.795, 0.035), 'ease-out-expo': Easing.bezier(0.19, 1.0, 0.22, 1.0), 'ease-in-out-expo': Easing.bezier(1.0, 0.0, 0.0, 1.0), 'ease-in-quad': Easing.bezier(0.55, 0.085, 0.68, 0.53), 'ease-out-quad': Easing.bezier(0.25, 0.46, 0.45, 0.94), 'ease-in-out-quad': Easing.bezier(0.455, 0.03, 0.515, 0.955), 'ease-in-quart': Easing.bezier(0.895, 0.03, 0.685, 0.22), 'ease-out-quart': Easing.bezier(0.165, 0.84, 0.44, 1.0), 'ease-in-out-quart': Easing.bezier(0.77, 0.0, 0.175, 1.0), 'ease-in-quint': Easing.bezier(0.755, 0.05, 0.855, 0.06), 'ease-out-quint': Easing.bezier(0.23, 1.0, 0.32, 1.0), 'ease-in-out-quint': Easing.bezier(0.86, 0.0, 0.07, 1.0), 'ease-in-sine': Easing.bezier(0.47, 0.0, 0.745, 0.715), 'ease-out-sine': Easing.bezier(0.39, 0.575, 0.565, 1.0), 'ease-in-out-sine': Easing.bezier(0.445, 0.05, 0.55, 0.95), 'ease-in-back': Easing.bezier(0.6, -0.28, 0.735, 0.045), 'ease-out-back': Easing.bezier(0.175, 0.885, 0.32, 1.275), 'ease-in-out-back': Easing.bezier(0.68, -0.55, 0.265, 1.55), }; export default EASING_FUNCTIONS; ================================================ FILE: flattenStyle.js ================================================ import { StyleSheet } from 'react-native'; export default function flattenStyle(style) { const flatStyle = Object.assign({}, StyleSheet.flatten(style)); if (flatStyle.transform) { flatStyle.transform.forEach((transform) => { const key = Object.keys(transform)[0]; flatStyle[key] = transform[key]; }); delete flatStyle.transform; } return flatStyle; } ================================================ FILE: getDefaultStyleValue.js ================================================ /* eslint-disable no-plusplus */ const DIRECTIONAL_FALLBACKS = { Top: ['Vertical', ''], Bottom: ['Vertical', ''], Vertical: [''], Left: ['Horizontal', ''], Right: ['Horizontal', ''], Horizontal: [''], }; const DIRECTIONAL_SUFFICES = Object.keys(DIRECTIONAL_FALLBACKS); export default function getDefaultStyleValue(key, flatStyle) { if (key === 'backgroundColor') { return 'rgba(0,0,0,0)'; } if (key === 'color' || key.indexOf('Color') !== -1) { return 'rgba(0,0,0,1)'; } if (key.indexOf('rotate') === 0 || key.indexOf('skew') === 0) { return '0deg'; } if (key === 'opacity' || key.indexOf('scale') === 0) { return 1; } if (key === 'fontSize') { return 14; } if (key.indexOf('margin') === 0 || key.indexOf('padding') === 0) { for (let suffix, i = 0; i < DIRECTIONAL_SUFFICES.length; i++) { suffix = DIRECTIONAL_SUFFICES[i]; if (key.substr(-suffix.length) === suffix) { const prefix = key.substr(0, key.length - suffix.length); const fallbacks = DIRECTIONAL_FALLBACKS[suffix]; for (let fallback, j = 0; j < fallbacks.length; j++) { fallback = prefix + fallbacks[j]; if (fallback in flatStyle) { return flatStyle[fallback]; } } break; } } } return 0; } ================================================ FILE: getStyleValues.js ================================================ import flattenStyle from './flattenStyle'; import getDefaultStyleValue from './getDefaultStyleValue'; // Returns a flattened version of style with only `keys` values. export default function getStyleValues(keys, style) { const values = {}; const flatStyle = flattenStyle(style); (typeof keys === 'string' ? [keys] : keys).forEach((key) => { values[key] = key in flatStyle ? flatStyle[key] : getDefaultStyleValue(key, flatStyle); }); return values; } ================================================ FILE: index.js ================================================ import { View as CoreView, Text as CoreText, Image as CoreImage, } from 'react-native'; import createComponent from './createAnimatableComponent'; import { initializeRegistryWithDefinitions } from './registry'; import * as ANIMATION_DEFINITIONS from './definitions'; initializeRegistryWithDefinitions(ANIMATION_DEFINITIONS); export const createAnimatableComponent = createComponent; export const View = createComponent(CoreView); export const Text = createComponent(CoreText); export const Image = createComponent(CoreImage); export { default as createAnimation } from './createAnimation'; export { registerAnimation, initializeRegistryWithDefinitions, } from './registry'; ================================================ FILE: package.json ================================================ { "name": "react-native-animatable", "version": "1.4.0", "description": "Easy to use declarative transitions and animations for React Native", "typings": "typings/react-native-animatable.d.ts", "main": "index.js", "scripts": { "jest": "./node_modules/.bin/jest", "jest:watch": "npm run jest -- --watch", "lint": "./node_modules/.bin/eslint ./*.js", "test": "npm run lint && npm run jest", "format": "./node_modules/.bin/prettier --write {,definitions/,__tests__/}*.js typings/*.d.ts" }, "keywords": [ "react-native", "react-component", "react-native-component", "react", "mobile", "ios", "android", "ui", "fade", "bounce", "slide", "animatable", "transition", "animation" ], "author": { "name": "Joel Arvidsson", "email": "joel@oblador.se" }, "homepage": "https://github.com/oblador/react-native-animatable", "bugs": { "url": "https://github.com/oblador/react-native-animatable/issues" }, "repository": { "type": "git", "url": "git://github.com/oblador/react-native-animatable.git" }, "license": "MIT", "jest": { "preset": "react-native", "modulePathIgnorePatterns": [ "/Examples/" ], "testPathIgnorePatterns": [ "/Examples/" ], "collectCoverage": true, "coverageDirectory": "/coverage/" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/eslint-parser": "^7.22.15", "@babel/runtime": "^7.20.0", "eslint": "^8.2.0", "eslint-config-airbnb": "19.0.4", "eslint-config-prettier": "^9.0.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "jest": "^29.7.0", "metro-react-native-babel-preset": "0.76.8", "prettier": "^3.0.3", "react": "18.2.0", "react-native": "0.72.6" }, "dependencies": { "prop-types": "^15.8.1" } } ================================================ FILE: registry.js ================================================ import createAnimation from './createAnimation'; const animationRegistry = {}; export function registerAnimation(animationName, animation) { animationRegistry[animationName] = animation; } export function getAnimationByName(animationName) { return animationRegistry[animationName]; } export function getAnimationNames() { return Object.keys(animationRegistry); } export function initializeRegistryWithDefinitions(definitions) { Object.keys(definitions).forEach((animationName) => { registerAnimation( animationName, createAnimation(definitions[animationName]), ); }); } ================================================ FILE: typings/react-native-animatable.d.ts ================================================ import { NativeMethods, ViewProps, TextProps, ImageProps, ViewStyle, TextStyle, ImageStyle, } from 'react-native'; import { FunctionComponent, ComponentClass, ClassicComponentClass, Component, } from 'react'; export type EasingFunction = { (t: number): number }; export type Easing = | 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-in-cubic' | 'ease-out-cubic' | 'ease-in-out-cubic' | 'ease-in-circ' | 'ease-out-circ' | 'ease-in-out-circ' | 'ease-in-expo' | 'ease-out-expo' | 'ease-in-out-expo' | 'ease-in-quad' | 'ease-out-quad' | 'ease-in-out-quad' | 'ease-in-quart' | 'ease-out-quart' | 'ease-in-out-quart' | 'ease-in-quint' | 'ease-out-quint' | 'ease-in-out-quint' | 'ease-in-sine' | 'ease-out-sine' | 'ease-in-out-sine' | 'ease-in-back' | 'ease-out-back' | 'ease-in-out-back' | EasingFunction; export type Animation = | 'bounce' | 'flash' | 'jello' | 'pulse' | 'rotate' | 'rubberBand' | 'shake' | 'swing' | 'tada' | 'wobble' | 'bounceIn' | 'bounceInDown' | 'bounceInUp' | 'bounceInLeft' | 'bounceInRight' | 'bounceOut' | 'bounceOutDown' | 'bounceOutUp' | 'bounceOutLeft' | 'bounceOutRight' | 'fadeIn' | 'fadeInDown' | 'fadeInDownBig' | 'fadeInUp' | 'fadeInUpBig' | 'fadeInLeft' | 'fadeInLeftBig' | 'fadeInRight' | 'fadeInRightBig' | 'fadeOut' | 'fadeOutDown' | 'fadeOutDownBig' | 'fadeOutUp' | 'fadeOutUpBig' | 'fadeOutLeft' | 'fadeOutLeftBig' | 'fadeOutRight' | 'fadeOutRightBig' | 'flipInX' | 'flipInY' | 'flipOutX' | 'flipOutY' | 'lightSpeedIn' | 'lightSpeedOut' | 'slideInDown' | 'slideInUp' | 'slideInLeft' | 'slideInRight' | 'slideOutDown' | 'slideOutUp' | 'slideOutLeft' | 'slideOutRight' | 'zoomIn' | 'zoomInDown' | 'zoomInUp' | 'zoomInLeft' | 'zoomInRight' | 'zoomOut' | 'zoomOutDown' | 'zoomOutUp' | 'zoomOutLeft' | 'zoomOutRight'; export type Direction = | 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'; type TransformKeys = | 'perspective' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'skewX' | 'skewY' | 'matrix'; interface AnimatableProps { animation?: Animation | string | CustomAnimation; duration?: number; delay?: number; direction?: Direction; easing?: Easing; iterationCount?: number | 'infinite'; iterationDelay?: number; transition?: | (keyof S | TransformKeys) | ReadonlyArray; useNativeDriver?: boolean; isInteraction?: boolean; onAnimationBegin?: Function; onAnimationEnd?: Function; onTransitionBegin?: (property: string) => void; onTransitionEnd?: (property: string) => void; } type AnimatableAnimationMethods = Partial<{ [k in Animation]: (duration?: number) => Promise<{ finished: boolean }>; }>; interface AnimatableComponent

extends NativeMethods, AnimatableAnimationMethods, Component, ClassicComponentClass & P> { refs: { [key: string]: Component; }; stopAnimation(): void; animate( animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number, ): Promise; transition( fromValues: T, toValues: T, duration?: number, easing?: Easing, ): void; transitionTo( toValues: T, duration?: number, easing?: Easing, ): void; } export interface CustomAnimation { from?: T; to?: T; style?: T; easing?: Easing; [progress: number]: T; } export function createAnimation(animation: CustomAnimation): object; export function registerAnimation( name: string, animation: CustomAnimation, ): void; export function initializeRegistryWithDefinitions(animations: { [key: string]: CustomAnimation; }): void; type GetPropertyType = B[K]; export function createAnimatableComponent< P extends { style?: any }, S = GetPropertyType, >( Component: | ComponentClass

| FunctionComponent

| ClassicComponentClass

, ): AnimatableComponent; export const View: AnimatableComponent; export type View = AnimatableComponent; export const Text: AnimatableComponent; export type Text = AnimatableComponent; export const Image: AnimatableComponent; export type Image = AnimatableComponent; ================================================ FILE: wrapStyleTransforms.js ================================================ // These styles need to be nested in a transform array const TRANSFORM_STYLE_PROPERTIES = [ 'perspective', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'skewX', 'skewY', 'translateX', 'translateY', ]; // Transforms { translateX: 1 } to { transform: [{ translateX: 1 }]} export default function wrapStyleTransforms(style) { const wrapped = {}; Object.keys(style).forEach((key) => { if (TRANSFORM_STYLE_PROPERTIES.indexOf(key) !== -1) { if (!wrapped.transform) { wrapped.transform = []; } wrapped.transform.push({ [key]: style[key], }); } else { wrapped[key] = style[key]; } }); return wrapped; }