useAnimatedProps with FlatList has crash for Android !

[pioner92]

Description

I am using useAnimatedProps for contentOffset:{ x:0, y:animatedValue.value } for FlatList , and get error for Android , IOS working good !

Expected behavior

The FlatList changes its y-offset

Actual behavior & steps to reproduce

The application exits with an error

    --------- beginning of crash
2021-10-25 11:17:10.329 19795-19795/com.pizza A/libc: Fatal signal 6 (SIGABRT), code -6 in tid 19795 (com.pizza), pid 19795 (com.pizza)
2021-10-25 11:17:09.689 19795-19795/com.pizza E/unknown:FabricViewStateManager: setState called without a StateWrapper

Snack or minimal code example

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

...


 const scrollOffsetValue = useSharedValue({key: '', value: 0});
 const scrollValue = useSharedValue(0);


  const onScrollVerticalList = useAnimatedScrollHandler<{y: number}>({
    onScroll: e => {
      scrollValue.value = e.contentOffset.y;
    },
  });

 const onEndScroll = useCallback(key => {
    scrollOffsetValue.value = {
      key,
      value: Math.min(Math.max(scrollValue.value, 0), HEADER_HEIGHT),
    };
  }, []);

const renderItem = ({ routeKey, scrollOffsetValue, onEndScroll, onScrollVerticalList }) => {

  ...

  const animatedProps = useAnimatedProps(() => {
    if (scrollOffsetValue.value.key !== routeKey) {
      return {
        contentOffset: {
          x: 0,
          y: scrollOffsetValue.value.value,
        },
      };
    }
    return {};
  });

  return (
    <View style={UIStyles.flex}>
      <AnimatedFlatList
        bounces={false}
        style={styles.listStyle}
        onScroll={onScroll}
        animatedProps={animatedProps}
        onScrollEndDrag={onEndScrollHandler}
        onMomentumScrollEnd={onEndScrollHandler}
        ref={listRef}
        showsVerticalScrollIndicator={false}
        keyExtractor={keyExtractorVerticalList}
        contentContainerStyle={contentContainerStyle_}
        initialNumToRender={7}
        maxToRenderPerBatch={7}
        windowSize={5}
        scrollEventThrottle={16}
        data={productIds}
        renderItem={renderItem}
      />
    </View>
  );
};
}

Package versions

• React Native: 0.64.0
• React Native Reanimated: 2.3.0-beta.2
• NodeJS: v16.9.1
• Xcode: 12.5
• Java & Gradle: 1.8.0_281 & 4.1.0

Affected platforms

• Android
• iOS
• Web

[github-actions]

Issue validator

The issue is valid!

[tomekzaw]

Hello @pioner92! It looks like you're running your app with Fabric enabled (based on FabricViewStateManager in the logs you have provided). Unfortunately, Reanimated 2 does not support Fabric yet, but we're actively working on it so please stay tuned 😄

[kmagiera]

@pioner92 can you confirm if @tomekzaw's comment has helped in resolving the problem?