Expo crashing when running the code in the usage section

[qwertynik]

Describe the bug
Expo app crashes within a few seconds when started inside an iOS simulator

To Reproduce
Steps to reproduce the behavior:
Run this below piece of code:

`
import * as React from "react";
import { Dimensions, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, {
ICarouselInstance,
Pagination,
} from "react-native-reanimated-carousel";

const data = [...new Array(6).keys()];
const width = Dimensions.get("window").width;

function App() {
const ref = React.useRef(null);
const progress = useSharedValue(0);

const onPressPagination = (index: number) => {
ref.current?.scrollTo({
/**
* Calculate the difference between the current index and the target index
* to ensure that the carousel scrolls to the nearest index
*/
count: index - progress.value,
animated: true,
});
};

return (
<View style={{ flex: 1 }}>
<Carousel
ref={ref}
width={width}
height={width / 2}
data={data}
onProgressChange={progress}
renderItem={({ index }) => (
<View
style={{
flex: 1,
borderWidth: 1,
justifyContent: "center",
}}
>
<Text style={{ textAlign: "center", fontSize: 30 }}>{index}

)}
/>

  <Pagination.Basic
    progress={progress}
    data={data}
    dotStyle={{ backgroundColor: "rgba(0,0,0,0.2)", borderRadius: 50 }}
    containerStyle={{ gap: 5, marginTop: 10 }}
    onPress={onPressPagination}
  />
</View>

);
}

export default App;
`

It is available at this link

Expected behavior
A carousel as shown in the documentation site should come.

Versions (please complete the following information):

• react: v18.3.1
• react-native: v0.76.6
• react-native-reanimated: v3.16.1
• react-native-reanimated-carousel: v3.5.1
• react-native-gesture-handler: v2.20.2

Smartphone (please complete the following information):

• Device: iPhone 16 simulator
• OS: iOS 18.1

Additional context
When the same code is run on android, the following error is shown:

Warning from logs:
(NOBRIDGE) WARN [Reanimated] Reading from value during component render. Please ensure that you do not access the value property or use get method of a shared value while React is rendering a component.

[dosubot]

Hey @qwertynik! I'm here to help you with any bugs, questions, or contributions you have. Let's squash those bugs together! 🤖

The issue you're experiencing with the Expo app crashing on an iOS simulator and showing an error related to the Reanimated library on an Android emulator might be due to a precision error in the React Native Reanimated Carousel. This is a known issue that occurs when starting to drag the carousel, especially when using the 'mode' property.

To resolve this, you can modify the zIndex calculation in the node_modules/react-native-reanimated-carousel/src/layouts/parallax.ts (or stack.ts if using stack mode) by adding Math.round() to the calculation:

const zIndex = Math.round(interpolate(value, [-1, 0, 1], [0, size, 0]));

This fix addresses the precision error and prevents the crash on both iOS and Android platforms. Additionally, ensure that your environment is up to date with versions like react-native-reanimated-carousel 4.0.0-canary.22 and react-native-reanimated 3.16.1, as these versions are known to have this issue ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[qwertynik]

This line was present
const zIndex = interpolate( value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP, );
Added, Math.round and changed it to:
const zIndex = Math.round(interpolate( value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP, ));
Expo continues to crash. Any ideas on what needs to be done here? Should I disable the new architecture?

[dosubot]

If adding Math.round() to the zIndex calculation didn't resolve the issue, you might want to consider disabling the new architecture in React Native as a potential workaround. However, I don't have specific steps for disabling the new architecture in React Native when using Expo.

Additionally, ensure that all dependencies are correctly installed and configured, especially react-native-reanimated and react-native-gesture-handler. Double-check that your Expo environment is compatible with the versions of the libraries you are using. If the issue persists, you might want to try updating to the latest versions of the libraries, as newer versions might have addressed this issue.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[qwertynik]

I can confirm that using the 4.0.0.canary release fixed the issue as suggested in #715