React-native-reanimated: Transitioning inside FlatList behaves differently on Android than on iOS

[phiilu]

Hey!

I noticed that transitioning inside a FlatList behaves different on Android than on iOS. On iOS the content in the list is pushed down, but on Android it is not.

Are there any solution for this problem or is there maybe a different way on achieving the same thing.

The code looks something like this:

const transition = (
  <Transition.Sequence>
    <Transition.Out type="fade" />
    <Transition.Change interpolation="easeInOut" />
    <Transition.In type="fade" />
  </Transition.Sequence>
);

class TransitionExample extends React.Component {
  transitionRef = React.createRef();

  render() {
    return (
      <Transitioning.View ref={this.transitionRef} transition={transition}>
        <FlatList
          style={styles.container}
          data={this.state.invoices}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <Accordion>
              {({ open, toggleAccordion }) => {
                return (
                  <Fragment>
                    <TouchableWithoutFeedback
                      onPress={() => {
                        this.transitionRef.current.animateNextTransition();
                        toggleAccordion();
                      }}
                    >
                      <View style={styles.invoiceItem}>
                        <View style={styles.arrowDown}>
                          <ChevronArrowDown
                            style={open && styles.arrowUp}
                            width={18}
                            height={18}
                            fill={colors.ALT_GREY}
                          />
                        </View>
                        <Text style={styles.date}>
                          Invoice Date: 03.04.2019
                        </Text>
                        <Text style={styles.billingPeriod}>
                          Billing period: 01.02 - 01.03.2018
                        </Text>
                        {open && <CostTable />}
                      </View>
                    </TouchableWithoutFeedback>
                  </Fragment>
                );
              }}
            </Accordion>
          )}
        />
      </Transitioning.View>
    );
  }
}

iOS

Android

[sampok]

I'm experiencing a similar problem. It seems that flex dimensions changes are not properly updated on Android. Here's a simple toggle in which flex changes from 0 to 1:

iOS

Android

const styles = StyleSheet.create({
  toggle: {
    minWidth: 100,
    height: 36,
    flexDirection: "row",
    justifyContent: "flex-start",
    backgroundColor: "#dddddd"
  },
  spaceBefore: {
    width: 0
  },
  on: {
    flex: 1
  },
  off: {
    flex: 0
  },
  slider: {
    backgroundColor: "#999999",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 20,
    color: "black"
  }
});

const Toggle = () => {
  const ref = useRef();
  const [value, setValue] = useState(false);

  useLayoutEffect(() => {
    ref.current.animateNextTransition();
  }, [value]);

  return (
    <TouchableWithoutFeedback onPress={() => setValue(!value)}>
      <Transitioning.View
        ref={ref}
        transition={<Transition.Change interpolation="easeInOut" />}
        style={styles.toggle}
      >
        <View style={[styles.spaceBefore, value ? styles.on : styles.off]} />
        <View style={styles.slider}>
          <Text>{value ? "ON" : "OFF"}</Text>
        </View>
      </Transitioning.View>
    </TouchableWithoutFeedback>
  );
};

[CameronStuartSmith]

+1

[kmagiera]

This seems like a bug in Transitions on Android. We should be able to take a look at it some time soon. Thanks for reporting!

[neopit]

Hi,

I am experiencing the same issue. It works perfectly on iOS but on Android not.

The position of many elements is wrong and when we re-order the Flatlist then all the height of the rows are wrong.

[nandorojo]

Just checking in on the progress for this, thank you!

[jakub-gonet]

We discussed Transitions internally in our team. Considering that v2 makes creating animations easier and Transitions was an experimental API for a long time, we decided to leave Transitions as they are.

We won’t actively fix bugs in them, but we’ll happily merge any PR with fixes. We’re also thinking about rewriting Transitions in v2 sometime in the future.

I’m closing this issue, but if you have further questions, I will be happy to help.

[nandorojo]

@jakub-gonet thanks for the heads up. It would be amazing to still have transitions in Reanimated 2. It's a great API for difficult animations, such as dynamic height changes, accordions, and rearranging a list of items. It's nice to be able to toss the transitioning view component in, and boom, UI changes look nice. The transition prop is a bit unintuitive to me, but it's worth it for how powerful transitions are.

Thanks for the great work!