├── Example ├── .babelrc ├── .buckconfig ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── __tests__ │ ├── index.android.js │ └── index.ios.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle ├── app.js ├── cell.js ├── index.android.js ├── index.ios.js ├── ios │ ├── Example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Example.xcscheme │ ├── Example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── ExampleTests │ │ ├── ExampleTests.m │ │ └── Info.plist └── package.json ├── __tests__ ├── createAnimation.js └── getDefaultStyleValue.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 └── wrapStyleTransforms.js /Example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /Example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*[.]android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | .*/node_modules/.*/node_modules/fbjs/.* 21 | 22 | # Ignore duplicate module providers 23 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 24 | .*/Libraries/react-native/React.js 25 | .*/Libraries/react-native/ReactNative.js 26 | .*/node_modules/jest-runtime/build/__tests__/.* 27 | 28 | [include] 29 | 30 | [libs] 31 | node_modules/react-native/Libraries/react-native/react-native-interface.js 32 | node_modules/react-native/flow 33 | flow/ 34 | 35 | [options] 36 | module.system=haste 37 | 38 | esproposal.class_static_fields=enable 39 | esproposal.class_instance_fields=enable 40 | 41 | experimental.strict_type_args=true 42 | 43 | munge_underscores=true 44 | 45 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 46 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 47 | 48 | suppress_type=$FlowIssue 49 | suppress_type=$FlowFixMe 50 | suppress_type=$FixMe 51 | 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 54 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 55 | 56 | unsafe.enable_getters_and_setters=true 57 | 58 | [version] 59 | ^0.33.0 60 | -------------------------------------------------------------------------------- /Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | *.keystore 42 | -------------------------------------------------------------------------------- /Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Example/__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /Example/__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /Example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.example', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.example', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /Example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.example" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "Example"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | 13 | import java.util.Arrays; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | @Override 20 | protected boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | return Arrays.asList( 27 | new MainReactPackage() 28 | ); 29 | } 30 | }; 31 | 32 | @Override 33 | public ReactNativeHost getReactNativeHost() { 34 | return mReactNativeHost; 35 | } 36 | 37 | @Override 38 | public void onCreate() { 39 | super.onCreate(); 40 | SoLoader.init(this, /* native exopackage */ false); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MobileGuru1013/react-native-animatable/e9b68f5dc8c758d15f771252f1db28e3313350a7/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MobileGuru1013/react-native-animatable/e9b68f5dc8c758d15f771252f1db28e3313350a7/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MobileGuru1013/react-native-animatable/e9b68f5dc8c758d15f771252f1db28e3313350a7/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MobileGuru1013/react-native-animatable/e9b68f5dc8c758d15f771252f1db28e3313350a7/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Example 3 | 4 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MobileGuru1013/react-native-animatable/e9b68f5dc8c758d15f771252f1db28e3313350a7/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /Example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /Example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /Example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Example' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Example/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | ListView, 4 | Platform, 5 | Slider, 6 | StyleSheet, 7 | TouchableWithoutFeedback, 8 | } from 'react-native'; 9 | 10 | import { createAnimatableComponent, View, Text } from 'react-native-animatable'; 11 | import AnimationCell from './cell'; 12 | 13 | const AnimatableListView = createAnimatableComponent(ListView); 14 | 15 | const COLORS = [ 16 | '#65b237', // green 17 | '#346ca5', // blue 18 | '#a0a0a0', // light grey 19 | '#ffc508', // yellow 20 | '#217983', // cobolt 21 | '#435056', // grey 22 | '#b23751', // red 23 | '#333333', // dark 24 | '#ff6821', // orange 25 | '#e3a09e', // pink 26 | '#1abc9c', // turquoise 27 | '#302614', // brown 28 | ]; 29 | 30 | const ANIMATION_TYPES = { 31 | 'Attention Seekers': [ 32 | 'bounce', 33 | 'flash', 34 | 'jello', 35 | 'pulse', 36 | 'rotate', 37 | 'rubberBand', 38 | 'shake', 39 | 'swing', 40 | 'tada', 41 | 'wobble', 42 | ], 43 | 'Bouncing Entrances': [ 44 | 'bounceIn', 45 | 'bounceInDown', 46 | 'bounceInUp', 47 | 'bounceInLeft', 48 | 'bounceInRight', 49 | ], 50 | 'Bouncing Exits': [ 51 | 'bounceOut', 52 | 'bounceOutDown', 53 | 'bounceOutUp', 54 | 'bounceOutLeft', 55 | 'bounceOutRight', 56 | ], 57 | 'Fading Entrances': [ 58 | 'fadeIn', 59 | 'fadeInDown', 60 | 'fadeInDownBig', 61 | 'fadeInUp', 62 | 'fadeInUpBig', 63 | 'fadeInLeft', 64 | 'fadeInLeftBig', 65 | 'fadeInRight', 66 | 'fadeInRightBig', 67 | ], 68 | 'Fading Exits': [ 69 | 'fadeOut', 70 | 'fadeOutDown', 71 | 'fadeOutDownBig', 72 | 'fadeOutUp', 73 | 'fadeOutUpBig', 74 | 'fadeOutLeft', 75 | 'fadeOutLeftBig', 76 | 'fadeOutRight', 77 | 'fadeOutRightBig', 78 | ], 79 | Flippers: [ 80 | 'flipInX', 81 | 'flipInY', 82 | 'flipOutX', 83 | 'flipOutY', 84 | ], 85 | Lightspeed: [ 86 | 'lightSpeedIn', 87 | 'lightSpeedOut', 88 | ], 89 | 'Sliding Entrances': [ 90 | 'slideInDown', 91 | 'slideInUp', 92 | 'slideInLeft', 93 | 'slideInRight', 94 | ], 95 | 'Sliding Exits': [ 96 | 'slideOutDown', 97 | 'slideOutUp', 98 | 'slideOutLeft', 99 | 'slideOutRight', 100 | ], 101 | 'Zooming Entrances': [ 102 | 'zoomIn', 103 | 'zoomInDown', 104 | 'zoomInUp', 105 | 'zoomInLeft', 106 | 'zoomInRight', 107 | ], 108 | 'Zooming Exits': [ 109 | 'zoomOut', 110 | 'zoomOutDown', 111 | 'zoomOutUp', 112 | 'zoomOutLeft', 113 | 'zoomOutRight', 114 | ], 115 | }; 116 | 117 | const NATIVE_INCOMPATIBLE_ANIMATIONS = [ 118 | 'jello', 119 | 'swing', 120 | 'tada', 121 | 'wobble', 122 | 'lightSpeedIn', 123 | 'lightSpeedOut', 124 | ]; 125 | 126 | const styles = StyleSheet.create({ 127 | container: { 128 | flex: 1, 129 | backgroundColor: '#F5FCFF', 130 | }, 131 | title: { 132 | fontSize: 28, 133 | fontWeight: '300', 134 | textAlign: 'center', 135 | margin: 20, 136 | marginTop: (Platform.OS === 'ios' ? 40 : 20), 137 | }, 138 | instructions: { 139 | textAlign: 'center', 140 | color: '#333333', 141 | marginBottom: 20, 142 | backgroundColor: 'transparent', 143 | }, 144 | slider: { 145 | height: 30, 146 | margin: 10, 147 | }, 148 | toggle: { 149 | width: 120, 150 | backgroundColor: '#333', 151 | borderRadius: 3, 152 | padding: 5, 153 | fontSize: 14, 154 | alignSelf: 'center', 155 | textAlign: 'center', 156 | margin: 10, 157 | color: 'rgba(255, 255, 255, 1)', 158 | }, 159 | toggledOn: { 160 | color: 'rgba(255, 33, 33, 1)', 161 | fontSize: 16, 162 | transform: [{ 163 | rotate: '8deg', 164 | }, { 165 | translateY: -20, 166 | }], 167 | }, 168 | sectionHeader: { 169 | backgroundColor: '#F5FCFF', 170 | padding: 15, 171 | }, 172 | sectionHeaderText: { 173 | textAlign: 'center', 174 | fontSize: 18, 175 | }, 176 | }); 177 | 178 | export default class ExampleView extends Component { 179 | constructor(props) { 180 | super(props); 181 | 182 | const dataSource = new ListView.DataSource({ 183 | rowHasChanged: (r1, r2) => r1 !== r2, 184 | sectionHeaderHasChanged: (s1, s2) => s1 !== s2, 185 | }); 186 | this.state = { 187 | dataSource: dataSource.cloneWithRowsAndSections(ANIMATION_TYPES), 188 | duration: 1000, 189 | toggledOn: false, 190 | }; 191 | } 192 | 193 | textRef = null; 194 | handleTextRef = (ref) => { 195 | this.textRef = ref; 196 | }; 197 | 198 | handleDurationChange = (duration) => { 199 | this.setState({ duration: Math.round(duration) }); 200 | }; 201 | 202 | handleRowPressed = (componentRef, animationType) => { 203 | componentRef.setNativeProps({ 204 | style: { 205 | zIndex: 1, 206 | }, 207 | }); 208 | componentRef.animate(animationType, this.state.duration).then(() => { 209 | componentRef.setNativeProps({ 210 | style: { 211 | zIndex: 0, 212 | }, 213 | }); 214 | }); 215 | if (this.textRef) { 216 | this.textRef[animationType](this.state.duration); 217 | } 218 | }; 219 | 220 | render() { 221 | const { dataSource, duration, toggledOn } = this.state; 222 | return ( 223 | 224 | Animatable Explorer 225 | 226 | 227 | 233 | 234 | this.setState({ toggledOn: !toggledOn })}> 235 | 240 | Toggle me! 241 | 242 | 243 | 244 | Tap one of the following to animate for {duration} ms 245 | 246 | ( 254 | 255 | {section} 256 | 257 | )} 258 | renderRow={(animationType, section, i) => ( 259 | 265 | )} 266 | /> 267 | 268 | ); 269 | } 270 | } 271 | -------------------------------------------------------------------------------- /Example/cell.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { 3 | StyleSheet, 4 | Text, 5 | TouchableWithoutFeedback, 6 | } from 'react-native'; 7 | 8 | import { View } from 'react-native-animatable'; 9 | 10 | const styles = StyleSheet.create({ 11 | cell: { 12 | padding: 16, 13 | marginBottom: 10, 14 | marginHorizontal: 10, 15 | }, 16 | name: { 17 | color: 'white', 18 | fontSize: 16, 19 | textAlign: 'center', 20 | }, 21 | }); 22 | 23 | export default class AnimationCell extends Component { 24 | static propTypes = { 25 | animationType: PropTypes.string.isRequired, 26 | color: PropTypes.string.isRequired, 27 | onPress: PropTypes.func.isRequired, 28 | useNativeDriver: PropTypes.bool, 29 | }; 30 | 31 | ref = null; 32 | handleRef = (ref) => { 33 | this.ref = ref; 34 | } 35 | 36 | handlePress = () => { 37 | if (this.ref && this.props.onPress) { 38 | this.props.onPress(this.ref, this.props.animationType); 39 | } 40 | }; 41 | 42 | render() { 43 | return ( 44 | 45 | 50 | {this.props.animationType} 51 | 52 | 53 | ); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /Example/index.android.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import ExampleView from './app'; 3 | 4 | AppRegistry.registerComponent('Example', () => ExampleView); 5 | -------------------------------------------------------------------------------- /Example/index.ios.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import ExampleView from './app'; 3 | 4 | AppRegistry.registerComponent('Example', () => ExampleView); 5 | -------------------------------------------------------------------------------- /Example/ios/Example.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 11 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 12 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 13 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 14 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 15 | 00E356F31AD99517003FC87E /* ExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ExampleTests.m */; }; 16 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 17 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 18 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 19 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 20 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 21 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 22 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 23 | 140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 24 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 25 | 5D45B5441DCE778C0020333A /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5D45B5231DCE777E0020333A /* libRCTAnimation.a */; }; 26 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 27 | /* End PBXBuildFile section */ 28 | 29 | /* Begin PBXContainerItemProxy section */ 30 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 31 | isa = PBXContainerItemProxy; 32 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 33 | proxyType = 2; 34 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 35 | remoteInfo = RCTActionSheet; 36 | }; 37 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 38 | isa = PBXContainerItemProxy; 39 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 40 | proxyType = 2; 41 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 42 | remoteInfo = RCTGeolocation; 43 | }; 44 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 45 | isa = PBXContainerItemProxy; 46 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 47 | proxyType = 2; 48 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 49 | remoteInfo = RCTImage; 50 | }; 51 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 52 | isa = PBXContainerItemProxy; 53 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 54 | proxyType = 2; 55 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 56 | remoteInfo = RCTNetwork; 57 | }; 58 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 59 | isa = PBXContainerItemProxy; 60 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 61 | proxyType = 2; 62 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 63 | remoteInfo = RCTVibration; 64 | }; 65 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 66 | isa = PBXContainerItemProxy; 67 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 68 | proxyType = 1; 69 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 70 | remoteInfo = Example; 71 | }; 72 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 73 | isa = PBXContainerItemProxy; 74 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 75 | proxyType = 2; 76 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 77 | remoteInfo = RCTSettings; 78 | }; 79 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 80 | isa = PBXContainerItemProxy; 81 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 82 | proxyType = 2; 83 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 84 | remoteInfo = RCTWebSocket; 85 | }; 86 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 87 | isa = PBXContainerItemProxy; 88 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 89 | proxyType = 2; 90 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 91 | remoteInfo = React; 92 | }; 93 | 5D45B5221DCE777E0020333A /* PBXContainerItemProxy */ = { 94 | isa = PBXContainerItemProxy; 95 | containerPortal = 5D45B51C1DCE777E0020333A /* RCTAnimation.xcodeproj */; 96 | proxyType = 2; 97 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 98 | remoteInfo = RCTAnimation; 99 | }; 100 | 5D45B5241DCE777E0020333A /* PBXContainerItemProxy */ = { 101 | isa = PBXContainerItemProxy; 102 | containerPortal = 5D45B51C1DCE777E0020333A /* RCTAnimation.xcodeproj */; 103 | proxyType = 2; 104 | remoteGlobalIDString = 2D2A28201D9B03D100D4039D; 105 | remoteInfo = "RCTAnimation-tvOS"; 106 | }; 107 | 5D45B5291DCE777E0020333A /* PBXContainerItemProxy */ = { 108 | isa = PBXContainerItemProxy; 109 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 110 | proxyType = 2; 111 | remoteGlobalIDString = 2D2A283A1D9B042B00D4039D; 112 | remoteInfo = "RCTImage-tvOS"; 113 | }; 114 | 5D45B52D1DCE777E0020333A /* PBXContainerItemProxy */ = { 115 | isa = PBXContainerItemProxy; 116 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 117 | proxyType = 2; 118 | remoteGlobalIDString = 2D2A28471D9B043800D4039D; 119 | remoteInfo = "RCTLinking-tvOS"; 120 | }; 121 | 5D45B5311DCE777E0020333A /* PBXContainerItemProxy */ = { 122 | isa = PBXContainerItemProxy; 123 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 124 | proxyType = 2; 125 | remoteGlobalIDString = 2D2A28541D9B044C00D4039D; 126 | remoteInfo = "RCTNetwork-tvOS"; 127 | }; 128 | 5D45B5351DCE777E0020333A /* PBXContainerItemProxy */ = { 129 | isa = PBXContainerItemProxy; 130 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 131 | proxyType = 2; 132 | remoteGlobalIDString = 2D2A28611D9B046600D4039D; 133 | remoteInfo = "RCTSettings-tvOS"; 134 | }; 135 | 5D45B5391DCE777E0020333A /* PBXContainerItemProxy */ = { 136 | isa = PBXContainerItemProxy; 137 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 138 | proxyType = 2; 139 | remoteGlobalIDString = 2D2A287B1D9B048500D4039D; 140 | remoteInfo = "RCTText-tvOS"; 141 | }; 142 | 5D45B53E1DCE777E0020333A /* PBXContainerItemProxy */ = { 143 | isa = PBXContainerItemProxy; 144 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 145 | proxyType = 2; 146 | remoteGlobalIDString = 2D2A28881D9B049200D4039D; 147 | remoteInfo = "RCTWebSocket-tvOS"; 148 | }; 149 | 5D45B5421DCE777E0020333A /* PBXContainerItemProxy */ = { 150 | isa = PBXContainerItemProxy; 151 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 152 | proxyType = 2; 153 | remoteGlobalIDString = 2D2A28131D9B038B00D4039D; 154 | remoteInfo = "React-tvOS"; 155 | }; 156 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 157 | isa = PBXContainerItemProxy; 158 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 159 | proxyType = 2; 160 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 161 | remoteInfo = RCTLinking; 162 | }; 163 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 164 | isa = PBXContainerItemProxy; 165 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 166 | proxyType = 2; 167 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 168 | remoteInfo = RCTText; 169 | }; 170 | /* End PBXContainerItemProxy section */ 171 | 172 | /* Begin PBXFileReference section */ 173 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; 174 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 175 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 176 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 177 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 178 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 179 | 00E356EE1AD99517003FC87E /* ExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 180 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 181 | 00E356F21AD99517003FC87E /* ExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExampleTests.m; sourceTree = ""; }; 182 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 183 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 184 | 13B07F961A680F5B00A75B9A /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 185 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = Example/AppDelegate.h; sourceTree = ""; }; 186 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = Example/AppDelegate.m; sourceTree = ""; }; 187 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 188 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Example/Images.xcassets; sourceTree = ""; }; 189 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Example/Info.plist; sourceTree = ""; }; 190 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Example/main.m; sourceTree = ""; }; 191 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 192 | 5D45B51C1DCE777E0020333A /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; }; 193 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 194 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 195 | /* End PBXFileReference section */ 196 | 197 | /* Begin PBXFrameworksBuildPhase section */ 198 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 199 | isa = PBXFrameworksBuildPhase; 200 | buildActionMask = 2147483647; 201 | files = ( 202 | 140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */, 203 | ); 204 | runOnlyForDeploymentPostprocessing = 0; 205 | }; 206 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 207 | isa = PBXFrameworksBuildPhase; 208 | buildActionMask = 2147483647; 209 | files = ( 210 | 5D45B5441DCE778C0020333A /* libRCTAnimation.a in Frameworks */, 211 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 212 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 213 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 214 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 215 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 216 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 217 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 218 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 219 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 220 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 221 | ); 222 | runOnlyForDeploymentPostprocessing = 0; 223 | }; 224 | /* End PBXFrameworksBuildPhase section */ 225 | 226 | /* Begin PBXGroup section */ 227 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 228 | isa = PBXGroup; 229 | children = ( 230 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 231 | ); 232 | name = Products; 233 | sourceTree = ""; 234 | }; 235 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 236 | isa = PBXGroup; 237 | children = ( 238 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 239 | ); 240 | name = Products; 241 | sourceTree = ""; 242 | }; 243 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 244 | isa = PBXGroup; 245 | children = ( 246 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 247 | 5D45B52A1DCE777E0020333A /* libRCTImage-tvOS.a */, 248 | ); 249 | name = Products; 250 | sourceTree = ""; 251 | }; 252 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 253 | isa = PBXGroup; 254 | children = ( 255 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 256 | 5D45B5321DCE777E0020333A /* libRCTNetwork-tvOS.a */, 257 | ); 258 | name = Products; 259 | sourceTree = ""; 260 | }; 261 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 262 | isa = PBXGroup; 263 | children = ( 264 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 265 | ); 266 | name = Products; 267 | sourceTree = ""; 268 | }; 269 | 00E356EF1AD99517003FC87E /* ExampleTests */ = { 270 | isa = PBXGroup; 271 | children = ( 272 | 00E356F21AD99517003FC87E /* ExampleTests.m */, 273 | 00E356F01AD99517003FC87E /* Supporting Files */, 274 | ); 275 | path = ExampleTests; 276 | sourceTree = ""; 277 | }; 278 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 279 | isa = PBXGroup; 280 | children = ( 281 | 00E356F11AD99517003FC87E /* Info.plist */, 282 | ); 283 | name = "Supporting Files"; 284 | sourceTree = ""; 285 | }; 286 | 139105B71AF99BAD00B5F7CC /* Products */ = { 287 | isa = PBXGroup; 288 | children = ( 289 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 290 | 5D45B5361DCE777E0020333A /* libRCTSettings-tvOS.a */, 291 | ); 292 | name = Products; 293 | sourceTree = ""; 294 | }; 295 | 139FDEE71B06529A00C62182 /* Products */ = { 296 | isa = PBXGroup; 297 | children = ( 298 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 299 | 5D45B53F1DCE777E0020333A /* libRCTWebSocket-tvOS.a */, 300 | ); 301 | name = Products; 302 | sourceTree = ""; 303 | }; 304 | 13B07FAE1A68108700A75B9A /* Example */ = { 305 | isa = PBXGroup; 306 | children = ( 307 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 308 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 309 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 310 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 311 | 13B07FB61A68108700A75B9A /* Info.plist */, 312 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 313 | 13B07FB71A68108700A75B9A /* main.m */, 314 | ); 315 | name = Example; 316 | sourceTree = ""; 317 | }; 318 | 146834001AC3E56700842450 /* Products */ = { 319 | isa = PBXGroup; 320 | children = ( 321 | 146834041AC3E56700842450 /* libReact.a */, 322 | 5D45B5431DCE777E0020333A /* libReact-tvOS.a */, 323 | ); 324 | name = Products; 325 | sourceTree = ""; 326 | }; 327 | 5D45B51D1DCE777E0020333A /* Products */ = { 328 | isa = PBXGroup; 329 | children = ( 330 | 5D45B5231DCE777E0020333A /* libRCTAnimation.a */, 331 | 5D45B5251DCE777E0020333A /* libRCTAnimation-tvOS.a */, 332 | ); 333 | name = Products; 334 | sourceTree = ""; 335 | }; 336 | 78C398B11ACF4ADC00677621 /* Products */ = { 337 | isa = PBXGroup; 338 | children = ( 339 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 340 | 5D45B52E1DCE777E0020333A /* libRCTLinking-tvOS.a */, 341 | ); 342 | name = Products; 343 | sourceTree = ""; 344 | }; 345 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 346 | isa = PBXGroup; 347 | children = ( 348 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 349 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 350 | 5D45B51C1DCE777E0020333A /* RCTAnimation.xcodeproj */, 351 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 352 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 353 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 354 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 355 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 356 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 357 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 358 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 359 | ); 360 | name = Libraries; 361 | sourceTree = ""; 362 | }; 363 | 832341B11AAA6A8300B99B32 /* Products */ = { 364 | isa = PBXGroup; 365 | children = ( 366 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 367 | 5D45B53A1DCE777E0020333A /* libRCTText-tvOS.a */, 368 | ); 369 | name = Products; 370 | sourceTree = ""; 371 | }; 372 | 83CBB9F61A601CBA00E9B192 = { 373 | isa = PBXGroup; 374 | children = ( 375 | 13B07FAE1A68108700A75B9A /* Example */, 376 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 377 | 00E356EF1AD99517003FC87E /* ExampleTests */, 378 | 83CBBA001A601CBA00E9B192 /* Products */, 379 | ); 380 | indentWidth = 2; 381 | sourceTree = ""; 382 | tabWidth = 2; 383 | }; 384 | 83CBBA001A601CBA00E9B192 /* Products */ = { 385 | isa = PBXGroup; 386 | children = ( 387 | 13B07F961A680F5B00A75B9A /* Example.app */, 388 | 00E356EE1AD99517003FC87E /* ExampleTests.xctest */, 389 | ); 390 | name = Products; 391 | sourceTree = ""; 392 | }; 393 | /* End PBXGroup section */ 394 | 395 | /* Begin PBXNativeTarget section */ 396 | 00E356ED1AD99517003FC87E /* ExampleTests */ = { 397 | isa = PBXNativeTarget; 398 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ExampleTests" */; 399 | buildPhases = ( 400 | 00E356EA1AD99517003FC87E /* Sources */, 401 | 00E356EB1AD99517003FC87E /* Frameworks */, 402 | 00E356EC1AD99517003FC87E /* Resources */, 403 | ); 404 | buildRules = ( 405 | ); 406 | dependencies = ( 407 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 408 | ); 409 | name = ExampleTests; 410 | productName = ExampleTests; 411 | productReference = 00E356EE1AD99517003FC87E /* ExampleTests.xctest */; 412 | productType = "com.apple.product-type.bundle.unit-test"; 413 | }; 414 | 13B07F861A680F5B00A75B9A /* Example */ = { 415 | isa = PBXNativeTarget; 416 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Example" */; 417 | buildPhases = ( 418 | 13B07F871A680F5B00A75B9A /* Sources */, 419 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 420 | 13B07F8E1A680F5B00A75B9A /* Resources */, 421 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 422 | ); 423 | buildRules = ( 424 | ); 425 | dependencies = ( 426 | ); 427 | name = Example; 428 | productName = "Hello World"; 429 | productReference = 13B07F961A680F5B00A75B9A /* Example.app */; 430 | productType = "com.apple.product-type.application"; 431 | }; 432 | /* End PBXNativeTarget section */ 433 | 434 | /* Begin PBXProject section */ 435 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 436 | isa = PBXProject; 437 | attributes = { 438 | LastUpgradeCheck = 0610; 439 | ORGANIZATIONNAME = Facebook; 440 | TargetAttributes = { 441 | 00E356ED1AD99517003FC87E = { 442 | CreatedOnToolsVersion = 6.2; 443 | TestTargetID = 13B07F861A680F5B00A75B9A; 444 | }; 445 | }; 446 | }; 447 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Example" */; 448 | compatibilityVersion = "Xcode 3.2"; 449 | developmentRegion = English; 450 | hasScannedForEncodings = 0; 451 | knownRegions = ( 452 | en, 453 | Base, 454 | ); 455 | mainGroup = 83CBB9F61A601CBA00E9B192; 456 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 457 | projectDirPath = ""; 458 | projectReferences = ( 459 | { 460 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 461 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 462 | }, 463 | { 464 | ProductGroup = 5D45B51D1DCE777E0020333A /* Products */; 465 | ProjectRef = 5D45B51C1DCE777E0020333A /* RCTAnimation.xcodeproj */; 466 | }, 467 | { 468 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 469 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 470 | }, 471 | { 472 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 473 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 474 | }, 475 | { 476 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 477 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 478 | }, 479 | { 480 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 481 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 482 | }, 483 | { 484 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 485 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 486 | }, 487 | { 488 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 489 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 490 | }, 491 | { 492 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 493 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 494 | }, 495 | { 496 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 497 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 498 | }, 499 | { 500 | ProductGroup = 146834001AC3E56700842450 /* Products */; 501 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 502 | }, 503 | ); 504 | projectRoot = ""; 505 | targets = ( 506 | 13B07F861A680F5B00A75B9A /* Example */, 507 | 00E356ED1AD99517003FC87E /* ExampleTests */, 508 | ); 509 | }; 510 | /* End PBXProject section */ 511 | 512 | /* Begin PBXReferenceProxy section */ 513 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 514 | isa = PBXReferenceProxy; 515 | fileType = archive.ar; 516 | path = libRCTActionSheet.a; 517 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 518 | sourceTree = BUILT_PRODUCTS_DIR; 519 | }; 520 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 521 | isa = PBXReferenceProxy; 522 | fileType = archive.ar; 523 | path = libRCTGeolocation.a; 524 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 525 | sourceTree = BUILT_PRODUCTS_DIR; 526 | }; 527 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 528 | isa = PBXReferenceProxy; 529 | fileType = archive.ar; 530 | path = libRCTImage.a; 531 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 532 | sourceTree = BUILT_PRODUCTS_DIR; 533 | }; 534 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 535 | isa = PBXReferenceProxy; 536 | fileType = archive.ar; 537 | path = libRCTNetwork.a; 538 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 539 | sourceTree = BUILT_PRODUCTS_DIR; 540 | }; 541 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 542 | isa = PBXReferenceProxy; 543 | fileType = archive.ar; 544 | path = libRCTVibration.a; 545 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 546 | sourceTree = BUILT_PRODUCTS_DIR; 547 | }; 548 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 549 | isa = PBXReferenceProxy; 550 | fileType = archive.ar; 551 | path = libRCTSettings.a; 552 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 553 | sourceTree = BUILT_PRODUCTS_DIR; 554 | }; 555 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 556 | isa = PBXReferenceProxy; 557 | fileType = archive.ar; 558 | path = libRCTWebSocket.a; 559 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 560 | sourceTree = BUILT_PRODUCTS_DIR; 561 | }; 562 | 146834041AC3E56700842450 /* libReact.a */ = { 563 | isa = PBXReferenceProxy; 564 | fileType = archive.ar; 565 | path = libReact.a; 566 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 567 | sourceTree = BUILT_PRODUCTS_DIR; 568 | }; 569 | 5D45B5231DCE777E0020333A /* libRCTAnimation.a */ = { 570 | isa = PBXReferenceProxy; 571 | fileType = archive.ar; 572 | path = libRCTAnimation.a; 573 | remoteRef = 5D45B5221DCE777E0020333A /* PBXContainerItemProxy */; 574 | sourceTree = BUILT_PRODUCTS_DIR; 575 | }; 576 | 5D45B5251DCE777E0020333A /* libRCTAnimation-tvOS.a */ = { 577 | isa = PBXReferenceProxy; 578 | fileType = archive.ar; 579 | path = "libRCTAnimation-tvOS.a"; 580 | remoteRef = 5D45B5241DCE777E0020333A /* PBXContainerItemProxy */; 581 | sourceTree = BUILT_PRODUCTS_DIR; 582 | }; 583 | 5D45B52A1DCE777E0020333A /* libRCTImage-tvOS.a */ = { 584 | isa = PBXReferenceProxy; 585 | fileType = archive.ar; 586 | path = "libRCTImage-tvOS.a"; 587 | remoteRef = 5D45B5291DCE777E0020333A /* PBXContainerItemProxy */; 588 | sourceTree = BUILT_PRODUCTS_DIR; 589 | }; 590 | 5D45B52E1DCE777E0020333A /* libRCTLinking-tvOS.a */ = { 591 | isa = PBXReferenceProxy; 592 | fileType = archive.ar; 593 | path = "libRCTLinking-tvOS.a"; 594 | remoteRef = 5D45B52D1DCE777E0020333A /* PBXContainerItemProxy */; 595 | sourceTree = BUILT_PRODUCTS_DIR; 596 | }; 597 | 5D45B5321DCE777E0020333A /* libRCTNetwork-tvOS.a */ = { 598 | isa = PBXReferenceProxy; 599 | fileType = archive.ar; 600 | path = "libRCTNetwork-tvOS.a"; 601 | remoteRef = 5D45B5311DCE777E0020333A /* PBXContainerItemProxy */; 602 | sourceTree = BUILT_PRODUCTS_DIR; 603 | }; 604 | 5D45B5361DCE777E0020333A /* libRCTSettings-tvOS.a */ = { 605 | isa = PBXReferenceProxy; 606 | fileType = archive.ar; 607 | path = "libRCTSettings-tvOS.a"; 608 | remoteRef = 5D45B5351DCE777E0020333A /* PBXContainerItemProxy */; 609 | sourceTree = BUILT_PRODUCTS_DIR; 610 | }; 611 | 5D45B53A1DCE777E0020333A /* libRCTText-tvOS.a */ = { 612 | isa = PBXReferenceProxy; 613 | fileType = archive.ar; 614 | path = "libRCTText-tvOS.a"; 615 | remoteRef = 5D45B5391DCE777E0020333A /* PBXContainerItemProxy */; 616 | sourceTree = BUILT_PRODUCTS_DIR; 617 | }; 618 | 5D45B53F1DCE777E0020333A /* libRCTWebSocket-tvOS.a */ = { 619 | isa = PBXReferenceProxy; 620 | fileType = archive.ar; 621 | path = "libRCTWebSocket-tvOS.a"; 622 | remoteRef = 5D45B53E1DCE777E0020333A /* PBXContainerItemProxy */; 623 | sourceTree = BUILT_PRODUCTS_DIR; 624 | }; 625 | 5D45B5431DCE777E0020333A /* libReact-tvOS.a */ = { 626 | isa = PBXReferenceProxy; 627 | fileType = archive.ar; 628 | path = "libReact-tvOS.a"; 629 | remoteRef = 5D45B5421DCE777E0020333A /* PBXContainerItemProxy */; 630 | sourceTree = BUILT_PRODUCTS_DIR; 631 | }; 632 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 633 | isa = PBXReferenceProxy; 634 | fileType = archive.ar; 635 | path = libRCTLinking.a; 636 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 637 | sourceTree = BUILT_PRODUCTS_DIR; 638 | }; 639 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 640 | isa = PBXReferenceProxy; 641 | fileType = archive.ar; 642 | path = libRCTText.a; 643 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 644 | sourceTree = BUILT_PRODUCTS_DIR; 645 | }; 646 | /* End PBXReferenceProxy section */ 647 | 648 | /* Begin PBXResourcesBuildPhase section */ 649 | 00E356EC1AD99517003FC87E /* Resources */ = { 650 | isa = PBXResourcesBuildPhase; 651 | buildActionMask = 2147483647; 652 | files = ( 653 | ); 654 | runOnlyForDeploymentPostprocessing = 0; 655 | }; 656 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 657 | isa = PBXResourcesBuildPhase; 658 | buildActionMask = 2147483647; 659 | files = ( 660 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 661 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 662 | ); 663 | runOnlyForDeploymentPostprocessing = 0; 664 | }; 665 | /* End PBXResourcesBuildPhase section */ 666 | 667 | /* Begin PBXShellScriptBuildPhase section */ 668 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 669 | isa = PBXShellScriptBuildPhase; 670 | buildActionMask = 2147483647; 671 | files = ( 672 | ); 673 | inputPaths = ( 674 | ); 675 | name = "Bundle React Native code and images"; 676 | outputPaths = ( 677 | ); 678 | runOnlyForDeploymentPostprocessing = 0; 679 | shellPath = /bin/sh; 680 | shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; 681 | }; 682 | /* End PBXShellScriptBuildPhase section */ 683 | 684 | /* Begin PBXSourcesBuildPhase section */ 685 | 00E356EA1AD99517003FC87E /* Sources */ = { 686 | isa = PBXSourcesBuildPhase; 687 | buildActionMask = 2147483647; 688 | files = ( 689 | 00E356F31AD99517003FC87E /* ExampleTests.m in Sources */, 690 | ); 691 | runOnlyForDeploymentPostprocessing = 0; 692 | }; 693 | 13B07F871A680F5B00A75B9A /* Sources */ = { 694 | isa = PBXSourcesBuildPhase; 695 | buildActionMask = 2147483647; 696 | files = ( 697 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 698 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 699 | ); 700 | runOnlyForDeploymentPostprocessing = 0; 701 | }; 702 | /* End PBXSourcesBuildPhase section */ 703 | 704 | /* Begin PBXTargetDependency section */ 705 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 706 | isa = PBXTargetDependency; 707 | target = 13B07F861A680F5B00A75B9A /* Example */; 708 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 709 | }; 710 | /* End PBXTargetDependency section */ 711 | 712 | /* Begin PBXVariantGroup section */ 713 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 714 | isa = PBXVariantGroup; 715 | children = ( 716 | 13B07FB21A68108700A75B9A /* Base */, 717 | ); 718 | name = LaunchScreen.xib; 719 | path = Example; 720 | sourceTree = ""; 721 | }; 722 | /* End PBXVariantGroup section */ 723 | 724 | /* Begin XCBuildConfiguration section */ 725 | 00E356F61AD99517003FC87E /* Debug */ = { 726 | isa = XCBuildConfiguration; 727 | buildSettings = { 728 | BUNDLE_LOADER = "$(TEST_HOST)"; 729 | GCC_PREPROCESSOR_DEFINITIONS = ( 730 | "DEBUG=1", 731 | "$(inherited)", 732 | ); 733 | INFOPLIST_FILE = ExampleTests/Info.plist; 734 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 735 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 736 | PRODUCT_NAME = "$(TARGET_NAME)"; 737 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; 738 | }; 739 | name = Debug; 740 | }; 741 | 00E356F71AD99517003FC87E /* Release */ = { 742 | isa = XCBuildConfiguration; 743 | buildSettings = { 744 | BUNDLE_LOADER = "$(TEST_HOST)"; 745 | COPY_PHASE_STRIP = NO; 746 | INFOPLIST_FILE = ExampleTests/Info.plist; 747 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 748 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 749 | PRODUCT_NAME = "$(TARGET_NAME)"; 750 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Example.app/Example"; 751 | }; 752 | name = Release; 753 | }; 754 | 13B07F941A680F5B00A75B9A /* Debug */ = { 755 | isa = XCBuildConfiguration; 756 | buildSettings = { 757 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 758 | CURRENT_PROJECT_VERSION = 1; 759 | DEAD_CODE_STRIPPING = NO; 760 | HEADER_SEARCH_PATHS = ( 761 | "$(inherited)", 762 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 763 | "$(SRCROOT)/../node_modules/react-native/React/**", 764 | ); 765 | INFOPLIST_FILE = Example/Info.plist; 766 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 767 | OTHER_LDFLAGS = ( 768 | "$(inherited)", 769 | "-ObjC", 770 | "-lc++", 771 | ); 772 | PRODUCT_NAME = Example; 773 | VERSIONING_SYSTEM = "apple-generic"; 774 | }; 775 | name = Debug; 776 | }; 777 | 13B07F951A680F5B00A75B9A /* Release */ = { 778 | isa = XCBuildConfiguration; 779 | buildSettings = { 780 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 781 | CURRENT_PROJECT_VERSION = 1; 782 | HEADER_SEARCH_PATHS = ( 783 | "$(inherited)", 784 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 785 | "$(SRCROOT)/../node_modules/react-native/React/**", 786 | ); 787 | INFOPLIST_FILE = Example/Info.plist; 788 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 789 | OTHER_LDFLAGS = ( 790 | "$(inherited)", 791 | "-ObjC", 792 | "-lc++", 793 | ); 794 | PRODUCT_NAME = Example; 795 | VERSIONING_SYSTEM = "apple-generic"; 796 | }; 797 | name = Release; 798 | }; 799 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 800 | isa = XCBuildConfiguration; 801 | buildSettings = { 802 | ALWAYS_SEARCH_USER_PATHS = NO; 803 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 804 | CLANG_CXX_LIBRARY = "libc++"; 805 | CLANG_ENABLE_MODULES = YES; 806 | CLANG_ENABLE_OBJC_ARC = YES; 807 | CLANG_WARN_BOOL_CONVERSION = YES; 808 | CLANG_WARN_CONSTANT_CONVERSION = YES; 809 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 810 | CLANG_WARN_EMPTY_BODY = YES; 811 | CLANG_WARN_ENUM_CONVERSION = YES; 812 | CLANG_WARN_INT_CONVERSION = YES; 813 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 814 | CLANG_WARN_UNREACHABLE_CODE = YES; 815 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 816 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 817 | COPY_PHASE_STRIP = NO; 818 | ENABLE_STRICT_OBJC_MSGSEND = YES; 819 | GCC_C_LANGUAGE_STANDARD = gnu99; 820 | GCC_DYNAMIC_NO_PIC = NO; 821 | GCC_OPTIMIZATION_LEVEL = 0; 822 | GCC_PREPROCESSOR_DEFINITIONS = ( 823 | "DEBUG=1", 824 | "$(inherited)", 825 | ); 826 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 827 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 828 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 829 | GCC_WARN_UNDECLARED_SELECTOR = YES; 830 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 831 | GCC_WARN_UNUSED_FUNCTION = YES; 832 | GCC_WARN_UNUSED_VARIABLE = YES; 833 | HEADER_SEARCH_PATHS = ( 834 | "$(inherited)", 835 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 836 | "$(SRCROOT)/../node_modules/react-native/React/**", 837 | ); 838 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 839 | MTL_ENABLE_DEBUG_INFO = YES; 840 | ONLY_ACTIVE_ARCH = YES; 841 | SDKROOT = iphoneos; 842 | }; 843 | name = Debug; 844 | }; 845 | 83CBBA211A601CBA00E9B192 /* Release */ = { 846 | isa = XCBuildConfiguration; 847 | buildSettings = { 848 | ALWAYS_SEARCH_USER_PATHS = NO; 849 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 850 | CLANG_CXX_LIBRARY = "libc++"; 851 | CLANG_ENABLE_MODULES = YES; 852 | CLANG_ENABLE_OBJC_ARC = YES; 853 | CLANG_WARN_BOOL_CONVERSION = YES; 854 | CLANG_WARN_CONSTANT_CONVERSION = YES; 855 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 856 | CLANG_WARN_EMPTY_BODY = YES; 857 | CLANG_WARN_ENUM_CONVERSION = YES; 858 | CLANG_WARN_INT_CONVERSION = YES; 859 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 860 | CLANG_WARN_UNREACHABLE_CODE = YES; 861 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 862 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 863 | COPY_PHASE_STRIP = YES; 864 | ENABLE_NS_ASSERTIONS = NO; 865 | ENABLE_STRICT_OBJC_MSGSEND = YES; 866 | GCC_C_LANGUAGE_STANDARD = gnu99; 867 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 868 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 869 | GCC_WARN_UNDECLARED_SELECTOR = YES; 870 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 871 | GCC_WARN_UNUSED_FUNCTION = YES; 872 | GCC_WARN_UNUSED_VARIABLE = YES; 873 | HEADER_SEARCH_PATHS = ( 874 | "$(inherited)", 875 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 876 | "$(SRCROOT)/../node_modules/react-native/React/**", 877 | ); 878 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 879 | MTL_ENABLE_DEBUG_INFO = NO; 880 | SDKROOT = iphoneos; 881 | VALIDATE_PRODUCT = YES; 882 | }; 883 | name = Release; 884 | }; 885 | /* End XCBuildConfiguration section */ 886 | 887 | /* Begin XCConfigurationList section */ 888 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ExampleTests" */ = { 889 | isa = XCConfigurationList; 890 | buildConfigurations = ( 891 | 00E356F61AD99517003FC87E /* Debug */, 892 | 00E356F71AD99517003FC87E /* Release */, 893 | ); 894 | defaultConfigurationIsVisible = 0; 895 | defaultConfigurationName = Release; 896 | }; 897 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Example" */ = { 898 | isa = XCConfigurationList; 899 | buildConfigurations = ( 900 | 13B07F941A680F5B00A75B9A /* Debug */, 901 | 13B07F951A680F5B00A75B9A /* Release */, 902 | ); 903 | defaultConfigurationIsVisible = 0; 904 | defaultConfigurationName = Release; 905 | }; 906 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Example" */ = { 907 | isa = XCConfigurationList; 908 | buildConfigurations = ( 909 | 83CBBA201A601CBA00E9B192 /* Debug */, 910 | 83CBBA211A601CBA00E9B192 /* Release */, 911 | ); 912 | defaultConfigurationIsVisible = 0; 913 | defaultConfigurationName = Release; 914 | }; 915 | /* End XCConfigurationList section */ 916 | }; 917 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 918 | } 919 | -------------------------------------------------------------------------------- /Example/ios/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /Example/ios/Example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /Example/ios/Example/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"Example" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /Example/ios/Example/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /Example/ios/Example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /Example/ios/Example/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/ExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface ExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation ExampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "react": "15.4.1", 11 | "react-native": "0.38.0", 12 | "react-native-animatable": "file:../" 13 | }, 14 | "jest": { 15 | "preset": "react-native" 16 | }, 17 | "devDependencies": { 18 | "babel-jest": "17.0.2", 19 | "babel-preset-react-native": "1.9.0", 20 | "jest": "17.0.3", 21 | "react-test-renderer": "15.4.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /__tests__/createAnimation.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | 3 | import createAnimation from '../createAnimation'; 4 | 5 | describe('createAnimation', () => { 6 | it('should support from and to keys', () => { 7 | expect(createAnimation({ 8 | from: { 9 | opacity: 0, 10 | }, 11 | to: { 12 | opacity: 1, 13 | }, 14 | })).toEqual({ 15 | opacity: { 16 | inputRange: [0, 1], 17 | outputRange: [0, 1], 18 | }, 19 | }); 20 | }); 21 | 22 | it('should support fraction keyframes', () => { 23 | expect(createAnimation({ 24 | 0: { 25 | opacity: 0, 26 | }, 27 | 1: { 28 | opacity: 1, 29 | }, 30 | })).toEqual({ 31 | opacity: { 32 | inputRange: [0, 1], 33 | outputRange: [0, 1], 34 | }, 35 | }); 36 | }); 37 | 38 | it('should throw if only one keyframe is defined', () => { 39 | expect(() => createAnimation({ 40 | from: { 41 | opacity: 1, 42 | }, 43 | })).toThrow('Animation definitions must have at least two values.'); 44 | }); 45 | 46 | it('should support and flatten transform values', () => { 47 | expect(createAnimation({ 48 | from: { 49 | transform: [{ 50 | translateY: 0, 51 | }], 52 | }, 53 | to: { 54 | transform: [{ 55 | translateY: 10, 56 | }], 57 | }, 58 | })).toEqual({ 59 | translateY: { 60 | inputRange: [0, 1], 61 | outputRange: [0, 10], 62 | }, 63 | }); 64 | }); 65 | 66 | it('should support and multiple properties with different keyframes', () => { 67 | expect(createAnimation({ 68 | 0: { 69 | transform: [{ 70 | scale: 0, 71 | }], 72 | opacity: 0, 73 | }, 74 | 0.8: { 75 | transform: [{ 76 | scale: 1, 77 | }], 78 | }, 79 | 1: { 80 | opacity: 1, 81 | }, 82 | })).toEqual({ 83 | scale: { 84 | inputRange: [0, 0.8], 85 | outputRange: [0, 1], 86 | }, 87 | opacity: { 88 | inputRange: [0, 1], 89 | outputRange: [0, 1], 90 | }, 91 | }); 92 | }); 93 | }); 94 | -------------------------------------------------------------------------------- /__tests__/getDefaultStyleValue.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | 3 | import getDefaultStyleValue from '../getDefaultStyleValue'; 4 | 5 | describe('getDefaultStyleValue', () => { 6 | it('should return 0deg for skew and rotate keys', () => { 7 | expect(getDefaultStyleValue('skewX')).toEqual('0deg'); 8 | expect(getDefaultStyleValue('skewY')).toEqual('0deg'); 9 | expect(getDefaultStyleValue('rotateX')).toEqual('0deg'); 10 | expect(getDefaultStyleValue('rotateY')).toEqual('0deg'); 11 | }); 12 | 13 | it('should fallback to general margins', () => { 14 | expect(getDefaultStyleValue('marginTop', { margin: 10 })).toEqual(10); 15 | expect(getDefaultStyleValue('marginTop', { marginVertical: 10 })).toEqual(10); 16 | expect(getDefaultStyleValue('marginLeft', { margin: 10 })).toEqual(10); 17 | expect(getDefaultStyleValue('marginLeft', { marginVertical: 10 })).toEqual(0); 18 | expect(getDefaultStyleValue('marginHorizontal', { margin: 10 })).toEqual(10); 19 | }); 20 | 21 | it('should fallback to general paddings', () => { 22 | expect(getDefaultStyleValue('paddingTop', { padding: 10 })).toEqual(10); 23 | expect(getDefaultStyleValue('paddingTop', { paddingVertical: 10 })).toEqual(10); 24 | expect(getDefaultStyleValue('paddingLeft', { padding: 10 })).toEqual(10); 25 | expect(getDefaultStyleValue('paddingLeft', { paddingVertical: 10 })).toEqual(0); 26 | expect(getDefaultStyleValue('paddingHorizontal', { padding: 10 })).toEqual(10); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /createAnimatableComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { Animated, Easing } from 'react-native'; 3 | import wrapStyleTransforms from './wrapStyleTransforms'; 4 | import getStyleValues from './getStyleValues'; 5 | import flattenStyle from './flattenStyle'; 6 | import createAnimation from './createAnimation'; 7 | import { getAnimationByName, getAnimationNames } from './registry'; 8 | import EASING_FUNCTIONS from './easing'; 9 | 10 | // These styles are not number based and thus needs to be interpolated 11 | const INTERPOLATION_STYLE_PROPERTIES = [ 12 | // Transform styles 13 | 'rotate', 14 | 'rotateX', 15 | 'rotateY', 16 | 'rotateZ', 17 | 'skewX', 18 | 'skewY', 19 | 'transformMatrix', 20 | // View styles 21 | 'backgroundColor', 22 | 'borderColor', 23 | 'borderTopColor', 24 | 'borderRightColor', 25 | 'borderBottomColor', 26 | 'borderLeftColor', 27 | 'shadowColor', 28 | // Text styles 29 | 'color', 30 | 'textDecorationColor', 31 | // Image styles 32 | 'tintColor', 33 | ]; 34 | 35 | // Create a copy of `source` without `keys` 36 | function omit(keys, source) { 37 | const filtered = {}; 38 | Object.keys(source).forEach(key => { 39 | if (keys.indexOf(key) === -1) { 40 | filtered[key] = source[key]; 41 | } 42 | }); 43 | return filtered; 44 | } 45 | 46 | // Yes it's absurd, but actually fast 47 | function deepEquals(a, b) { 48 | return a === b || JSON.stringify(a) === JSON.stringify(b); 49 | } 50 | 51 | // Determine to what value the animation should tween to 52 | function getAnimationTarget(iteration, direction) { 53 | switch (direction) { 54 | case 'reverse': 55 | return 0; 56 | case 'alternate': 57 | return iteration % 2 ? 0 : 1; 58 | case 'alternate-reverse': 59 | return iteration % 2 ? 1 : 0; 60 | case 'normal': 61 | default: 62 | return 1; 63 | } 64 | } 65 | 66 | // Like getAnimationTarget but opposite 67 | function getAnimationOrigin(iteration, direction) { 68 | return getAnimationTarget(iteration, direction) ? 0 : 1; 69 | } 70 | 71 | function getCompiledAnimation(animation) { 72 | if (typeof animation === 'string') { 73 | const compiledAnimation = getAnimationByName(animation); 74 | if (!compiledAnimation) { 75 | throw new Error(`No animation registred by the name of ${animation}`); 76 | } 77 | return compiledAnimation; 78 | } 79 | return createAnimation(animation); 80 | } 81 | 82 | function makeInterpolatedStyle(compiledAnimation, animationValue) { 83 | const style = {}; 84 | Object.keys(compiledAnimation).forEach(key => { 85 | if (key === 'style') { 86 | Object.assign(style, compiledAnimation.style); 87 | } else if (key !== 'easing') { 88 | style[key] = animationValue.interpolate(compiledAnimation[key]); 89 | } 90 | }); 91 | return wrapStyleTransforms(style); 92 | } 93 | 94 | function transitionToValue( 95 | transitionValue, 96 | toValue, 97 | duration, 98 | easing, 99 | useNativeDriver = false, 100 | delay 101 | ) { 102 | if (duration || easing || delay) { 103 | Animated.timing(transitionValue, { 104 | toValue, 105 | delay, 106 | duration: duration || 1000, 107 | easing: typeof easing === 'function' 108 | ? easing 109 | : EASING_FUNCTIONS[easing || 'ease'], 110 | useNativeDriver, 111 | }).start(); 112 | } else { 113 | Animated.spring(transitionValue, { toValue, useNativeDriver }).start(); 114 | } 115 | } 116 | 117 | // Make (almost) any component animatable, similar to Animated.createAnimatedComponent 118 | export default function createAnimatableComponent(WrappedComponent) { 119 | const wrappedComponentName = 120 | WrappedComponent.displayName || WrappedComponent.name || 'Component'; 121 | 122 | const Animatable = Animated.createAnimatedComponent(WrappedComponent); 123 | 124 | return class AnimatableComponent extends Component { 125 | static displayName = `withAnimatable(${wrappedComponentName})`; 126 | 127 | static propTypes = { 128 | animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), 129 | duration: PropTypes.number, 130 | direction: PropTypes.oneOf([ 131 | 'normal', 132 | 'reverse', 133 | 'alternate', 134 | 'alternate-reverse', 135 | ]), 136 | delay: PropTypes.number, 137 | easing: PropTypes.oneOfType([ 138 | PropTypes.oneOf(Object.keys(EASING_FUNCTIONS)), 139 | PropTypes.func, 140 | ]), 141 | iterationCount(props, propName) { 142 | const val = props[propName]; 143 | if (val !== 'infinite' && !(typeof val === 'number' && val >= 1)) { 144 | return new Error( 145 | 'iterationCount must be a positive number or "infinite"' 146 | ); 147 | } 148 | return null; 149 | }, 150 | onAnimationBegin: PropTypes.func, 151 | onAnimationEnd: PropTypes.func, 152 | style: PropTypes.oneOfType([ 153 | PropTypes.number, 154 | PropTypes.array, 155 | PropTypes.object, 156 | ]), 157 | transition: PropTypes.oneOfType([ 158 | PropTypes.string, 159 | PropTypes.arrayOf(PropTypes.string), 160 | ]), 161 | useNativeDriver: PropTypes.bool, 162 | }; 163 | 164 | static defaultProps = { 165 | delay: 0, 166 | iterationCount: 1, 167 | onAnimationBegin() {}, 168 | onAnimationEnd() {}, 169 | useNativeDriver: false, 170 | }; 171 | 172 | constructor(props) { 173 | super(props); 174 | 175 | const animationValue = new Animated.Value( 176 | getAnimationOrigin(0, this.props.direction) 177 | ); 178 | let animationStyle = {}; 179 | let compiledAnimation = {}; 180 | if (props.animation) { 181 | compiledAnimation = getCompiledAnimation(props.animation); 182 | animationStyle = makeInterpolatedStyle( 183 | compiledAnimation, 184 | animationValue 185 | ); 186 | } 187 | this.state = { 188 | animationValue, 189 | animationStyle, 190 | compiledAnimation, 191 | transitionStyle: {}, 192 | transitionValues: {}, 193 | currentTransitionValues: {}, 194 | }; 195 | 196 | if (props.transition) { 197 | this.state = { 198 | ...this.state, 199 | ...this.initializeTransitionState(props.transition), 200 | }; 201 | } 202 | this.delayTimer = null; 203 | 204 | // Alias registered animations for backwards compatibility 205 | getAnimationNames().forEach(animationName => { 206 | if (!(animationName in this)) { 207 | this[animationName] = this.animate.bind(this, animationName); 208 | } 209 | }); 210 | } 211 | 212 | initializeTransitionState(transitionKeys) { 213 | const transitionValues = {}; 214 | const styleValues = {}; 215 | 216 | const currentTransitionValues = getStyleValues( 217 | transitionKeys, 218 | this.props.style 219 | ); 220 | Object.keys(currentTransitionValues).forEach(key => { 221 | const value = currentTransitionValues[key]; 222 | if (INTERPOLATION_STYLE_PROPERTIES.indexOf(key) !== -1) { 223 | transitionValues[key] = new Animated.Value(0); 224 | styleValues[key] = value; 225 | } else { 226 | transitionValues[key] = styleValues[key] = new Animated.Value(value); 227 | } 228 | }); 229 | 230 | return { 231 | currentTransitionValues, 232 | transitionStyle: styleValues, 233 | transitionValues, 234 | }; 235 | } 236 | 237 | getTransitionState(keys) { 238 | const transitionKeys = typeof keys === 'string' ? [keys] : keys; 239 | let { 240 | transitionValues, 241 | currentTransitionValues, 242 | transitionStyle, 243 | } = this.state; 244 | const missingKeys = transitionKeys.filter( 245 | key => !this.state.transitionValues[key] 246 | ); 247 | if (missingKeys.length) { 248 | const transitionState = this.initializeTransitionState(missingKeys); 249 | transitionValues = { 250 | ...transitionValues, 251 | ...transitionState.transitionValues, 252 | }; 253 | currentTransitionValues = { 254 | ...currentTransitionValues, 255 | ...transitionState.currentTransitionValues, 256 | }; 257 | transitionStyle = { 258 | ...transitionStyle, 259 | ...transitionState.transitionStyle, 260 | }; 261 | } 262 | return { transitionValues, currentTransitionValues, transitionStyle }; 263 | } 264 | 265 | ref = null; 266 | handleRef = ref => { 267 | this.ref = ref; 268 | }; 269 | 270 | setNativeProps(nativeProps) { 271 | if (this.ref) { 272 | this.ref.setNativeProps(nativeProps); 273 | } 274 | } 275 | 276 | componentDidMount() { 277 | const { 278 | animation, 279 | duration, 280 | delay, 281 | onAnimationBegin, 282 | onAnimationEnd, 283 | } = this.props; 284 | if (animation) { 285 | const startAnimation = () => { 286 | onAnimationBegin(); 287 | this.startAnimation(duration, 0, onAnimationEnd); 288 | this.delayTimer = null; 289 | }; 290 | if (delay) { 291 | this.delayTimer = setTimeout(startAnimation, delay); 292 | } else { 293 | startAnimation(); 294 | } 295 | } 296 | } 297 | 298 | componentWillReceiveProps(props) { 299 | const { 300 | animation, 301 | delay, 302 | duration, 303 | easing, 304 | transition, 305 | onAnimationBegin, 306 | onAnimationEnd, 307 | } = props; 308 | 309 | if (transition) { 310 | const values = getStyleValues(transition, props.style); 311 | this.transitionTo(values, duration, easing, delay); 312 | } else if (!deepEquals(animation, this.props.animation)) { 313 | if (animation) { 314 | if (this.delayTimer) { 315 | this.setAnimation(animation); 316 | } else { 317 | onAnimationBegin(); 318 | this.animate(animation, duration).then(onAnimationEnd); 319 | } 320 | } else { 321 | this.stopAnimation(); 322 | } 323 | } 324 | } 325 | 326 | componentWillUnmount() { 327 | if (this.delayTimer) { 328 | clearTimeout(this.delayTimer); 329 | } 330 | } 331 | 332 | setAnimation(animation, callback) { 333 | const compiledAnimation = getCompiledAnimation(animation); 334 | const animationStyle = makeInterpolatedStyle( 335 | compiledAnimation, 336 | this.state.animationValue 337 | ); 338 | this.setState({ animationStyle, compiledAnimation }, callback); 339 | } 340 | 341 | animate(animation, duration) { 342 | return new Promise(resolve => { 343 | this.setAnimation(animation, () => { 344 | this.startAnimation(duration, 0, resolve); 345 | }); 346 | }); 347 | } 348 | 349 | stopAnimation() { 350 | this.setState({ 351 | scheduledAnimation: false, 352 | animationStyle: {}, 353 | }); 354 | this.state.animationValue.stopAnimation(); 355 | if (this.delayTimer) { 356 | clearTimeout(this.delayTimer); 357 | this.delayTimer = null; 358 | } 359 | } 360 | 361 | startAnimation(duration, iteration, callback) { 362 | const { animationValue, compiledAnimation } = this.state; 363 | const { direction, iterationCount, useNativeDriver } = this.props; 364 | let easing = this.props.easing || compiledAnimation.easing || 'ease'; 365 | let currentIteration = iteration || 0; 366 | const fromValue = getAnimationOrigin(currentIteration, direction); 367 | const toValue = getAnimationTarget(currentIteration, direction); 368 | animationValue.setValue(fromValue); 369 | 370 | if (typeof easing === 'string') { 371 | easing = EASING_FUNCTIONS[easing]; 372 | } 373 | // Reverse easing if on the way back 374 | const reversed = 375 | direction === 'reverse' || 376 | (direction === 'alternate' && !toValue) || 377 | (direction === 'alternate-reverse' && !toValue); 378 | if (reversed) { 379 | easing = Easing.out(easing); 380 | } 381 | 382 | Animated.timing(animationValue, { 383 | toValue, 384 | easing, 385 | isInteraction: iterationCount <= 1, 386 | duration: duration || this.props.duration || 1000, 387 | useNativeDriver, 388 | }).start(endState => { 389 | currentIteration += 1; 390 | if ( 391 | endState.finished && 392 | this.props.animation && 393 | (iterationCount === 'infinite' || currentIteration < iterationCount) 394 | ) { 395 | this.startAnimation(duration, currentIteration, callback); 396 | } else if (callback) { 397 | callback(endState); 398 | } 399 | }); 400 | } 401 | 402 | transition(fromValues, toValues, duration, easing) { 403 | const fromValuesFlat = flattenStyle(fromValues); 404 | const toValuesFlat = flattenStyle(toValues); 405 | const transitionKeys = Object.keys(toValuesFlat); 406 | const { 407 | transitionValues, 408 | currentTransitionValues, 409 | transitionStyle, 410 | } = this.getTransitionState(transitionKeys); 411 | 412 | transitionKeys.forEach(property => { 413 | const fromValue = fromValuesFlat[property]; 414 | const toValue = toValuesFlat[property]; 415 | let transitionValue = transitionValues[property]; 416 | if (!transitionValue) { 417 | transitionValue = new Animated.Value(0); 418 | } 419 | transitionStyle[property] = transitionValue; 420 | const needsInterpolation = 421 | INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1; 422 | if (needsInterpolation) { 423 | transitionValue.setValue(0); 424 | transitionStyle[property] = transitionValue.interpolate({ 425 | inputRange: [0, 1], 426 | outputRange: [fromValue, toValue], 427 | }); 428 | currentTransitionValues[property] = toValue; 429 | toValuesFlat[property] = 1; 430 | } else { 431 | transitionValue.setValue(fromValue); 432 | } 433 | }); 434 | this.setState( 435 | { transitionValues, transitionStyle, currentTransitionValues }, 436 | () => { 437 | this.transitionToValues( 438 | toValuesFlat, 439 | duration || this.props.duration, 440 | easing, 441 | this.props.delay 442 | ); 443 | } 444 | ); 445 | } 446 | 447 | transitionTo(toValues, duration, easing, delay) { 448 | const { currentTransitionValues } = this.state; 449 | const toValuesFlat = flattenStyle(toValues); 450 | const transitions = { 451 | from: {}, 452 | to: {}, 453 | }; 454 | 455 | Object.keys(toValuesFlat).forEach(property => { 456 | const toValue = toValuesFlat[property]; 457 | const needsInterpolation = 458 | INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1; 459 | const transitionStyle = this.state.transitionStyle[property]; 460 | const transitionValue = this.state.transitionValues[property]; 461 | if ( 462 | !needsInterpolation && 463 | transitionStyle && 464 | transitionStyle === transitionValue 465 | ) { 466 | transitionToValue( 467 | transitionValue, 468 | toValue, 469 | duration, 470 | easing, 471 | this.props.useNativeDriver, 472 | delay 473 | ); 474 | } else { 475 | let currentTransitionValue = currentTransitionValues[property]; 476 | if ( 477 | typeof currentTransitionValue === 'undefined' && 478 | this.props.style 479 | ) { 480 | const style = getStyleValues(property, this.props.style); 481 | currentTransitionValue = style[property]; 482 | } 483 | transitions.from[property] = currentTransitionValue; 484 | transitions.to[property] = toValue; 485 | } 486 | }); 487 | 488 | if (Object.keys(transitions.from).length) { 489 | this.transition(transitions.from, transitions.to, duration, easing); 490 | } 491 | } 492 | 493 | transitionToValues(toValues, duration, easing, delay) { 494 | Object.keys(toValues).forEach(property => { 495 | const transitionValue = this.state.transitionValues[property]; 496 | const toValue = toValues[property]; 497 | transitionToValue( 498 | transitionValue, 499 | toValue, 500 | duration, 501 | easing, 502 | this.props.useNativeDriver, 503 | delay 504 | ); 505 | }); 506 | } 507 | 508 | render() { 509 | const { style, animation, transition } = this.props; 510 | if (animation && transition) { 511 | throw new Error('You cannot combine animation and transition props'); 512 | } 513 | const restProps = omit( 514 | Object.keys(AnimatableComponent.propTypes), 515 | this.props 516 | ); 517 | 518 | return ( 519 | 528 | ); 529 | } 530 | }; 531 | } 532 | -------------------------------------------------------------------------------- /createAnimation.js: -------------------------------------------------------------------------------- 1 | import flattenStyle from './flattenStyle'; 2 | 3 | function compareNumbers(a, b) { 4 | return a - b; 5 | } 6 | 7 | function notNull(value) { 8 | return value !== null; 9 | } 10 | 11 | function parsePosition(value) { 12 | if (value === 'from') { 13 | return 0; 14 | } else if (value === 'to') { 15 | return 1; 16 | } 17 | const parsed = parseFloat(value, 10); 18 | if (isNaN(parsed) || parsed < 0 || parsed > 1) { 19 | return null; 20 | } 21 | return parsed; 22 | } 23 | 24 | const cache = {}; 25 | 26 | export default function createAnimation(definition) { 27 | const cacheKey = JSON.stringify(definition); 28 | if (cache[cacheKey]) { 29 | return cache[cacheKey]; 30 | } 31 | 32 | const positions = Object.keys(definition).map(parsePosition).filter(notNull); 33 | positions.sort(compareNumbers); 34 | 35 | if (positions.length < 2) { 36 | throw new Error('Animation definitions must have at least two values.'); 37 | } 38 | 39 | const compiled = {}; 40 | if (definition.easing) { 41 | compiled.easing = definition.easing; 42 | } 43 | if (definition.style) { 44 | compiled.style = definition.style; 45 | } 46 | 47 | for (const position of positions) { 48 | let keyframe = definition[position]; 49 | if (!keyframe) { 50 | if (position === 0) { 51 | keyframe = definition.from; 52 | } else if (position === 1) { 53 | keyframe = definition.to; 54 | } 55 | } 56 | if (!keyframe) { 57 | throw new Error('Missing animation keyframe, this should not happen'); 58 | } 59 | 60 | keyframe = flattenStyle(keyframe); 61 | Object.keys(keyframe).forEach(key => { 62 | if (!(key in compiled)) { 63 | compiled[key] = { 64 | inputRange: [], 65 | outputRange: [], 66 | }; 67 | } 68 | compiled[key].inputRange.push(position); 69 | compiled[key].outputRange.push(keyframe[key]); 70 | }); 71 | } 72 | 73 | cache[cacheKey] = compiled; 74 | 75 | return compiled; 76 | } 77 | -------------------------------------------------------------------------------- /definitions/attention-seekers.js: -------------------------------------------------------------------------------- 1 | export const bounce = { 2 | 0: { 3 | translateY: 0, 4 | }, 5 | 0.2: { 6 | translateY: 0, 7 | }, 8 | 0.4: { 9 | translateY: -30, 10 | }, 11 | 0.43: { 12 | translateY: -30, 13 | }, 14 | 0.53: { 15 | translateY: 0, 16 | }, 17 | 0.7: { 18 | translateY: -15, 19 | }, 20 | 0.8: { 21 | translateY: 0, 22 | }, 23 | 0.9: { 24 | translateY: -4, 25 | }, 26 | 1: { 27 | translateY: 0, 28 | }, 29 | }; 30 | 31 | export const flash = { 32 | 0: { 33 | opacity: 1, 34 | }, 35 | 0.25: { 36 | opacity: 0, 37 | }, 38 | 0.5: { 39 | opacity: 1, 40 | }, 41 | 0.75: { 42 | opacity: 0, 43 | }, 44 | 1: { 45 | opacity: 1, 46 | }, 47 | }; 48 | 49 | export const jello = { 50 | 0: { 51 | skewX: '0deg', 52 | skewY: '0deg', 53 | }, 54 | 0.111: { 55 | skewX: '0deg', 56 | skewY: '0deg', 57 | }, 58 | 0.222: { 59 | skewX: '-12.5deg', 60 | skewY: '-12.5deg', 61 | }, 62 | 0.333: { 63 | skewX: '6.25deg', 64 | skewY: '6.25deg', 65 | }, 66 | 0.444: { 67 | skewX: '-3.125deg', 68 | skewY: '-3.125deg', 69 | }, 70 | 0.555: { 71 | skewX: '1.5625deg', 72 | skewY: '1.5625deg', 73 | }, 74 | 0.666: { 75 | skewX: '-0.78125deg', 76 | skewY: '-0.78125deg', 77 | }, 78 | 0.777: { 79 | skewX: '0.390625deg', 80 | skewY: '0.390625deg', 81 | }, 82 | 0.888: { 83 | skewX: '-0.1953125deg', 84 | skewY: '-0.1953125deg', 85 | }, 86 | 1: { 87 | skewX: '0deg', 88 | skewY: '0deg', 89 | }, 90 | }; 91 | 92 | export const pulse = { 93 | 0: { 94 | scale: 1, 95 | }, 96 | 0.5: { 97 | scale: 1.05, 98 | }, 99 | 1: { 100 | scale: 1, 101 | }, 102 | }; 103 | 104 | export const rotate = { 105 | 0: { 106 | rotate: '0deg', 107 | }, 108 | 0.25: { 109 | rotate: '90deg', 110 | }, 111 | 0.5: { 112 | rotate: '180deg', 113 | }, 114 | 0.75: { 115 | rotate: '270deg', 116 | }, 117 | 1: { 118 | rotate: '360deg', 119 | }, 120 | }; 121 | 122 | export const shake = { 123 | 0: { 124 | translateX: 0, 125 | }, 126 | 0.1: { 127 | translateX: -10, 128 | }, 129 | 0.2: { 130 | translateX: 10, 131 | }, 132 | 0.3: { 133 | translateX: -10, 134 | }, 135 | 0.4: { 136 | translateX: 10, 137 | }, 138 | 0.5: { 139 | translateX: -10, 140 | }, 141 | 0.6: { 142 | translateX: 10, 143 | }, 144 | 0.7: { 145 | translateX: -10, 146 | }, 147 | 0.8: { 148 | translateX: 10, 149 | }, 150 | 0.9: { 151 | translateX: -10, 152 | }, 153 | 1: { 154 | translateX: 0, 155 | }, 156 | }; 157 | 158 | export const swing = { 159 | 0: { 160 | rotateZ: '0deg', 161 | }, 162 | 0.2: { 163 | rotateZ: '15deg', 164 | }, 165 | 0.4: { 166 | rotateZ: '-10deg', 167 | }, 168 | 0.6: { 169 | rotateZ: '5deg', 170 | }, 171 | 0.8: { 172 | rotateZ: '-5deg', 173 | }, 174 | 1: { 175 | rotateZ: '0deg', 176 | }, 177 | }; 178 | 179 | export const rubberBand = { 180 | 0: { 181 | scaleX: 1, 182 | scaleY: 1, 183 | }, 184 | 0.3: { 185 | scaleX: 1.25, 186 | scaleY: 0.75, 187 | }, 188 | 0.4: { 189 | scaleX: 0.75, 190 | scaleY: 1.25, 191 | }, 192 | 0.5: { 193 | scaleX: 1.15, 194 | scaleY: 0.85, 195 | }, 196 | 0.65: { 197 | scaleX: 0.95, 198 | scaleY: 1.05, 199 | }, 200 | 0.75: { 201 | scaleX: 1.05, 202 | scaleY: 0.95, 203 | }, 204 | 1: { 205 | scaleX: 1, 206 | scaleY: 1, 207 | }, 208 | }; 209 | 210 | export const tada = { 211 | 0: { 212 | scale: 1, 213 | rotateZ: '0deg', 214 | }, 215 | 0.1: { 216 | scale: 0.9, 217 | rotateZ: '-3deg', 218 | }, 219 | 0.2: { 220 | scale: 0.9, 221 | rotateZ: '-3deg', 222 | }, 223 | 0.3: { 224 | scale: 1.1, 225 | rotateZ: '-3deg', 226 | }, 227 | 0.4: { 228 | rotateZ: '3deg', 229 | }, 230 | 0.5: { 231 | rotateZ: '-3deg', 232 | }, 233 | 0.6: { 234 | rotateZ: '3deg', 235 | }, 236 | 0.7: { 237 | rotateZ: '-3deg', 238 | }, 239 | 0.8: { 240 | rotateZ: '3deg', 241 | }, 242 | 0.9: { 243 | scale: 1.1, 244 | rotateZ: '3deg', 245 | }, 246 | 1: { 247 | scale: 1, 248 | rotateZ: '0deg', 249 | }, 250 | }; 251 | 252 | export const wobble = { 253 | 0: { 254 | translateX: 0, 255 | rotateZ: '0deg', 256 | }, 257 | 0.15: { 258 | translateX: -25, 259 | rotateZ: '-5deg', 260 | }, 261 | 0.3: { 262 | translateX: 20, 263 | rotateZ: '3deg', 264 | }, 265 | 0.45: { 266 | translateX: -15, 267 | rotateZ: '-3deg', 268 | }, 269 | 0.6: { 270 | translateX: 10, 271 | rotateZ: '2deg', 272 | }, 273 | 0.75: { 274 | translateX: -5, 275 | rotateZ: '-1deg', 276 | }, 277 | 1: { 278 | translateX: 0, 279 | rotateZ: '0deg', 280 | }, 281 | }; 282 | -------------------------------------------------------------------------------- /definitions/bouncing-entrances.js: -------------------------------------------------------------------------------- 1 | export const bounceIn = { 2 | 0: { 3 | opacity: 0, 4 | scale: 0.3, 5 | }, 6 | 0.2: { 7 | scale: 1.1, 8 | }, 9 | 0.4: { 10 | scale: 0.9, 11 | }, 12 | 0.6: { 13 | opacity: 1, 14 | scale: 1.03, 15 | }, 16 | 0.8: { 17 | scale: 0.97, 18 | }, 19 | 1: { 20 | opacity: 1, 21 | scale: 1, 22 | }, 23 | }; 24 | 25 | export const bounceInUp = { 26 | 0: { 27 | opacity: 0, 28 | translateY: 800, 29 | }, 30 | 0.6: { 31 | opacity: 1, 32 | translateY: -25, 33 | }, 34 | 0.75: { 35 | translateY: 10, 36 | }, 37 | 0.9: { 38 | translateY: -5, 39 | }, 40 | 1: { 41 | translateY: 0, 42 | }, 43 | }; 44 | 45 | export const bounceInDown = { 46 | 0: { 47 | opacity: 0, 48 | translateY: -800, 49 | }, 50 | 0.6: { 51 | opacity: 1, 52 | translateY: 25, 53 | }, 54 | 0.75: { 55 | translateY: -10, 56 | }, 57 | 0.9: { 58 | translateY: 5, 59 | }, 60 | 1: { 61 | translateY: 0, 62 | }, 63 | }; 64 | 65 | export const bounceInRight = { 66 | 0: { 67 | opacity: 0, 68 | translateX: 600, 69 | }, 70 | 0.6: { 71 | opacity: 1, 72 | translateX: -20, 73 | }, 74 | 0.75: { 75 | translateX: 8, 76 | }, 77 | 0.9: { 78 | translateX: -4, 79 | }, 80 | 1: { 81 | translateX: 0, 82 | }, 83 | }; 84 | 85 | export const bounceInLeft = { 86 | 0: { 87 | opacity: 0, 88 | translateX: -600, 89 | }, 90 | 0.6: { 91 | opacity: 1, 92 | translateX: 20, 93 | }, 94 | 0.75: { 95 | translateX: -8, 96 | }, 97 | 0.9: { 98 | translateX: 4, 99 | }, 100 | 1: { 101 | translateX: 0, 102 | }, 103 | }; 104 | -------------------------------------------------------------------------------- /definitions/bouncing-exits.js: -------------------------------------------------------------------------------- 1 | export const bounceOut = { 2 | 0: { 3 | opacity: 1, 4 | scale: 1, 5 | }, 6 | 0.2: { 7 | scale: 0.9, 8 | }, 9 | 0.5: { 10 | opacity: 1, 11 | scale: 1.11, 12 | }, 13 | 0.55: { 14 | scale: 1.11, 15 | }, 16 | 1: { 17 | opacity: 0, 18 | scale: 0.3, 19 | }, 20 | }; 21 | 22 | export const bounceOutUp = { 23 | 0: { 24 | opacity: 1, 25 | translateY: 0, 26 | }, 27 | 0.2: { 28 | opacity: 1, 29 | translateY: -10, 30 | }, 31 | 0.4: { 32 | translateY: 20, 33 | }, 34 | 0.45: { 35 | translateY: 20, 36 | }, 37 | 0.55: { 38 | opacity: 1, 39 | }, 40 | 1: { 41 | opacity: 0, 42 | translateY: -800, 43 | }, 44 | }; 45 | 46 | export const bounceOutDown = { 47 | 0: { 48 | opacity: 1, 49 | translateY: 0, 50 | }, 51 | 0.2: { 52 | opacity: 1, 53 | translateY: 10, 54 | }, 55 | 0.4: { 56 | translateY: -20, 57 | }, 58 | 0.45: { 59 | translateY: -20, 60 | }, 61 | 0.55: { 62 | opacity: 1, 63 | }, 64 | 1: { 65 | opacity: 0, 66 | translateY: 800, 67 | }, 68 | }; 69 | 70 | export const bounceOutRight = { 71 | 0: { 72 | opacity: 1, 73 | translateX: 0, 74 | }, 75 | 0.2: { 76 | opacity: 1, 77 | translateX: 10, 78 | }, 79 | 0.4: { 80 | translateX: -20, 81 | }, 82 | 0.45: { 83 | translateX: -20, 84 | }, 85 | 0.55: { 86 | opacity: 1, 87 | }, 88 | 1: { 89 | opacity: 0, 90 | translateX: 600, 91 | }, 92 | }; 93 | 94 | export const bounceOutLeft = { 95 | 0: { 96 | opacity: 1, 97 | translateX: 0, 98 | }, 99 | 0.2: { 100 | opacity: 1, 101 | translateX: -10, 102 | }, 103 | 0.4: { 104 | translateX: 20, 105 | }, 106 | 0.45: { 107 | translateX: 20, 108 | }, 109 | 0.55: { 110 | opacity: 1, 111 | }, 112 | 1: { 113 | opacity: 0, 114 | translateX: -600, 115 | }, 116 | }; 117 | -------------------------------------------------------------------------------- /definitions/fading-entrances.js: -------------------------------------------------------------------------------- 1 | function makeFadeInTranslation(translationType, fromValue) { 2 | return { 3 | from: { 4 | opacity: 0, 5 | [translationType]: fromValue, 6 | }, 7 | to: { 8 | opacity: 1, 9 | [translationType]: 0, 10 | }, 11 | }; 12 | } 13 | 14 | export const fadeIn = { 15 | from: { 16 | opacity: 0, 17 | }, 18 | to: { 19 | opacity: 1, 20 | }, 21 | }; 22 | 23 | export const fadeInDown = makeFadeInTranslation('translateY', -100); 24 | 25 | export const fadeInUp = makeFadeInTranslation('translateY', 100); 26 | 27 | export const fadeInLeft = makeFadeInTranslation('translateX', -100); 28 | 29 | export const fadeInRight = makeFadeInTranslation('translateX', 100); 30 | 31 | export const fadeInDownBig = makeFadeInTranslation('translateY', -500); 32 | 33 | export const fadeInUpBig = makeFadeInTranslation('translateY', 500); 34 | 35 | export const fadeInLeftBig = makeFadeInTranslation('translateX', -500); 36 | 37 | export const fadeInRightBig = makeFadeInTranslation('translateX', 500); 38 | -------------------------------------------------------------------------------- /definitions/fading-exits.js: -------------------------------------------------------------------------------- 1 | function makeFadeOutTranslation(translationType, toValue) { 2 | return { 3 | from: { 4 | opacity: 1, 5 | [translationType]: 0, 6 | }, 7 | to: { 8 | opacity: 0, 9 | [translationType]: toValue, 10 | }, 11 | }; 12 | } 13 | 14 | export const fadeOut = { 15 | from: { 16 | opacity: 1, 17 | }, 18 | to: { 19 | opacity: 0, 20 | }, 21 | }; 22 | 23 | export const fadeOutDown = makeFadeOutTranslation('translateY', 100); 24 | 25 | export const fadeOutUp = makeFadeOutTranslation('translateY', -100); 26 | 27 | export const fadeOutLeft = makeFadeOutTranslation('translateX', -100); 28 | 29 | export const fadeOutRight = makeFadeOutTranslation('translateX', 100); 30 | 31 | export const fadeOutDownBig = makeFadeOutTranslation('translateY', 500); 32 | 33 | export const fadeOutUpBig = makeFadeOutTranslation('translateY', -500); 34 | 35 | export const fadeOutLeftBig = makeFadeOutTranslation('translateX', -500); 36 | 37 | export const fadeOutRightBig = makeFadeOutTranslation('translateX', 500); 38 | -------------------------------------------------------------------------------- /definitions/flippers.js: -------------------------------------------------------------------------------- 1 | export const flipInX = { 2 | easing: 'ease-in', 3 | style: { 4 | backfaceVisibility: 'visible', 5 | perspective: 400, 6 | }, 7 | 0: { 8 | opacity: 0, 9 | rotateX: '90deg', 10 | }, 11 | 0.4: { 12 | rotateX: '-20deg', 13 | }, 14 | 0.6: { 15 | opacity: 1, 16 | rotateX: '10deg', 17 | }, 18 | 0.8: { 19 | rotateX: '-5deg', 20 | }, 21 | 1: { 22 | opacity: 1, 23 | rotateX: '0deg', 24 | }, 25 | }; 26 | 27 | export const flipInY = { 28 | easing: 'ease-in', 29 | style: { 30 | backfaceVisibility: 'visible', 31 | perspective: 400, 32 | }, 33 | 0: { 34 | opacity: 0, 35 | rotateY: '90deg', 36 | }, 37 | 0.4: { 38 | rotateY: '-20deg', 39 | }, 40 | 0.6: { 41 | opacity: 1, 42 | rotateY: '10deg', 43 | }, 44 | 0.8: { 45 | rotateY: '-5deg', 46 | }, 47 | 1: { 48 | opacity: 1, 49 | rotateY: '0deg', 50 | }, 51 | }; 52 | 53 | export const flipOutX = { 54 | style: { 55 | backfaceVisibility: 'visible', 56 | perspective: 400, 57 | }, 58 | 0: { 59 | opacity: 1, 60 | rotateX: '0deg', 61 | }, 62 | 0.3: { 63 | opacity: 1, 64 | rotateX: '-20deg', 65 | }, 66 | 1: { 67 | opacity: 0, 68 | rotateX: '90deg', 69 | }, 70 | }; 71 | 72 | export const flipOutY = { 73 | style: { 74 | backfaceVisibility: 'visible', 75 | perspective: 400, 76 | }, 77 | 0: { 78 | opacity: 1, 79 | rotateY: '0deg', 80 | }, 81 | 0.3: { 82 | opacity: 1, 83 | rotateY: '-20deg', 84 | }, 85 | 1: { 86 | opacity: 0, 87 | rotateY: '90deg', 88 | }, 89 | }; 90 | -------------------------------------------------------------------------------- /definitions/index.js: -------------------------------------------------------------------------------- 1 | export * from './attention-seekers'; 2 | export * from './bouncing-entrances'; 3 | export * from './bouncing-exits'; 4 | export * from './fading-entrances'; 5 | export * from './fading-exits'; 6 | export * from './flippers'; 7 | export * from './lightspeed'; 8 | export * from './sliding-entrances'; 9 | export * from './sliding-exits'; 10 | export * from './zooming-entrances'; 11 | export * from './zooming-exits'; 12 | -------------------------------------------------------------------------------- /definitions/lightspeed.js: -------------------------------------------------------------------------------- 1 | export const lightSpeedIn = { 2 | easing: 'ease-out', 3 | 0: { 4 | opacity: 0, 5 | translateX: 200, 6 | skewX: '-30deg', 7 | }, 8 | 0.6: { 9 | opacity: 1, 10 | translateX: 0, 11 | skewX: '20deg', 12 | }, 13 | 0.8: { 14 | skewX: '-5deg', 15 | }, 16 | 1: { 17 | opacity: 1, 18 | translateX: 0, 19 | skewX: '0deg', 20 | }, 21 | }; 22 | 23 | export const lightSpeedOut = { 24 | easing: 'ease-in', 25 | 0: { 26 | opacity: 1, 27 | translateX: 0, 28 | skewX: '0deg', 29 | }, 30 | 1: { 31 | opacity: 0, 32 | translateX: 200, 33 | skewX: '30deg', 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /definitions/sliding-entrances.js: -------------------------------------------------------------------------------- 1 | function makeSlideInTranslation(translationType, fromValue) { 2 | return { 3 | from: { 4 | [translationType]: fromValue, 5 | }, 6 | to: { 7 | [translationType]: 0, 8 | }, 9 | }; 10 | } 11 | 12 | export const slideInDown = makeSlideInTranslation('translateY', -100); 13 | 14 | export const slideInUp = makeSlideInTranslation('translateY', 100); 15 | 16 | export const slideInLeft = makeSlideInTranslation('translateX', -100); 17 | 18 | export const slideInRight = makeSlideInTranslation('translateX', 100); 19 | -------------------------------------------------------------------------------- /definitions/sliding-exits.js: -------------------------------------------------------------------------------- 1 | function makeSlideOutTranslation(translationType, fromValue) { 2 | return { 3 | from: { 4 | [translationType]: 0, 5 | }, 6 | to: { 7 | [translationType]: fromValue, 8 | }, 9 | }; 10 | } 11 | 12 | export const slideOutDown = makeSlideOutTranslation('translateY', 100); 13 | 14 | export const slideOutUp = makeSlideOutTranslation('translateY', -100); 15 | 16 | export const slideOutLeft = makeSlideOutTranslation('translateX', -100); 17 | 18 | export const slideOutRight = makeSlideOutTranslation('translateX', 100); 19 | -------------------------------------------------------------------------------- /definitions/zooming-entrances.js: -------------------------------------------------------------------------------- 1 | import { Easing } from 'react-native'; 2 | 3 | function makeZoomInTranslation(translationType, pivotPoint) { 4 | const modifier = Math.min(1, Math.max(-1, pivotPoint)); 5 | return { 6 | easing: Easing.bezier(0.175, 0.885, 0.320, 1), 7 | 0: { 8 | opacity: 0, 9 | scale: 0.1, 10 | [translationType]: modifier * -1000, 11 | }, 12 | 0.6: { 13 | opacity: 1, 14 | scale: 0.457, 15 | [translationType]: pivotPoint, 16 | }, 17 | 1: { 18 | scale: 1, 19 | [translationType]: 0, 20 | }, 21 | }; 22 | } 23 | 24 | export const zoomIn = { 25 | from: { 26 | opacity: 0, 27 | scale: 0.3, 28 | }, 29 | 0.5: { 30 | opacity: 1, 31 | }, 32 | to: { 33 | opacity: 1, 34 | scale: 1, 35 | }, 36 | }; 37 | 38 | export const zoomInDown = makeZoomInTranslation('translateY', 60); 39 | 40 | export const zoomInUp = makeZoomInTranslation('translateY', -60); 41 | 42 | export const zoomInLeft = makeZoomInTranslation('translateX', 10); 43 | 44 | export const zoomInRight = makeZoomInTranslation('translateX', -10); 45 | -------------------------------------------------------------------------------- /definitions/zooming-exits.js: -------------------------------------------------------------------------------- 1 | import { Easing } from 'react-native'; 2 | 3 | function makeZoomOutTranslation(translationType, pivotPoint) { 4 | const modifier = Math.min(1, Math.max(-1, pivotPoint)); 5 | return { 6 | easing: Easing.bezier(0.175, 0.885, 0.320, 1), 7 | 0: { 8 | opacity: 1, 9 | scale: 1, 10 | [translationType]: 0, 11 | }, 12 | 0.4: { 13 | opacity: 1, 14 | scale: 0.457, 15 | [translationType]: pivotPoint, 16 | }, 17 | 1: { 18 | opacity: 0, 19 | scale: 0.1, 20 | [translationType]: modifier * -1000, 21 | }, 22 | }; 23 | } 24 | 25 | export const zoomOut = { 26 | from: { 27 | opacity: 1, 28 | scale: 1, 29 | }, 30 | 0.5: { 31 | opacity: 1, 32 | scale: 0.3, 33 | }, 34 | to: { 35 | opacity: 0, 36 | scale: 0, 37 | }, 38 | }; 39 | 40 | export const zoomOutDown = makeZoomOutTranslation('translateY', 60); 41 | 42 | export const zoomOutUp = makeZoomOutTranslation('translateY', -60); 43 | 44 | export const zoomOutLeft = makeZoomOutTranslation('translateX', 10); 45 | 46 | export const zoomOutRight = makeZoomOutTranslation('translateX', -10); 47 | -------------------------------------------------------------------------------- /easing.js: -------------------------------------------------------------------------------- 1 | import { Easing } from 'react-native'; 2 | 3 | const EASING_FUNCTIONS = { 4 | // Standard CSS easings 5 | 6 | linear: Easing.linear, 7 | ease: Easing.bezier(0.25, 0.1, 0.25, 1), 8 | 'ease-in': Easing.bezier(0.42, 0, 1, 1), 9 | 'ease-out': Easing.bezier(0, 0, 0.58, 1), 10 | 'ease-in-out': Easing.bezier(0.42, 0, 0.58, 1), 11 | 12 | // Penner Equations - http://matthewlein.com/ceaser/ & http://easings.net 13 | 14 | 'ease-in-cubic': Easing.bezier(0.550, 0.055, 0.675, 0.190), 15 | 'ease-out-cubic': Easing.bezier(0.215, 0.610, 0.355, 1.000), 16 | 'ease-in-out-cubic': Easing.bezier(0.645, 0.045, 0.355, 1.000), 17 | 18 | 'ease-in-circ': Easing.bezier(0.600, 0.040, 0.980, 0.335), 19 | 'ease-out-circ': Easing.bezier(0.075, 0.820, 0.165, 1.000), 20 | 'ease-in-out-circ': Easing.bezier(0.785, 0.135, 0.150, 0.860), 21 | 22 | 'ease-in-expo': Easing.bezier(0.950, 0.050, 0.795, 0.035), 23 | 'ease-out-expo': Easing.bezier(0.190, 1.000, 0.220, 1.000), 24 | 'ease-in-out-expo': Easing.bezier(1.000, 0.000, 0.000, 1.000), 25 | 26 | 'ease-in-quad': Easing.bezier(0.550, 0.085, 0.680, 0.530), 27 | 'ease-out-quad': Easing.bezier(0.250, 0.460, 0.450, 0.940), 28 | 'ease-in-out-quad': Easing.bezier(0.455, 0.030, 0.515, 0.955), 29 | 30 | 'ease-in-quart': Easing.bezier(0.895, 0.030, 0.685, 0.220), 31 | 'ease-out-quart': Easing.bezier(0.165, 0.840, 0.440, 1.000), 32 | 'ease-in-out-quart': Easing.bezier(0.770, 0.000, 0.175, 1.000), 33 | 34 | 'ease-in-quint': Easing.bezier(0.755, 0.050, 0.855, 0.060), 35 | 'ease-out-quint': Easing.bezier(0.230, 1.000, 0.320, 1.000), 36 | 'ease-in-out-quint': Easing.bezier(0.860, 0.000, 0.070, 1.000), 37 | 38 | 'ease-in-sine': Easing.bezier(0.470, 0.000, 0.745, 0.715), 39 | 'ease-out-sine': Easing.bezier(0.390, 0.575, 0.565, 1.000), 40 | 'ease-in-out-sine': Easing.bezier(0.445, 0.050, 0.550, 0.950), 41 | 42 | 'ease-in-back': Easing.bezier(0.600, -0.280, 0.735, 0.045), 43 | 'ease-out-back': Easing.bezier(0.175, 0.885, 0.320, 1.275), 44 | 'ease-in-out-back': Easing.bezier(0.680, -0.550, 0.265, 1.550), 45 | }; 46 | 47 | export default EASING_FUNCTIONS; 48 | -------------------------------------------------------------------------------- /flattenStyle.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default function flattenStyle(style) { 4 | const flatStyle = Object.assign({}, StyleSheet.flatten(style)); 5 | if (flatStyle.transform) { 6 | flatStyle.transform.forEach(transform => { 7 | const key = Object.keys(transform)[0]; 8 | flatStyle[key] = transform[key]; 9 | }); 10 | delete flatStyle.transform; 11 | } 12 | return flatStyle; 13 | } 14 | -------------------------------------------------------------------------------- /getDefaultStyleValue.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-plusplus */ 2 | 3 | const DIRECTIONAL_FALLBACKS = { 4 | Top: ['Vertical', ''], 5 | Bottom: ['Vertical', ''], 6 | Vertical: [''], 7 | Left: ['Horizontal', ''], 8 | Right: ['Horizontal', ''], 9 | Horizontal: [''], 10 | }; 11 | 12 | const DIRECTIONAL_SUFFICES = Object.keys(DIRECTIONAL_FALLBACKS); 13 | 14 | export default function getDefaultStyleValue(key, flatStyle) { 15 | if (key === 'backgroundColor') { 16 | return 'rgba(0,0,0,0)'; 17 | } 18 | if (key === 'color' || key.indexOf('Color') !== -1) { 19 | return 'rgba(0,0,0,1)'; 20 | } 21 | if (key.indexOf('rotate') === 0 || key.indexOf('skew') === 0) { 22 | return '0deg'; 23 | } 24 | if (key === 'opacity' || key.indexOf('scale') === 0) { 25 | return 1; 26 | } 27 | if (key === 'fontSize') { 28 | return 14; 29 | } 30 | if (key.indexOf('margin') === 0 || key.indexOf('padding') === 0) { 31 | for (let suffix, i = 0; i < DIRECTIONAL_SUFFICES.length; i++) { 32 | suffix = DIRECTIONAL_SUFFICES[i]; 33 | if (key.substr(-suffix.length) === suffix) { 34 | const prefix = key.substr(0, key.length - suffix.length); 35 | const fallbacks = DIRECTIONAL_FALLBACKS[suffix]; 36 | for (let fallback, j = 0; j < fallbacks.length; j++) { 37 | fallback = prefix + fallbacks[j]; 38 | if (fallback in flatStyle) { 39 | return flatStyle[fallback]; 40 | } 41 | } 42 | break; 43 | } 44 | } 45 | } 46 | return 0; 47 | } 48 | -------------------------------------------------------------------------------- /getStyleValues.js: -------------------------------------------------------------------------------- 1 | import flattenStyle from './flattenStyle'; 2 | import getDefaultStyleValue from './getDefaultStyleValue'; 3 | 4 | // Returns a flattened version of style with only `keys` values. 5 | export default function getStyleValues(keys, style) { 6 | const values = {}; 7 | const flatStyle = flattenStyle(style); 8 | 9 | (typeof keys === 'string' ? [keys] : keys).forEach(key => { 10 | values[key] = key in flatStyle 11 | ? flatStyle[key] 12 | : getDefaultStyleValue(key, flatStyle); 13 | }); 14 | return values; 15 | } 16 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { 2 | View as CoreView, 3 | Text as CoreText, 4 | Image as CoreImage, 5 | } from 'react-native'; 6 | import createComponent from './createAnimatableComponent'; 7 | import { initializeRegistryWithDefinitions } from './registry'; 8 | import * as ANIMATION_DEFINITIONS from './definitions'; 9 | 10 | initializeRegistryWithDefinitions(ANIMATION_DEFINITIONS); 11 | 12 | export const createAnimatableComponent = createComponent; 13 | export const View = createComponent(CoreView); 14 | export const Text = createComponent(CoreText); 15 | export const Image = createComponent(CoreImage); 16 | export { default as createAnimation } from './createAnimation'; 17 | export { 18 | registerAnimation, 19 | initializeRegistryWithDefinitions, 20 | } from './registry'; 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-animatable", 3 | "version": "1.2.0", 4 | "description": "Easy to use declarative transitions and animations for React Native", 5 | "main": "index.js", 6 | "scripts": { 7 | "jest": "./node_modules/.bin/jest", 8 | "jest:watch": "npm run jest -- --watch", 9 | "lint": "./node_modules/.bin/eslint ./*.js", 10 | "test": "npm run lint && npm run jest", 11 | "format": "./node_modules/.bin/prettier --single-quote --trailing-comma es5 --write {,definitions/,__tests__}*.js" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "react-component", 16 | "react-native-component", 17 | "react", 18 | "mobile", 19 | "ios", 20 | "android", 21 | "ui", 22 | "fade", 23 | "bounce", 24 | "slide", 25 | "animatable", 26 | "transition", 27 | "animation" 28 | ], 29 | "author": { 30 | "name": "Joel Arvidsson", 31 | "email": "joel@oblador.se" 32 | }, 33 | "homepage": "https://github.com/oblador/react-native-animatable", 34 | "bugs": { 35 | "url": "https://github.com/oblador/react-native-animatable/issues" 36 | }, 37 | "repository": { 38 | "type": "git", 39 | "url": "git://github.com/oblador/react-native-animatable.git" 40 | }, 41 | "license": "MIT", 42 | "jest": { 43 | "preset": "jest-react-native", 44 | "modulePathIgnorePatterns": [ 45 | "/Example/", 46 | "/node_modules/react-native/Libraries/react-native/", 47 | "/node_modules/react-native/packager/" 48 | ] 49 | }, 50 | "devDependencies": { 51 | "babel": "^6.5.2", 52 | "babel-eslint": "^7.0.0", 53 | "babel-jest": "^16.0.0", 54 | "babel-preset-react-native": "^1.9.0", 55 | "eslint": "^3.7.1", 56 | "eslint-config-airbnb": "^12.0.0", 57 | "eslint-plugin-import": "^1.16.0", 58 | "eslint-plugin-jsx-a11y": "^2.2.3", 59 | "eslint-plugin-react": "^6.4.1", 60 | "jest": "17.0.2", 61 | "jest-cli": "17.0.2", 62 | "jest-react-native": "17.0.3", 63 | "prettier": "^1.3.1", 64 | "react": "~15.3.2", 65 | "react-native": "^0.36.1", 66 | "react-test-renderer": "15.3.2" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /registry.js: -------------------------------------------------------------------------------- 1 | import createAnimation from './createAnimation'; 2 | 3 | const animationRegistry = {}; 4 | 5 | export function registerAnimation(animationName, animation) { 6 | animationRegistry[animationName] = animation; 7 | } 8 | 9 | export function getAnimationByName(animationName) { 10 | return animationRegistry[animationName]; 11 | } 12 | 13 | export function getAnimationNames() { 14 | return Object.keys(animationRegistry); 15 | } 16 | 17 | export function initializeRegistryWithDefinitions(definitions) { 18 | Object.keys(definitions).forEach(animationName => { 19 | registerAnimation( 20 | animationName, 21 | createAnimation(definitions[animationName]) 22 | ); 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /wrapStyleTransforms.js: -------------------------------------------------------------------------------- 1 | // These styles need to be nested in a transform array 2 | const TRANSFORM_STYLE_PROPERTIES = [ 3 | 'perspective', 4 | 'rotate', 5 | 'rotateX', 6 | 'rotateY', 7 | 'rotateZ', 8 | 'scale', 9 | 'scaleX', 10 | 'scaleY', 11 | 'skewX', 12 | 'skewY', 13 | 'translateX', 14 | 'translateY', 15 | ]; 16 | 17 | // Transforms { translateX: 1 } to { transform: [{ translateX: 1 }]} 18 | export default function wrapStyleTransforms(style) { 19 | const wrapped = {}; 20 | Object.keys(style).forEach(key => { 21 | if (TRANSFORM_STYLE_PROPERTIES.indexOf(key) !== -1) { 22 | if (!wrapped.transform) { 23 | wrapped.transform = []; 24 | } 25 | wrapped.transform.push({ 26 | [key]: style[key], 27 | }); 28 | } else { 29 | wrapped[key] = style[key]; 30 | } 31 | }); 32 | return wrapped; 33 | } 34 | --------------------------------------------------------------------------------