Permalink
Browse files

Implement native Animated value listeners on Android

Summary:
Adds support for `Animated.Value#addListener` for native driven nodes on Android. This is based on work by skevy in the exponent RN fork. Also adds a UIExplorer example.

** Test plan **
Run unit tests

Tested that by adding a listener to a native driven animated node and checked that the listener callback is called properly.

Also tested that it doesn't crash on iOS that doesn't support this yet.
Closes #8844

Differential Revision: D3670906

fbshipit-source-id: 15700ed7b93db140d907ce80af4dae6be3102135
  • Loading branch information...
janicduplessis authored and Facebook Github Bot 7 committed Aug 4, 2016
1 parent 30677e7 commit 158d435f36b9d1ae3637b6df680b4b9abd5e89a5
@@ -22,16 +22,15 @@
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
const React = require('react');
const ReactNative = require('react-native');
const {
View,
Text,
Animated,
StyleSheet,
TouchableWithoutFeedback,
} = ReactNative;
var UIExplorerButton = require('./UIExplorerButton');
class Tester extends React.Component {
state = {
@@ -47,12 +46,8 @@ class Tester extends React.Component {
...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.native, { ...config, useNativeDriver: true }).start();
Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
};
@@ -78,6 +73,52 @@ class Tester extends React.Component {
}
}
class ValueListenerExample extends React.Component {
state = {
anim: new Animated.Value(0),
progress: 0,
};
_current = 0;
componentDidMount() {
this.state.anim.addListener((e) => this.setState({ progress: e.value }));
}
componentWillUnmount() {
this.state.anim.removeAllListeners();
}
_onPress = () => {
this._current = this._current ? 0 : 1;
const config = {
duration: 1000,
toValue: this._current,
};
Animated.timing(this.state.anim, { ...config, useNativeDriver: true }).start();
};
render() {
return (
<TouchableWithoutFeedback onPress={this._onPress}>
<View>
<View style={styles.row}>
<Animated.View
style={[
styles.block,
{
opacity: this.state.anim,
}
]}
/>
</View>
<Text>Value: {this.state.progress}</Text>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = StyleSheet.create({
row: {
padding: 10,
@@ -304,4 +345,13 @@ exports.examples = [
);
},
},
{
title: 'Animated value listener',
platform: 'android',
render: function() {
return (
<ValueListenerExample />
);
},
},
];
@@ -11,6 +11,7 @@
*/
'use strict';
var DeviceEventEmitter = require('RCTDeviceEventEmitter');
var InteractionManager = require('InteractionManager');
var Interpolation = require('Interpolation');
var React = require('React');
@@ -634,6 +635,7 @@ class AnimatedValue extends AnimatedWithChildren {
_animation: ?Animation;
_tracking: ?Animated;
_listeners: {[key: string]: ValueListenerCallback};
__nativeAnimatedValueListener: ?any;
constructor(value: number) {
super();
@@ -652,6 +654,14 @@ class AnimatedValue extends AnimatedWithChildren {
return this._value + this._offset;
}
__makeNative() {
super.__makeNative();
if (Object.keys(this._listeners).length) {
this._startListeningToNativeValueUpdates();
}
}
/**
* Directly set the value. This will stop any animations running on the value
* and update all the bound properties.
@@ -693,15 +703,49 @@ class AnimatedValue extends AnimatedWithChildren {
addListener(callback: ValueListenerCallback): string {
var id = String(_uniqueId++);
this._listeners[id] = callback;
if (this.__isNative) {
this._startListeningToNativeValueUpdates();
}
return id;
}
removeListener(id: string): void {
delete this._listeners[id];
if (this.__isNative && Object.keys(this._listeners).length === 0) {
this._stopListeningForNativeValueUpdates();
}
}
removeAllListeners(): void {
this._listeners = {};
if (this.__isNative) {
this._stopListeningForNativeValueUpdates();
}
}
_startListeningToNativeValueUpdates() {
if (this.__nativeAnimatedValueListener ||
!NativeAnimatedHelper.supportsNativeListener()) {
return;
}
NativeAnimatedAPI.startListeningToAnimatedNodeValue(this.__getNativeTag());
this.__nativeAnimatedValueListener = DeviceEventEmitter.addListener('onAnimatedValueUpdate', (data) => {
if (data.tag !== this.__getNativeTag()) {
return;
}
this._updateValue(data.value, false /* flush */);
});
}
_stopListeningForNativeValueUpdates() {
if (!this.__nativeAnimatedValueListener ||
!NativeAnimatedHelper.supportsNativeListener()) {
return;
}
this.__nativeAnimatedValueListener.remove();
NativeAnimatedAPI.stopListeningToAnimatedNodeValue(this.__getNativeTag());
}
/**
@@ -1204,7 +1248,7 @@ class AnimatedStyle extends AnimatedWithChildren {
if (value instanceof Animated) {
if (!value.__isNative) {
// We cannot use value of natively driven nodes this way as the value we have access from JS
// may not be up to date
// may not be up to date.
style[key] = value.__getValue();
}
} else {
@@ -1296,9 +1340,9 @@ class AnimatedProps extends Animated {
for (var key in this._props) {
var value = this._props[key];
if (value instanceof Animated) {
if (!value.__isNative) {
if (!value.__isNative || value instanceof AnimatedStyle) {
// We cannot use value of natively driven nodes this way as the value we have access from JS
// may not be up to date
// may not be up to date.
props[key] = value.__getValue();
}
} else {
@@ -30,6 +30,14 @@ var API = {
assertNativeAnimatedModule();
NativeAnimatedModule.createAnimatedNode(tag, config);
},
startListeningToAnimatedNodeValue: function(tag: number) {
assertNativeAnimatedModule();
NativeAnimatedModule.startListeningToAnimatedNodeValue(tag);
},
stopListeningToAnimatedNodeValue: function(tag: number) {
assertNativeAnimatedModule();
NativeAnimatedModule.stopListeningToAnimatedNodeValue(tag);
},
connectAnimatedNodes: function(parentTag: number, childTag: number): void {
assertNativeAnimatedModule();
NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag);
@@ -144,6 +152,11 @@ function assertNativeAnimatedModule(): void {
invariant(NativeAnimatedModule, 'Native animated module is not available');
}
// TODO: remove this when iOS supports native listeners.
function supportsNativeListener(): bool {
return !!NativeAnimatedModule.startListeningToAnimatedNodeValue;
}
module.exports = {
API,
validateProps,
@@ -153,4 +166,5 @@ module.exports = {
generateNewNodeTag,
generateNewAnimationId,
assertNativeAnimatedModule,
supportsNativeListener,
};
@@ -0,0 +1,17 @@
/**
* Copyright (c) 2015-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.
*/
package com.facebook.react.animated;
/**
* Interface used to listen to {@link ValueAnimatedNode} updates.
*/
public interface AnimatedNodeValueListener {
void onValueUpdate(double value);
}
@@ -7,8 +7,8 @@ android_library(
]),
deps = [
react_native_target('java/com/facebook/react/bridge:bridge'),
react_native_target('java/com/facebook/react/modules/core:core'),
react_native_target('java/com/facebook/react/uimanager:uimanager'),
react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
react_native_dep('third-party/java/infer-annotations:infer-annotations'),
react_native_dep('third-party/java/jsr-305:jsr-305'),
@@ -12,13 +12,16 @@
import javax.annotation.Nullable;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.LifecycleEventListener;
import com.facebook.react.bridge.OnBatchCompleteListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.uimanager.GuardedChoreographerFrameCallback;
import com.facebook.react.uimanager.ReactChoreographer;
import com.facebook.react.uimanager.UIImplementation;
@@ -190,6 +193,36 @@ public void execute(NativeAnimatedNodesManager animatedNodesManager) {
});
}
@ReactMethod
public void startListeningToAnimatedNodeValue(final int tag) {
final AnimatedNodeValueListener listener = new AnimatedNodeValueListener() {
public void onValueUpdate(double value) {
WritableMap onAnimatedValueData = Arguments.createMap();
onAnimatedValueData.putInt("tag", tag);
onAnimatedValueData.putDouble("value", value);
getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("onAnimatedValueUpdate", onAnimatedValueData);
}
};
mOperations.add(new UIThreadOperation() {
@Override
public void execute(NativeAnimatedNodesManager animatedNodesManager) {
animatedNodesManager.startListeningToAnimatedNodeValue(tag, listener);
}
});
}
@ReactMethod
public void stopListeningToAnimatedNodeValue(final int tag) {
mOperations.add(new UIThreadOperation() {
@Override
public void execute(NativeAnimatedNodesManager animatedNodesManager) {
animatedNodesManager.stopListeningToAnimatedNodeValue(tag);
}
});
}
@ReactMethod
public void dropAnimatedNode(final int tag) {
mOperations.add(new UIThreadOperation() {
@@ -89,6 +89,24 @@ public void dropAnimatedNode(int tag) {
mAnimatedNodes.remove(tag);
}
public void startListeningToAnimatedNodeValue(int tag, AnimatedNodeValueListener listener) {
AnimatedNode node = mAnimatedNodes.get(tag);
if (node == null || !(node instanceof ValueAnimatedNode)) {
throw new JSApplicationIllegalArgumentException("Animated node with tag " + tag +
" does not exists or is not a 'value' node");
}
((ValueAnimatedNode) node).setValueListener(listener);
}
public void stopListeningToAnimatedNodeValue(int tag) {
AnimatedNode node = mAnimatedNodes.get(tag);
if (node == null || !(node instanceof ValueAnimatedNode)) {
throw new JSApplicationIllegalArgumentException("Animated node with tag " + tag +
" does not exists or is not a 'value' node");
}
((ValueAnimatedNode) node).setValueListener(null);
}
public void setAnimatedNodeValue(int tag, double value) {
AnimatedNode node = mAnimatedNodes.get(tag);
if (node == null || !(node instanceof ValueAnimatedNode)) {
@@ -324,6 +342,10 @@ public void runUpdates(long frameTimeNanos) {
// Send property updates to native view manager
((PropsAnimatedNode) nextNode).updateView(mUIImplementation);
}
if (nextNode instanceof ValueAnimatedNode) {
// Potentially send events to JS when the node's value is updated
((ValueAnimatedNode) nextNode).onValueUpdate();
}
if (nextNode.mChildren != null) {
for (int i = 0; i < nextNode.mChildren.size(); i++) {
AnimatedNode child = nextNode.mChildren.get(i);
@@ -11,13 +11,15 @@
import com.facebook.react.bridge.ReadableMap;
import javax.annotation.Nullable;
/**
* Basic type of animated node that maps directly from {@code Animated.Value(x)} of Animated.js
* library.
*/
/*package*/ class ValueAnimatedNode extends AnimatedNode {
/*package*/ double mValue = Double.NaN;
private @Nullable AnimatedNodeValueListener mValueListener;
public ValueAnimatedNode() {
// empty constructor that can be used by subclasses
@@ -26,4 +28,15 @@ public ValueAnimatedNode() {
public ValueAnimatedNode(ReadableMap config) {
mValue = config.getDouble("value");
}
public void onValueUpdate() {
if (mValueListener == null) {
return;
}
mValueListener.onValueUpdate(mValue);
}
public void setValueListener(@Nullable AnimatedNodeValueListener listener) {
mValueListener = listener;
}
}
Oops, something went wrong.

0 comments on commit 158d435

Please sign in to comment.