Adding additional items to <FlatList> breaks shared <Transition>'s

[hesselberg]

I'm using the <FlatList>, where my renderItem returns a <Transition>. This works great, but, when I change my data of my <FlatList>, the transition seems to fail. I assume its to do with the shared property.

Trying to use extraData, "faking" an update via setting a boolean to true/false doesn't seem to do the trick.

I'm using Redux to handle state changes.

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

It will be very difficult for me to create a simple example as you normally request. Hope we can get to the bottom of this without having to recreate a simple example :-)

[hesselberg]

Found a workaround, however adding additional items to my <FlatList> still sort of "breaks" the nice transition using a shared <Transition>.

Would it be possible seeing a working example?

[brycepavey]

Experienced the same thing. After hours and hours of experimenting I found the cause (in my case) was going from a the first screen which contained a header to the second screen which had header: null. I brought back a header and suddenly when the FlatList received more data the transitions still worked.

example of navigationOptions in my FluidNavigator that broke it:

static navigationOptions = ({ navigation }) => {
        let routeName = "";
        if (
            navigation &&
            navigation.state &&
            Array.isArray(navigation.state.routes) &&
            navigation.state.hasOwnProperty("index")
        ) {
            routeName = navigation.state.routes[navigation.state.index].routeName;
        }

        if (routeName == "SomeRoute") {
            return {
                headerTitle: <CategoryItemHeader />,
                headerRight: (
                    <TouchableOpacity
                        onPress={() => {
                            navigation.navigate("SomeDifferentRoute");
                        }}
                    >
                        <Image source={require("../../assets/icons/filter.png")} style={{ marginRight: 15 }} />
                    </TouchableOpacity>
                ),
                headerLeft: <Back onPress={() => navigation.goBack()} />,
                headerStyle: {
                    backgroundColor: "white",
                    elevation: 0,
                    borderBottomWidth: 0
                }
            };
        } else if (routeName == "SomeOtherRoute") {
            return {
                header: null
            };
        }
    };

[hesselberg]

@brycepavey great find although unusual behaviour. I'll try it out later today 👍

[hesselberg]

@brycepavey Finally got around to testing it out. You're right, it works now, but, I use a custom heading for all screens.

I assume this is considered a bug though