On android useAnimatedStyle fails when Animated.FlatList has the onRefresh property.

[LhZzZz]

Description

const opacityStyle = useAnimatedStyle(() => {
    console.warn('inited', inited.value);
    return {
      opacity: inited.value ? 1 : 0,
    };
  });

<Animated.FlatList
    onRefresh={props.onRefresh}
    refreshing={props.refreshing}
    data={props.data}
    renderItem={props.renderItem}
    style={[{flex: 1}, opacityStyle]}
/>

the opacityStyle not working but if i remove onRefresh it works again. it only happens on android.

Steps to reproduce

1. set onRefresh and animated style for a Animated.FlatList
2. animated style not working
3. remove onRefresh
4. animated style works

Snack or a link to a repository

https://gitlab.com/dogofe/enhance-tab-view.git

Reanimated version

2.17.0

React Native version

0.71.2

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[LhZzZz]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

https://snack.expo.dev/@lhz19960823/tactless-pretzel

[Latropos]

@LhZzZz Thank you for your submitting the bug. (Your silver kitten is very beautiful) The bug appears on android devices only. We are investigating the problem, and I hope we will solve it soon.

[Latropos]

(And until it's fixed you can pass your animated style directly to each item as a workaround)

[LhZzZz]

@Latropos Thanks for your help. Actually, I found out that the animated props were not working and then I found out that the animated style was not working either.

const animatedProps = useAnimatedProps(() => {
    if (isAndroid) {
      return {};
    }
    if (inited.value) {
      if (clampedTranslateY.value <= headerHeight) {
        return {
          contentOffset: {
            x: 0,
            y: clampedTranslateY.value,
          },
        } as any;
      }
      return {};
    } else {
      return {
        contentOffset: {
          x: 0,
          y: initOffsetValue.value,
        },
      } as any;
    }
  }, [inited.value, headerHeight]);

I thought it was some kind of conflict between the animation of onRefresh and contentOffset, but it doesn't seem to be

[Latropos]

The reason is probably that when you have a FlatList with refreash on android an extra view for refresh is added under the hood. This particular view is a native-only one and probably it causes the problem. We copy it's style to inner component that can be animated.

As you can see in this quickly made repro:

1. the bottom square and the flatlist have the very same animated style

  const opacityStyle = useAnimatedStyle(() => {
    return {
      opacity: 0.5,
      backgroundColor: inited.value ? 'red' : 'blue',
    };
  });

2. When bottom square changes its color from semi-transparet blue to semi-transparent - red, the flatlist changes from blue into purple - so we have two partially-transparent views, blue and red.

3. Also if you try animating opacity from 1 to 0, instead of from 0 to 1 it works.

Screen.Recording.2023-07-14.at.12.35.57.mov

[Latropos]

I thought it was some kind of conflict between the animation of onRefresh and contentOffset, but it doesn't seem to be

IMHO its almost definitely this wrapper that is created by android on flatlist with refresh control, but I won't be completely sure until it's fixed ;-)

[jsh7195]

same issue android