Layout issues in RN 0.74.2

[udeyrishi]

Describe the bug

I'm noticing that the Carousel component is reporting its runtime height as 0 when using RN 0.74.2. When running in RN 0.73.6, the runtime height is being correctly computed as the actual height of the items rendered inside. This is causing any siblings rendered below the Carousel to overlap the carousel.

To Reproduce

I've created this barebones Expo Go repo that reproduces the issue: https://github.com/udeyrishi/carousel-bug-repro.

• Checkout the tag rn-73 and run the app via npm run ios. This is running the sample in RN 0.73.6. See the barebones HomeScreen component entrypoint showing a Text rendered below the Carousel (as expected). Also notice the measured height logged in the console.
• Now checkout the tag rn-74. It's the same application code, except that Expo version is upgraded to 51 (and with it RN to 0.74.2, and some other expo recommended upgrades). This time, the Text will overlap the Carousel, and measured height is logged as 0.
  • Make sure to re-install the dependencies with npm install and install the recommended Expo Go version when running npm run ios.

Expected behavior

The layout behaviour in RN 74 should be identical to RN 73.

Screenshots

In RN 0.73.6	In RN 0.74.2

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.74.3
• react-native-reanimated: v3.10.1
• react-native-reanimated-carousel: v3.5.1
• react-native-gesture-handler: v2.16.2

Smartphone (please complete the following information):

• Device: iPhone SE 3 simulator
• OS: iOS 17.5

[dosubot[bot]]

Hey @udeyrishi! 👋 I'm here to help you with any bugs, questions, or contributions while you wait for a human maintainer. Let's squash those bugs together!

To resolve the layout issue with the Carousel component in React Native 0.74.2, where it reports its runtime height as 0, you can explicitly set the height of the Carousel component using the height prop. This ensures that the component has a defined height and prevents sibling components from overlapping.

Here's an example of how you can modify the Carousel component usage to include the height prop:

import React from "react";
import { SafeAreaView, Text, useColorScheme, Dimensions, View } from "react-native";
import Carousel from "react-native-reanimated-carousel";

import { Colors } from "react-native/Libraries/NewAppScreen";

const { width: PAGE_WIDTH } = Dimensions.get("window");
const App = () => {
  const isDarkMode = useColorScheme() === "dark";

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={[backgroundStyle, { alignItems: "center", justifyContent: "center", flex: 1 }]}>
      <Carousel
        loop
        width={PAGE_WIDTH}
        height={PAGE_WIDTH / 2} // Set the desired height here
        data={[...new Array(6).keys()]}
        renderItem={({ index }) => (
          <View key={index} style={{ alignItems: "center", justifyContent: "center", flex: 1 }}>
            <Text>Hello</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default App;

By explicitly setting the height prop, you ensure that the Carousel component has a defined height, which should resolve the layout issue ^[1][2].

To continue talking to Dosu, mention @dosu.

[udeyrishi]

^ This gen AI seems to be hallucinating. In the linked sample example, I'm setting the Carousel's height explicitly, and I'm still seeing the issue.

[liy010]

You can embed a View around the Carousel component and adjust its height, but the height setting in baseOptions appears to have no effect.

[jadbarakat]

Same issue here. @liy010's suggestion worked for me.

[MedeaMelana]

646 describes the same issue and workaround, and has an associated PR to fix it.