lenghty FlatList (ListView) colliding with the motion animation

[zabakala]

Hi. Your example works fine, but there is an issue when rendering the list rows. I´ve supplied a list of 24 items. But they are not rendered all. Sometimes only the first 9 items are rendered, other times only the first 20 items are rendered. The number is different. But never did I succeed in rendering all 24 items. I´ve found out that all the items (24) are available on the state but they are rendered up to the point when the onMoveToDestinationWillStart will fire as is apparent from the attachment. After this life-cycle fires, no more items get rendered. Is it, somehow, expected behavior?

[xotahal]

Hey David 👋 Not sure if I understand the problem 🤔 FlatList has got some performance improvements so it doesn't render everything in once (as ListView did). Is that what you think?

[zabakala]

Hey David Not sure if I understand the problem FlatList has got some performance improvements so it doesn't render everything in once (as ListView did). Is that what you think?

Sorry if I was not clear enough. The issue is that even though all 24 items are available on the state, they are not rendered all even if I scroll to the very bottom of the list. The onMoveToDestinationWillStart seems to somehow stop the flat list from rendering all items. If I reach the bottom of the list, the remaining items are not rendered. The issue remains the same even if I replace the FlatList with the ListView.

[xotahal]

Why is the onMoveToDestinationWillStart fired when you're just scrolling down?

[zabakala]

Why is the onMoveToDestinationWillStart fired when you're just scrolling down?

It gets fired only once , ie. when navigating from the main list to detail. In fact, the issue is easily reproducible. Just make sure the data file returns more than 20 rows for the FlatList inside the Screens/Detail/Detail.js and you will probably not be able to see all list items even with scrolling. The issue is gone once the animation-making wrapper is commented out:

// commented out TranslateYAndOpacity to make all list items visible inside the Detail
// <TranslateYAndOpacity isHidden={phase !== 'phase-2'} delay={56 * delay}>
        <View style={styles.itemContainer}>
          <Row style={styles.rowContainer}>
            <View style={styles.titleContainer}>
              <Text style={styles.titleText}>{item.foo}</Text>
            </View>
            <Text style={styles.amountText}>{item.baz}</Text>
          </Row>
          <Text style={styles.vatText}>
            {`${"bar"} X1 (Including VAT 10%)`}
          </Text>
        </View>
//</TranslateYAndOpacity>