diff --git a/Examples/UIExplorer/NativeAnimationsExample.js b/Examples/UIExplorer/NativeAnimationsExample.js
new file mode 100644
index 000000000..67757f56e
--- /dev/null
+++ b/Examples/UIExplorer/NativeAnimationsExample.js
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+ View,
+ Text,
+ Animated,
+ StyleSheet,
+ TouchableWithoutFeedback,
+} = ReactNative;
+var UIExplorerButton = require('./UIExplorerButton');
+
+var Tester = React.createClass({
+ current: 0,
+ getInitialState() {
+ return {
+ native: new Animated.Value(0),
+ js: new Animated.Value(0),
+ };
+ },
+
+ onPress() {
+ this.current = this.current ? 0 : 1;
+ const config = {
+ ...this.props.config,
+ toValue: this.current,
+ };
+ try {
+ Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
+ } catch (e) {
+ // uncomment this if you want to get the redbox errors!
+ throw e;
+ }
+ Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
+ },
+
+ render() {
+ return (
+
+
+
+ Native:
+
+
+ {this.props.children(this.state.native)}
+
+
+ JavaScript:
+
+
+ {this.props.children(this.state.js)}
+
+
+
+ );
+ },
+});
+
+const styles = StyleSheet.create({
+ row: {
+ padding: 10,
+ zIndex: 1,
+ },
+ block: {
+ width: 50,
+ height: 50,
+ backgroundColor: 'blue',
+ },
+});
+
+exports.framework = 'React';
+exports.title = 'Native Animated Example';
+exports.description = 'Test out Native Animations';
+
+exports.examples = [
+{
+ title: 'Multistage With Multiply and rotation',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'Multistage With Multiply',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'Scale interpolation',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'Opacity without interpolation',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'Rotate interpolation',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'translateX => Animated.spring',
+ description: 'description',
+ render: function() {
+ return (
+
+ {anim => (
+
+ )}
+
+ );
+ },
+ },
+];
diff --git a/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj b/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj
index ba1a02b73..f73a4214d 100644
--- a/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj
+++ b/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj
@@ -32,6 +32,7 @@
13BCE84F1C9C209600DD7AAD /* RCTComponentPropsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */; };
13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
+ 13E501F11D07A84A005F35D8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13E501A31D07A502005F35D8 /* libRCTAnimation.a */; };
143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
144D21241B2204C5006DB32B /* RCTImageUtilTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 144D21231B2204C5006DB32B /* RCTImageUtilTests.m */; };
147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
@@ -121,6 +122,13 @@
remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
remoteInfo = RCTWebSocket;
};
+ 13E501A21D07A502005F35D8 /* PBXContainerItemProxy */ = {
+ isa = PBXContainerItemProxy;
+ containerPortal = 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */;
+ proxyType = 2;
+ remoteGlobalIDString = 134814201AA4EA6300B7C361;
+ remoteInfo = RCTAnimation;
+ };
143BC59B1B21E3E100462512 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
@@ -210,6 +218,7 @@
13CC9D481AEED2B90020D1C2 /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = ""; };
13DB03471B5D2ED500C27245 /* RCTJSONTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSONTests.m; sourceTree = ""; };
13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = ""; };
+ 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = ../../Libraries/NativeAnimation/RCTAnimation.xcodeproj; sourceTree = ""; };
143BC57E1B21E18100462512 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; };
143BC5811B21E18100462512 /* testLayoutExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testLayoutExampleSnapshot_1@2x.png"; sourceTree = ""; };
143BC5821B21E18100462512 /* testSliderExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testSliderExampleSnapshot_1@2x.png"; sourceTree = ""; };
@@ -285,6 +294,7 @@
14AADF051AC3DBB1002390C9 /* libReact.a in Frameworks */,
147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */,
134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */,
+ 13E501F11D07A84A005F35D8 /* libRCTAnimation.a in Frameworks */,
138DEE241B9EDFB6007F4EA5 /* libRCTCameraRoll.a in Frameworks */,
134A8A2A1AACED7A00945AAE /* libRCTGeolocation.a in Frameworks */,
13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */,
@@ -315,6 +325,7 @@
14AADEFF1AC3DB95002390C9 /* React.xcodeproj */,
14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */,
134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */,
+ 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */,
138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */,
134A8A201AACED6A00945AAE /* RCTGeolocation.xcodeproj */,
13417FE31AA91428003F314A /* RCTImage.xcodeproj */,
@@ -413,6 +424,14 @@
name = UIExplorer;
sourceTree = "";
};
+ 13E5019D1D07A502005F35D8 /* Products */ = {
+ isa = PBXGroup;
+ children = (
+ 13E501A31D07A502005F35D8 /* libRCTAnimation.a */,
+ );
+ name = Products;
+ sourceTree = "";
+ };
143BC57C1B21E18100462512 /* UIExplorerUnitTests */ = {
isa = PBXGroup;
children = (
@@ -693,6 +712,10 @@
ProductGroup = 134454561AAFCAAE003F0779 /* Products */;
ProjectRef = 134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */;
},
+ {
+ ProductGroup = 13E5019D1D07A502005F35D8 /* Products */;
+ ProjectRef = 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */;
+ },
{
ProductGroup = 138DEE031B9EDDDB007F4EA5 /* Products */;
ProjectRef = 138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */;
@@ -801,6 +824,13 @@
remoteRef = 139FDED81B0651EA00C62182 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
+ 13E501A31D07A502005F35D8 /* libRCTAnimation.a */ = {
+ isa = PBXReferenceProxy;
+ fileType = archive.ar;
+ path = libRCTAnimation.a;
+ remoteRef = 13E501A21D07A502005F35D8 /* PBXContainerItemProxy */;
+ sourceTree = BUILT_PRODUCTS_DIR;
+ };
147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
diff --git a/Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme b/Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme
index 833aaaa4a..547d76ac5 100644
--- a/Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme
+++ b/Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme
@@ -1,6 +1,6 @@
= [
key: 'ModalExample',
module: require('./ModalExample'),
},
+ {
+ key: 'NativeAnimationsExample',
+ module: require('./NativeAnimationsExample'),
+ },
{
key: 'NavigatorExample',
module: require('./Navigator/NavigatorExample'),
diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js
index a91880505..9b767c649 100644
--- a/Libraries/Animated/src/AnimatedImplementation.js
+++ b/Libraries/Animated/src/AnimatedImplementation.js
@@ -243,7 +243,7 @@ class TimingAnimation extends Animation {
this._duration = config.duration !== undefined ? config.duration : 500;
this._delay = config.delay !== undefined ? config.delay : 0;
this.__isInteraction = config.isInteraction !== undefined ? config.isInteraction : true;
- this._useNativeDriver = !!config.useNativeDriver;
+ this._useNativeDriver = config.useNativeDriver !== undefined ? config.useNativeDriver : false;
}
_getNativeAnimationConfig(): any {
@@ -256,6 +256,7 @@ class TimingAnimation extends Animation {
type: 'frames',
frames,
toValue: this._toValue,
+ delay: this._delay
};
}
@@ -1086,6 +1087,18 @@ class AnimatedTransform extends AnimatedWithChildren {
this._transforms = transforms;
}
+ __makeNative() {
+ super.__makeNative();
+ this._transforms.forEach(transform => {
+ for (var key in transform) {
+ var value = transform[key];
+ if (value instanceof Animated) {
+ value.__makeNative();
+ }
+ }
+ });
+ }
+
__getValue(): Array