react-native 0.71.4 → 0.72.0-rc.0

package/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

@@ -14,6 +14,7 @@ import static com.facebook.systrace.Systrace.TRACE_TAG_REACT_JAVA_BRIDGE;
 
 import android.app.Activity;
 import android.content.Context;
+import android.content.ContextWrapper;
 import android.graphics.Canvas;
 import android.graphics.Insets;
 import android.graphics.Point;
@@ -51,7 +52,6 @@ import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.common.annotations.VisibleForTesting;
 import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.modules.appregistry.AppRegistry;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
 import com.facebook.react.modules.deviceinfo.DeviceInfoModule;
 import com.facebook.react.surface.ReactStage;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
@@ -179,7 +179,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
       mWasMeasured = true;
 
       // Check if we were waiting for onMeasure to attach the root view.
-      if (mReactInstanceManager != null && !mIsAttachedToInstance) {
+      if (hasActiveReactInstance() && !isViewAttachedToReactInstance()) {
         attachToReactInstanceManager();
       } else if (measureSpecsUpdated || mLastWidth != width || mLastHeight != height) {
         updateRootLayoutSpecs(true, mWidthMeasureSpec, mHeightMeasureSpec);
@@ -203,7 +203,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
     if (!isDispatcherReady()) {
       return;
     }
-    ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
+    ReactContext reactContext = getCurrentReactContext();
     UIManager uiManager = UIManagerHelper.getUIManager(reactContext, getUIManagerType());
 
     if (uiManager != null) {
@@ -220,7 +220,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
     if (!isDispatcherReady()) {
       return;
     }
-    ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
+    ReactContext reactContext = getCurrentReactContext();
     UIManager uiManager = UIManagerHelper.getUIManager(reactContext, getUIManagerType());
 
     if (uiManager != null) {
@@ -233,9 +233,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   }
 
   private boolean isDispatcherReady() {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(TAG, "Unable to dispatch touch to JS as the catalyst instance has not been attached");
       return false;
     }
@@ -262,31 +260,31 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
     if (shouldDispatchJSTouchEvent(ev)) {
       dispatchJSTouchEvent(ev);
     }
-    dispatchJSPointerEvent(ev);
+    dispatchJSPointerEvent(ev, true);
     return super.onInterceptTouchEvent(ev);
   }
 
-  @Override
-  public boolean onInterceptHoverEvent(MotionEvent ev) {
-    dispatchJSPointerEvent(ev);
-    return super.onInterceptHoverEvent(ev);
-  }
-
   @Override
   public boolean onTouchEvent(MotionEvent ev) {
     if (shouldDispatchJSTouchEvent(ev)) {
       dispatchJSTouchEvent(ev);
     }
-    dispatchJSPointerEvent(ev);
+    dispatchJSPointerEvent(ev, false);
     super.onTouchEvent(ev);
     // In case when there is no children interested in handling touch event, we return true from
     // the root view in order to receive subsequent events related to that gesture
     return true;
   }
 
+  @Override
+  public boolean onInterceptHoverEvent(MotionEvent ev) {
+    dispatchJSPointerEvent(ev, true);
+    return super.onInterceptHoverEvent(ev);
+  }
+
   @Override
   public boolean onHoverEvent(MotionEvent ev) {
-    dispatchJSPointerEvent(ev);
+    dispatchJSPointerEvent(ev, false);
     return super.onHoverEvent(ev);
   }
 
@@ -303,9 +301,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
   @Override
   public boolean dispatchKeyEvent(KeyEvent ev) {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(TAG, "Unable to handle key event as the catalyst instance has not been attached");
       return super.dispatchKeyEvent(ev);
     }
@@ -315,9 +311,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
   @Override
   protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(
           TAG,
           "Unable to handle focus changed event as the catalyst instance has not been attached");
@@ -330,9 +324,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
   @Override
   public void requestChildFocus(View child, View focused) {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(
           TAG,
           "Unable to handle child focus changed event as the catalyst instance has not been attached");
@@ -343,10 +335,8 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
     super.requestChildFocus(child, focused);
   }
 
-  protected void dispatchJSPointerEvent(MotionEvent event) {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+  protected void dispatchJSPointerEvent(MotionEvent event, boolean isCapture) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(TAG, "Unable to dispatch touch to JS as the catalyst instance has not been attached");
       return;
     }
@@ -357,19 +347,17 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
       FLog.w(TAG, "Unable to dispatch pointer events to JS before the dispatcher is available");
       return;
     }
-    ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
+    ReactContext reactContext = getCurrentReactContext();
     UIManager uiManager = UIManagerHelper.getUIManager(reactContext, getUIManagerType());
 
     if (uiManager != null) {
       EventDispatcher eventDispatcher = uiManager.getEventDispatcher();
-      mJSPointerDispatcher.handleMotionEvent(event, eventDispatcher);
+      mJSPointerDispatcher.handleMotionEvent(event, eventDispatcher, isCapture);
     }
   }
 
   protected void dispatchJSTouchEvent(MotionEvent event) {
-    if (mReactInstanceManager == null
-        || !mIsAttachedToInstance
-        || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
       FLog.w(TAG, "Unable to dispatch touch to JS as the catalyst instance has not been attached");
       return;
     }
@@ -377,7 +365,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
       FLog.w(TAG, "Unable to dispatch touch to JS before the dispatcher is available");
       return;
     }
