Error: [Reanimated] Reading from _value directly is only possible on the UI runtime. Perhaps you passed an Animated Style to a non-animated component?

[zj-wukewei]

When I'm trying to use useAnimatedStyle in my component I facing this issue when its render.

import { StyleSheet, View, ScrollView, Text, Pressable } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { HelloWave } from "@/components/HelloWave";
import Animated, {
useScrollViewOffset,
useAnimatedRef,
useDerivedValue,
useAnimatedProps,
useAnimatedStyle,
interpolate,
} from "react-native-reanimated";
import { CustomHeader } from "@/components";
import NiceModal from "@ebay/nice-modal-react";
import { useState, useRef, useEffect } from "react";

const TBAS = [
{ name: "待评估", index: 1 },
{ name: "待确认方案", index: 2 },
{ name: "随访方案", index: 3 },
{ name: "异常", index: 4 },
];

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

export default function HomeScreen() {
const [data] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
const [select, setSelect] = useState(1);

const [layoutTop, setLayoutTop] = useState(0);
const animatedRef = useAnimatedRef<Animated.ScrollView>();
const offset = useScrollViewOffset(animatedRef);

const tabStyle = useAnimatedStyle(() => {
const opacity = interpolate(offset.value, [0, layoutTop], [100, 0]);
return {
backgroundColor: rgb(255, 255, 255, ${opacity})
};
}, [layoutTop]);

return (
<View style={{ flex: 1 }}>

<AnimatedLinearGradient
style={[styles.headerImage]}
colors={["rgba(22, 185, 152, 0.28)", "rgba(242, 243, 245, 0.28)"]}
/>
<Animated.ScrollView
ref={animatedRef}
style={styles.scroll}
contentContainerStyle={styles.contentContainer}
stickyHeaderIndices={[1]}
>

<Animated.View style={tabStyle}>
<Animated.Text
style={{
fontWeight: "500",
fontSize: 18,
marginTop: 20,
color: "black",
}}
>
代办事项
</Animated.Text>
<Animated.ScrollView
style={[{ marginTop: 22 }]}
horizontal
onLayout={(event) => {
setLayoutTop(event.nativeEvent.layout.y);
}}
showsHorizontalScrollIndicator={false}
>
{TBAS.map((item, index) => (
<Pressable key={item.index} onPress={() => setSelect(item.index)}>
<Animated.View
style={[
styles.tab,
index > 0 && styles.margin12,
select === item.index && styles.activeTab,
]}
>
<Animated.Text
style={[
styles.text,
select === item.index && styles.activeText,
]}
>
{item.name}
</Animated.Text>
</Animated.View>

))}
</Animated.ScrollView>
</Animated.View>
<Animated.View>
{data.map((item) => (

121xxx2

))}
</Animated.View>
</Animated.ScrollView>

);
}

const styles = StyleSheet.create({
headerImage: {
height: 300,
position: "absolute",
top: 0,
width: "100%",
},
topContainer: {
padding: 28,
height: 94,
backgroundColor: "#29BEA1",
borderRadius: 8,
},

contentContainer: {
flexGrow: 1,
paddingLeft: 12,
paddingRight: 12,
},
margin12: {
marginLeft: 12,
},
scroll: {
flex: 1,
width: "100%",
},
tab: {
borderWidth: 1,
height: 28,
alignItems: "center",
justifyContent: "center",
textAlign: "center",
paddingLeft: 12,
paddingRight: 12,
borderColor: "#c9cdd499",
borderRadius: 14,
},
text: {
color: "#909399",
},
activeText: {
color: "#16B998",
},
activeTab: {
borderColor: "#16B998",
textAlign: "center",
},
item: {
backgroundColor: "#FFFFFF",
borderRadius: 8,
paddingTop: 16,
paddingBottom: 16,
paddingLeft: 16,
marginTop: 10,
paddingRight: 16,
},
});

[MatiPl01]

Hey!

Issue description

I looked into the react-native source code and the problem is caused by the fact that react-native clones the child, which is used as a sticky-header in the default sticky header implementation (see this line of code). It looks that after cloning, the Animated.View no longer works and it works like a plain react-native View component. Because this view is no longer Animated.View, the animated style that you correctly passed to the Animated.View is now passed to it's non-animated clone (plain View), which results in the error that you can see.

Proposed solution

Solution 1 (easiest)

In order to make it work, you can just wrap your Animated.View with the plain View component, like this:

<Animated.ScrollView
  ref={animatedRef}
  style={styles.scroll}
  contentContainerStyle={styles.contentContainer}
  stickyHeaderIndices={[1]} // <- you select the child at index 1 as a sticky header
>
  <View style={styles.topContainer}></View>
  <View> // <- you need to wrap this child with a plain View to prevent cloning of Animated.View
    <Animated.View style={tabStyle}></Animated.View>
  </View>
</Animated.ScrollView>

In short, all components at indexes listed in the stickyHeaderIndices array should not be passed animated styles.

Solution 2

You can write your custom StickyHeaderComponent that uses the Animated.View and applies styles to this component but it might be a bit complex.