Transition API not working on Android

Hey, so I was really impressed by the new Transition API’s ease of use and immediately tried it out, but it just won’t work on Android for me. On iOS it works just fine, but on Android, it won’t animate anything.

I have the following function (which is basically a straight copy of the progress.js example):

import React, { useState, useRef } from "react";
import { View, StyleSheet } from "react-native";
import { Transitioning, Transition } from "react-native-reanimated";

import { Button } from "common";

export default function TestScreen() {
  const transition = <Transition.Change interpolation="easeInOut" durationMs={600} />;

  let [perc, setPerc] = useState(20);
  const ref = useRef();

  return (
    <Transitioning.View ref={ref} transition={transition} style={styles.centerAll}>
      <Button
        activeOpacity={0.2}
        onPress={() => {
          ref.current.animateNextTransition();
          setPerc(perc + 20 <= 100 ? perc + 20 : 20);
        }}
        style={{ borderRadius: 0 }}
        viewStyle={styles.accordionButtonStyle}
      >
        {perc + 20 <= 100 ? "+20%" : "-80%"}
      </Button>
      <View style={styles.bar}>
        <View style={{ height: 5, width: `${perc}%`, backgroundColor: "#FF5252" }} />
      </View>
    </Transitioning.View>
  );
}

const styles = StyleSheet.create({
  accordionButtonStyle: {
    shadowColor: "black",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 3
  },
  centerAll: {
    flex: 1,
    alignItems: "center",
    marginTop: 100
  },
  bar: {
    marginTop: 30,
    height: 5,
    width: "80%",
    backgroundColor: "#AAA"
  }
});

I simply import this to my StackNavigator like this:

import { createStackNavigator } from "react-navigation";

import HomeScreen from "tabs/main/home/HomeScreen";
import ArticleScreen from "tabs/main/article/ArticleScreen";
import TestScreen from "tabs/main/test/TestScreen";
import { nav } from "static/constants";

export const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home"
      }
    },
    Article: {
      screen: ArticleScreen
    },
    Test: {
      screen: TestScreen,
      navigationOptions: {
        title: "Testing Area"
      }
    }
  },
  {
    initialRouteName: nav.HOME
  }
);

I have two screen caps that illustrate the behavior:

Here is some other data that may be important:

React version: 16.8.6
React Native version: 0.59.8
Android API Level: 28
Reanimated version: 1.0.1

Am I missing something really obvious here? Maybe someone can help me. Thanks in advance!

[thomasw]

Okay, I have an even more minimal reproduction. In my environment, I had react-native-screens installed but disabled because of an unrelated issue. I noticed that the transitions would work in some contexts if I re-enabled screens.

When screens are disabled, react-navigation’s TabNavigator wraps tabs in a View with removeClippedSubviews enabled. See https://github.com/react-navigation/tabs/blob/44b895fa114465fedafba217c27a2918ed38367d/src/views/ResourceSavingScene.js#L35

If I rip all of the navigation stuff out and similarly wrap the progress example in a view with removeClippedSubviews enabled, then transitions stop working.

import React, { useState, useRef } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Transitioning, Transition } from 'react-native-reanimated';

export default function Progress() {
  const transition = <Transition.Change interpolation="easeInOut" />;

  let [perc, setPerc] = useState(20);
  const ref = useRef();

  // Transitions will not work on Android with removeClippedSubviews. If you set
  // this to false, transitions will work.
  return (
    <View removeClippedSubviews style={{ flex: 1 }}>
      <Transitioning.View
          ref={ref}
          style={styles.centerAll}
          transition={transition}>
        <Button
            title={perc + 20 <= 100 ? '+20%' : '-80%'}
            color="#FF5252"
            onPress={() => {
              ref.current.animateNextTransition();
              setPerc(perc + 20 <= 100 ? perc + 20 : 20);
            }}
        />
        <View style={styles.bar}>
          <View
            style={{ height: 5, width: `${perc}%`, backgroundColor: '#FF5252' }}
          />
        </View>
      </Transitioning.View>
    </View>
  );
}

const styles = StyleSheet.create({
  centerAll: {
    flex: 1,
    alignItems: 'center',
    marginTop: 100,
  },
  bar: {
    marginTop: 30,
    height: 5,
    width: '80%',
    backgroundColor: '#aaa',
  },
});

@mralj, can you check your render tree for any views along the way with removeClippedSubviews enabled? I searched the react-native-navigation repo for removeClippedSubviews but didn’t get any hits. There might be other causes here.

[Freddy03h]

I don’t know the versions of reanimated, and screens used in expo, but it’s not the newest versions. It’s resolved on newest versions : https://github.com/software-mansion/react-native-screens/issues/203#issuecomment-640917824