[Android] Reset sMatrixDecompositionContext before applying transformations

[cabelitos]

Summary

Prior to this commit React Native on Android was not properly setting
the transform's scale properly correctly when setting it to 0. In order
to properly set one would need to use values close to 0, like 0.0001.
This was happing due to BaseViewManager sharing sMatrixDecompositionContext
across all views in a React Native app.
In some cases the decomposeMatrix() method from the MatrixMathHelper would
return early and not set any new values in sMatrixDecompositionContext
(this is, the new transform values) and
since this is a shared object the BaseViewManager would set the transform values
from the a previous transform.

In order to prevent this issue, before setting the new transform values
always reset the sMatrixDecompositionContext values.

Changelog

[Android] [Fixed] - Reset sMatrixDecompositionContext before applying transformations

Test Plan

Run the code below on an Android device/emulator and you should see the following results:

Android without the patch - current implementation

Notice that the scale 0 is not properly applied to the last rectangle and the second rectangle does not animate properly.

Android with the patch

Everything works fine

iOS - current implementation

Everything works fine

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import { Animated, Button, StyleSheet, View, Text, SafeAreaView } from 'react-native';

const HorizontalContainer = ({ children, title }) => (
  <View style={styles.horizontalContainer}>
    {children}
    <Text style={styles.text}>{title}</Text>
  </View>
);

const App = () => {
  const animValue1 = React.useRef(new Animated.Value(1)).current;
  const animValue2 = React.useRef(new Animated.Value(1)).current;
  const onStartAnim = React.useCallback(() => {
    animValue1.setValue(0);
    animValue2.setValue(0);
    Animated.sequence([
      Animated.timing(animValue1, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(animValue2, {
        toValue: 1,
        delay: 700,
        duration: 300,
        useNativeDriver: true,
      })
  ]).start();
  }, [animValue1, animValue2]);
  return (
    <SafeAreaView style={styles.container}>
      <Button title="Start Animation" onPress={onStartAnim} />
      <HorizontalContainer title="Animated scale from 0 to 1">
        <Animated.View style={[styles.view, { transform: [{ scaleX: animValue1 }] }]} />
      </HorizontalContainer>
      <HorizontalContainer title="Animated scale from 0 to 1 - delayed">
        <Animated.View style={[styles.view, { transform: [{ scaleX: animValue2 }] }]} />
      </HorizontalContainer>
      <HorizontalContainer title="Scale 0.4">
        <View style={[styles.view, { transform: [{ scaleX: 0.4 }] }]} />
      </HorizontalContainer>
      <HorizontalContainer title="Scale 0.2">
        <View style={[styles.view, { transform: [{ scaleX: 0.2 }] }]} />
      </HorizontalContainer>
      <HorizontalContainer title="Scale 0">
        <View style={[styles.view, { transform: [{ scaleX: 0 }, { translateY: 100 }] }]} />
      </HorizontalContainer>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  text: {
    fontSize: 10,
    color: 'black',
    marginLeft: 10,
  },
  horizontalContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: 'indigo',
    marginVertical: 5,
  }
});

Closes #25205
Closes #6278
Closes #6278

[janicduplessis]

Nice work figuring out this issue! LGTM

cc @cpojer

[cabelitos]

Thank you very much, @janicduplessis !

[cpojer]

😮

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @cabelitos in ab80001.

^{When will my fix make it into a release? | Upcoming Releases}

[cabelitos]

@cpojer thank you very much