Transitioning inside FlatList behaves differently on Android than on iOS

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

[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!

[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.