After I upgraded to Expo 52 the react-native-reanimated is printing me error and crashing.
This is the full error code
(NOBRIDGE) WARN [Reanimated] Reading from
valueduring component render. Please ensure that you do not access thevalueproperty or usegetmethod of a shared value while React is rendering a component.
This is my package.json
"dependencies": {
"@expo/vector-icons": "^14.0.4",
"@gorhom/bottom-sheet": "^5.0.5",
"@ptomasroos/react-native-multi-slider": "^2.2.2",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/elements": "^1.3.31",
"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",
"@reduxjs/toolkit": "^2.2.7",
"axios": "^1.7.4",
"date-fns": "^3.6.0",
"expo": "^52.0.7",
"expo-blur": "~14.0.1",
"expo-file-system": "^18.0.3",
"expo-image-picker": "~16.0.2",
"expo-secure-store": "~14.0.0",
"expo-status-bar": "~2.0.0",
"formik": "^2.4.5",
"jwt-decode": "^4.0.0",
"react": "18.3.1",
"react-native": "0.76.2",
"react-native-dotenv": "^3.4.11",
"react-native-element-dropdown": "^2.10.4",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.20.2",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-paper": "^5.12.5",
"react-native-radio-buttons-group": "^3.0.7",
"react-native-reanimated": "~3.16.1",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-restart": "^0.0.27",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-svg": "15.8.0",
"react-native-vector-icons": "^10.1.0",
"react-redux": "^9.1.2",
"redux": "^5.0.1",
"redux-persist": "^6.0.0",
"typescript": "~5.3.3",
"yup": "^1.3.3",
"react-dom": "18.3.1",
"react-native-web": "~0.19.13",
"@expo/metro-runtime": "~4.0.0"
}
I commented everywhere where I have used react-native-reanimated, and no crash occurred.
This is an example where I have used the library
import Animated, {
Extrapolate,
interpolate,
runOnJS,
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import React from "react";
import { View } from "react-native";
import Animated, {
Extrapolate,
interpolate,
runOnJS,
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import Carousel from "react-native-reanimated-carousel";
import CarCardComponent from "../features/home/components/CarCardComponent";
import { window } from "../features/favourites/constants";
import { primaryColor } from "../types/colors";
const PAGE_WIDTH = window.width;
function CardsCarousel({
vehicles,
navigateToVehicleInformation,
}: {
vehicles: any[];
navigateToVehicleInformation: any;
}) {
const [isVertical] = React.useState(false);
const [autoPlay] = React.useState(false);
const [pagingEnabled] = React.useState(true);
const [snapEnabled] = React.useState(true);
const progressValue = useSharedValue(0);
const baseOptions = isVertical
? {
vertical: true,
width: PAGE_WIDTH,
height: PAGE_WIDTH * 0.8,
}
: {
vertical: false,
width: PAGE_WIDTH,
height: 380,
};
const modeConfig = {
parallaxScrollingScale: 0.9,
parallaxScrollingOffset: isVertical ? 50 : 60,
};
const getPaginationItems = () => {
if (!vehicles || vehicles.length === 0) {
return null;
}
return vehicles.map((_, index) => (
<PaginationItem
backgroundColor={primaryColor}
animValue={progressValue}
index={index}
key={index}
isRotate={isVertical}
length={vehicles.length}
/>
));
};
return (
<View
style={{
alignItems: "center",
marginHorizontal: 10,
}}
>
{vehicles && vehicles.length > 0 && (
<Carousel
{...baseOptions}
style={{ width: PAGE_WIDTH }}
loop
pagingEnabled={pagingEnabled}
snapEnabled={snapEnabled}
autoPlay={autoPlay}
autoPlayInterval={1500}
onProgressChange={(_, absoluteProgress) => {
runOnJS(() => {
progressValue.value = absoluteProgress;
})();
}}
mode="parallax"
modeConfig={modeConfig}
data={vehicles}
renderItem={({ item }) => (
<CarCardComponent
car={item}
navigateToVehicleInformation={navigateToVehicleInformation}
/>
)}
/>
)}
{!!progressValue && vehicles && vehicles.length > 0 && (
<View
style={{
flexDirection: isVertical ? "column" : "row",
alignItems: "center",
marginTop: 10,
}}
>
{getPaginationItems()}
</View>
)}
</View>
);
}
const PaginationItem: React.FC<{
index: number;
backgroundColor: string;
length: number;
animValue: Animated.SharedValue<number>;
isRotate?: boolean;
}> = (props) => {
const { animValue, index, length, backgroundColor, isRotate } = props;
const width = 10;
const animStyle = useAnimatedStyle(() => {
let inputRange = [index - 1, index, index + 1];
let outputRange = [-width, 0, width];
if (index === 0 && animValue?.value > length - 1) {
inputRange = [length - 1, length, length + 1];
outputRange = [-width, 0, width];
}
return {
transform: [
{
translateX: interpolate(
animValue?.value,
inputRange,
outputRange,
Extrapolate.CLAMP
),
},
],
};
}, [animValue, index, length]);
return (
<View
style={{
backgroundColor: "white",
width,
height: width,
borderRadius: 50,
overflow: "hidden",
marginHorizontal: 4,
transform: [
{
rotateZ: isRotate ? "90deg" : "0deg",
},
],
}}
>
<Animated.View
style={[
{
borderRadius: 50,
backgroundColor,
flex: 1,
},
animStyle,
]}
/>
</View>
);
};
export default CardsCarousel;
Before upgrading to Expo 52, everything worked perfectly fine, i also run expo docker to match all dependencies with the SDK version but still no luck.
This is how I fix it:
In package.json change to "react-native-reanimated-carousel": "4.0.0"
rm -rf node_modules
npm i // to install the new version
In node_modules/react-native-reanimated-carousel/src/layouts/parallax.ts
you have to change the zIndex (line 55) constant with:
const zIndex = Math.round(
interpolate(
value,
[-1, 0, 1],
[0, size, 0],
Extrapolation.CLAMP,
)
);
This is a TEMPORARY fix in order to the team fix the code :D hope this help.