-    ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
+    ReactContext reactContext = getCurrentReactContext();
     UIManager uiManager = UIManagerHelper.getUIManager(reactContext, getUIManagerType());
 
     if (uiManager != null) {
@@ -412,7 +400,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
-    if (mIsAttachedToInstance) {
+    if (isViewAttachedToReactInstance()) {
       removeOnGlobalLayoutListener();
       getViewTreeObserver().addOnGlobalLayoutListener(getCustomGlobalLayoutListener());
     }
@@ -421,7 +409,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   @Override
   protected void onDetachedFromWindow() {
     super.onDetachedFromWindow();
-    if (mIsAttachedToInstance) {
+    if (isViewAttachedToReactInstance()) {
       removeOnGlobalLayoutListener();
     }
   }
@@ -571,7 +559,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   private void updateRootLayoutSpecs(
       boolean measureSpecsChanged, final int widthMeasureSpec, final int heightMeasureSpec) {
     ReactMarker.logMarker(ReactMarkerConstants.ROOT_VIEW_UPDATE_LAYOUT_SPECS_START);
-    if (mReactInstanceManager == null) {
+    if (!hasActiveReactInstance()) {
       ReactMarker.logMarker(ReactMarkerConstants.ROOT_VIEW_UPDATE_LAYOUT_SPECS_END);
       FLog.w(TAG, "Unable to update root layout specs for uninitialized ReactInstanceManager");
       return;
@@ -585,7 +573,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
       return;
     }
 
-    final ReactContext reactApplicationContext = mReactInstanceManager.getCurrentReactContext();
+    final ReactContext reactApplicationContext = getCurrentReactContext();
 
     if (reactApplicationContext != null) {
       @Nullable
@@ -629,8 +617,8 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
     // to be committed via the Scheduler, which will cause mounting instructions
     // to be queued up and synchronously executed to delete and remove
     // all the views in the hierarchy.
-    if (mReactInstanceManager != null) {
-      final ReactContext reactApplicationContext = mReactInstanceManager.getCurrentReactContext();
+    if (hasActiveReactInstance()) {
+      final ReactContext reactApplicationContext = getCurrentReactContext();
       if (reactApplicationContext != null && isFabric()) {
         @Nullable
         UIManager uiManager =
@@ -729,11 +717,11 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   public void runApplication() {
     Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "ReactRootView.runApplication");
     try {
-      if (mReactInstanceManager == null || !mIsAttachedToInstance) {
+      if (!hasActiveReactInstance() || !isViewAttachedToReactInstance()) {
         return;
       }
 
-      ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
+      ReactContext reactContext = getCurrentReactContext();
       if (reactContext == null) {
         return;
       }
@@ -853,12 +841,12 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
   @Override
   public void handleException(final Throwable t) {
-    if (mReactInstanceManager == null || mReactInstanceManager.getCurrentReactContext() == null) {
+    if (!hasActiveReactContext()) {
       throw new RuntimeException(t);
     }
 
     Exception e = new IllegalViewOperationException(t.getMessage(), this, t);
-    mReactInstanceManager.getCurrentReactContext().handleException(e);
+    getCurrentReactContext().handleException(e);
   }
 
   public void setIsFabric(boolean isFabric) {
@@ -876,14 +864,28 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
   }
 
   /* package */ void sendEvent(String eventName, @Nullable WritableMap params) {
-    if (mReactInstanceManager != null) {
-      mReactInstanceManager
-          .getCurrentReactContext()
-          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-          .emit(eventName, params);
+    if (hasActiveReactInstance()) {
+      getCurrentReactContext().emitDeviceEvent(eventName, params);
     }
   }
 
+  public boolean hasActiveReactInstance() {
+    return mReactInstanceManager != null;
+  }
+
+  public boolean hasActiveReactContext() {
+    return mReactInstanceManager != null && mReactInstanceManager.getCurrentReactContext() != null;
+  }
+
+  @Nullable
+  public ReactContext getCurrentReactContext() {
+    return mReactInstanceManager.getCurrentReactContext();
+  }
+
+  public boolean isViewAttachedToReactInstance() {
+    return mIsAttachedToInstance;
+  }
+
   private class CustomGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {
     private final Rect mVisibleViewArea;
     private final int mMinKeyboardHeightDetected;
@@ -900,9 +902,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
     @Override
     public void onGlobalLayout() {
-      if (mReactInstanceManager == null
-          || !mIsAttachedToInstance
-          || mReactInstanceManager.getCurrentReactContext() == null) {
+      if (!hasActiveReactContext() || !isViewAttachedToReactInstance()) {
         return;
       }
 
@@ -916,6 +916,14 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
       checkForDeviceDimensionsChanges();
     }
 
+    private Activity getActivity() {
+      Context context = getContext();
+      while (!(context instanceof Activity) && context instanceof ContextWrapper) {
+        context = ((ContextWrapper) context).getBaseContext();
+      }
+      return (Activity) context;
+    }
+
     @RequiresApi(api = Build.VERSION_CODES.R)
     private void checkForKeyboardEvents() {
       getRootView().getWindowVisibleDisplayFrame(mVisibleViewArea);
@@ -933,7 +941,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
           Insets barInsets = rootInsets.getInsets(WindowInsets.Type.systemBars());
           int height = imeInsets.bottom - barInsets.bottom;
 
-          int softInputMode = ((Activity) getContext()).getWindow().getAttributes().softInputMode;
+          int softInputMode = getActivity().getWindow().getAttributes().softInputMode;
           int screenY =
               softInputMode == WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING
                   ? mVisibleViewArea.bottom - height
@@ -1061,7 +1069,7 @@ public class ReactRootView extends FrameLayout implements RootView, ReactRoot {
 
     private void emitUpdateDimensionsEvent() {
       DeviceInfoModule deviceInfo =
-          mReactInstanceManager.getCurrentReactContext().getNativeModule(DeviceInfoModule.class);
+          getCurrentReactContext().getNativeModule(DeviceInfoModule.class);
 
       if (deviceInfo != null) {
         deviceInfo.emitUpdateDimensionsEvent();

package/ReactAndroid/src/main/java/com/facebook/react/animated/AnimationDriver.java

@@ -31,7 +31,7 @@ import com.facebook.react.bridge.ReadableMap;
   /**
    * This method will get called when some of the configuration gets updated while the animation is
    * running. In that case animation should restart keeping its internal state to provide a smooth
-   * transision. E.g. in case of a spring animation we want to keep the current value and speed and
+   * transition. E.g. in case of a spring animation we want to keep the current value and speed and
    * start animating with the new properties (different destination or spring settings)
    */
   public void resetConfig(ReadableMap config) {

package/ReactAndroid/src/main/java/com/facebook/react/animated/BUCK

@@ -10,25 +10,22 @@ rn_android_library(
         "pfh:ReactNative_CommonInfrastructurePlaceholder",
     ],
     language = "JAVA",
-    provided_deps = [
-        react_native_dep("third-party/android/androidx:annotation"),
-        react_native_dep("third-party/android/androidx:core"),
-        react_native_dep("third-party/android/androidx:fragment"),
-        react_native_dep("third-party/android/androidx:legacy-support-core-ui"),
-        react_native_dep("third-party/android/androidx:legacy-support-core-utils"),
-    ],
     visibility = [
         "PUBLIC",
     ],
     deps = [
         react_native_dep("libraries/fbcore/src/main/java/com/facebook/common/logging:logging"),
+        react_native_dep("third-party/android/androidx:annotation"),
+        react_native_dep("third-party/android/androidx:core"),
+        react_native_dep("third-party/android/androidx:fragment"),
+        react_native_dep("third-party/android/androidx:legacy-support-core-utils"),
         react_native_dep("third-party/java/infer-annotations:infer-annotations"),
         react_native_dep("third-party/java/jsr-305:jsr-305"),
         react_native_target("java/com/facebook/react/bridge:bridge"),
         react_native_target("java/com/facebook/react/common:common"),
+        react_native_target("java/com/facebook/react/config:config"),
         react_native_target("java/com/facebook/react/module/annotations:annotations"),
         react_native_target("java/com/facebook/react/modules/core:core"),
-        react_native_target("java/com/facebook/react/config:config"),
         react_native_target("java/com/facebook/react/uimanager:uimanager"),
         react_native_target("java/com/facebook/react/uimanager/annotations:annotations"),
         react_native_target("java/com/facebook/react/views/view:view"),

package/ReactAndroid/src/main/java/com/facebook/react/animated/InterpolationAnimatedNode.java

@@ -8,11 +8,13 @@
 package com.facebook.react.animated;
 
 import androidx.annotation.Nullable;
+import androidx.core.graphics.ColorUtils;
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableType;
 import java.util.ArrayList;
+import java.util.List;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
@@ -27,8 +29,10 @@ import java.util.regex.Pattern;
   public static final String EXTRAPOLATE_TYPE_CLAMP = "clamp";
   public static final String EXTRAPOLATE_TYPE_EXTEND = "extend";
 
-  private static final String fpRegex = "[+-]?(\\d+\\.?\\d*|\\.\\d+)([eE][+-]?\\d+)?";
-  private static final Pattern fpPattern = Pattern.compile(fpRegex);
+  private static final Pattern sNumericPattern =
+      Pattern.compile("[+-]?(\\d+\\.?\\d*|\\.\\d+)([eE][+-]?\\d+)?");
+
+  private static final String COLOR_OUTPUT_TYPE = "color";
 
   private static double[] fromDoubleArray(ReadableArray ary) {
     double[] res = new double[ary.size()];
@@ -38,6 +42,44 @@ import java.util.regex.Pattern;
     return res;
   }
 
+  private static int[] fromIntArray(ReadableArray ary) {
+    int[] res = new int[ary.size()];
+    for (int i = 0; i < res.length; i++) {
+      res[i] = ary.getInt(i);
+    }
+    return res;
+  }
+
+  private static double[][] fromStringPattern(ReadableArray array) {
+    int size = array.size();
+    double[][] outputRange = new double[size][];
+
+    // Match the first pattern into a List, since we don't know its length yet
+    Matcher m = sNumericPattern.matcher(array.getString(0));
+    List<Double> firstOutputRange = new ArrayList<>();
+    while (m.find()) {
+      firstOutputRange.add(Double.parseDouble(m.group()));
+    }
+    double[] firstOutputRangeArr = new double[firstOutputRange.size()];
+    for (int i = 0; i < firstOutputRange.size(); i++) {
+      firstOutputRangeArr[i] = firstOutputRange.get(i).doubleValue();
+    }
+    outputRange[0] = firstOutputRangeArr;
+
+    for (int i = 1; i < size; i++) {
+      double[] outputArr = new double[firstOutputRangeArr.length];
+
+      int j = 0;
+      m = sNumericPattern.matcher(array.getString(i));
+      while (m.find() && j < firstOutputRangeArr.length) {
+        outputArr[j++] = Double.parseDouble(m.group());
+      }
+      outputRange[i] = outputArr;
+    }
+
+    return outputRange;
+  }
+
   private static double interpolate(
       double value,
       double inputMin,
@@ -110,6 +152,57 @@ import java.util.regex.Pattern;
         extrapolateRight);
   }
 
+  /*package*/ static int interpolateColor(double value, double[] inputRange, int[] outputRange) {
+    int rangeIndex = findRangeIndex(value, inputRange);
+    int outputMin = outputRange[rangeIndex];
+    int outputMax = outputRange[rangeIndex + 1];
+    if (outputMin == outputMax) {
+      return outputMin;
+    }
+
+    double inputMin = inputRange[rangeIndex];
+    double inputMax = inputRange[rangeIndex + 1];
+    if (inputMin == inputMax) {
+      if (value <= inputMin) {
+        return outputMin;
+      }
+      return outputMax;
+    }
+
+    double ratio = (value - inputMin) / (inputMax - inputMin);
+    return ColorUtils.blendARGB(outputMin, outputMax, (float) ratio);
+  }
+
+  /*package*/ static String interpolateString(
+      String pattern,
+      double value,
+      double[] inputRange,
+      double[][] outputRange,
+      String extrapolateLeft,
+      String extrapolateRight) {
+    int rangeIndex = findRangeIndex(value, inputRange);
+    StringBuffer sb = new StringBuffer(pattern.length());
+
+    Matcher m = sNumericPattern.matcher(pattern);
+    int i = 0;
+    while (m.find() && i < outputRange[rangeIndex].length) {
+      double val =
+          interpolate(
+              value,
+              inputRange[rangeIndex],
+              inputRange[rangeIndex + 1],
+              outputRange[rangeIndex][i],
+              outputRange[rangeIndex + 1][i],
+              extrapolateLeft,
+              extrapolateRight);
+      int intVal = (int) val;
+      m.appendReplacement(sb, intVal != val ? Double.toString(val) : Integer.toString(intVal));
+      i++;
+    }
+    m.appendTail(sb);
+    return sb.toString();
+  }
+
   private static int findRangeIndex(double value, double[] ranges) {
     int index;
     for (index = 1; index < ranges.length - 1; index++) {
@@ -120,70 +213,39 @@ import java.util.regex.Pattern;
     return index - 1;
   }
 
+  private enum OutputType {
+    Number,
+    Color,
+    String,
+  }
+
   private final double mInputRange[];
-  private final double mOutputRange[];
-  private String mPattern;
-  private double mOutputs[][];
-  private final boolean mHasStringOutput;
-  private final Matcher mSOutputMatcher;
+  private final Object mOutputRange;
+  private final OutputType mOutputType;
+  private final @Nullable String mPattern;
   private final String mExtrapolateLeft;
   private final String mExtrapolateRight;
   private @Nullable ValueAnimatedNode mParent;
-  private boolean mShouldRound;
-  private int mNumVals;
+  private Object mObjectValue;
 
   public InterpolationAnimatedNode(ReadableMap config) {
     mInputRange = fromDoubleArray(config.getArray("inputRange"));
     ReadableArray output = config.getArray("outputRange");
-    mHasStringOutput = output.getType(0) == ReadableType.String;
-    if (mHasStringOutput) {
-      /*
-       * Supports string shapes by extracting numbers so new values can be computed,
-       * and recombines those values into new strings of the same shape.  Supports
-       * things like:
-       *
-       *   rgba(123, 42, 99, 0.36) // colors
-       *   -45deg                  // values with units
-       */
-      int size = output.size();
-      mOutputRange = new double[size];
-      mPattern = output.getString(0);
-      mShouldRound = mPattern.startsWith("rgb");
-      mSOutputMatcher = fpPattern.matcher(mPattern);
-      ArrayList<ArrayList<Double>> mOutputRanges = new ArrayList<>();
-      for (int i = 0; i < size; i++) {
-        String val = output.getString(i);
-        Matcher m = fpPattern.matcher(val);
-        ArrayList<Double> outputRange = new ArrayList<>();
-        mOutputRanges.add(outputRange);
-        while (m.find()) {
-          Double parsed = Double.parseDouble(m.group());
-          outputRange.add(parsed);
-        }
-        mOutputRange[i] = outputRange.get(0);
-      }
 
-      // ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)']
-      // ->
-      // [
-      //   [0, 50],
-      //   [100, 150],
-      //   [200, 250],
-      //   [0, 0.5],
-      // ]
-      mNumVals = mOutputRanges.get(0).size();
-      mOutputs = new double[mNumVals][];
-      for (int j = 0; j < mNumVals; j++) {
-        double[] arr = new double[size];
-        mOutputs[j] = arr;
-        for (int i = 0; i < size; i++) {
-          arr[i] = mOutputRanges.get(i).get(j);
-        }
-      }
+    if (COLOR_OUTPUT_TYPE.equals(config.getString("outputType"))) {
+      mOutputType = OutputType.Color;
+      mOutputRange = fromIntArray(output);
+      mPattern = null;
+    } else if (output.getType(0) == ReadableType.String) {
+      mOutputType = OutputType.String;
+      mOutputRange = fromStringPattern(output);
+      mPattern = output.getString(0);
     } else {
+      mOutputType = OutputType.Number;
       mOutputRange = fromDoubleArray(output);
-      mSOutputMatcher = null;
+      mPattern = null;
     }
+
     mExtrapolateLeft = config.getString("extrapolateLeft");
     mExtrapolateRight = config.getString("extrapolateRight");
   }
@@ -210,46 +272,39 @@ import java.util.regex.Pattern;
   @Override
   public void update() {
     if (mParent == null) {
-      // The graph is in the middle of being created, just skip this
-      // unattached node.
+      // The graph is in the middle of being created, just skip this unattached node.
       return;
     }
+
     double value = mParent.getValue();
-    mValue = interpolate(value, mInputRange, mOutputRange, mExtrapolateLeft, mExtrapolateRight);
-    if (mHasStringOutput) {
-      // 'rgba(0, 100, 200, 0)'
-      // ->
-      // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
-      if (mNumVals > 1) {
-        StringBuffer sb = new StringBuffer(mPattern.length());
-        int i = 0;
-        mSOutputMatcher.reset();
-        while (mSOutputMatcher.find()) {
-          double val =
-              interpolate(value, mInputRange, mOutputs[i++], mExtrapolateLeft, mExtrapolateRight);
-          if (mShouldRound) {
-            // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont*
-            // want to
-            // round the opacity (4th column).
-            boolean isAlpha = i == 4;
-            int rounded = (int) Math.round(isAlpha ? val * 1000 : val);
-            String num =
-                isAlpha ? Double.toString((double) rounded / 1000) : Integer.toString(rounded);
-            mSOutputMatcher.appendReplacement(sb, num);
-          } else {
-            int intVal = (int) val;
-            String num = intVal != val ? Double.toString(val) : Integer.toString(intVal);
-            mSOutputMatcher.appendReplacement(sb, num);
-          }
-        }
-        mSOutputMatcher.appendTail(sb);
-        mAnimatedObject = sb.toString();
-      } else {
-        mAnimatedObject = mSOutputMatcher.replaceFirst(String.valueOf(mValue));
-      }
+    switch (mOutputType) {
+      case Number:
+        mValue =
+            interpolate(
+                value, mInputRange, (double[]) mOutputRange, mExtrapolateLeft, mExtrapolateRight);
+        break;
+      case Color:
+        mObjectValue = Integer.valueOf(interpolateColor(value, mInputRange, (int[]) mOutputRange));
+        break;
+      case String:
+        mObjectValue =
+            interpolateString(
+                mPattern,
+                value,
+                mInputRange,
+                (double[][]) mOutputRange,
+                mExtrapolateLeft,
+                mExtrapolateRight);
+        break;
     }
   }
 
+  @Override
+  public Object getAnimatedObject() {
+    return mObjectValue;
+  }
+
+  @Override
   public String prettyPrint() {
     return "InterpolationAnimatedNode[" + mTag + "] super: " + super.prettyPrint();
   }