Basic example doesn't actually return anything

[Fmstrat]

I'm trying to understand how to use this without Typescript, and the most basic example from the README doesn't actually work. For example, you can see in the link that this shows a blank screen:

import Carousel from "react-native-reanimated-carousel";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Carousel
        width={300}
        height={150}
        data={[1, 2, 3]}
        renderItem={({ item }) => (
          <View>
            <Text>Test - {item}</Text>
          </View>
        )}
      />
    </View>
  );
}

https://codesandbox.io/s/quirky-meadow-e5z4wx?file=/src/App.js

How does one proceed?

[Fatjookie]

Same here with Expo. The library looks absolutely amazing and it is sad I cannot get it to work. After a bunch of reinstalling (mainly, Reanimated). I ended up with:

text strings must be rendered within a text component

item were rendered within a <Text>{ item }</Text> component. I tried modiying everything for several hours yesterday, but couldn't make it work.

Take your time @dohooo and I do not expect anything else, than you keep doing that wonderful work of god you're currently doing.

EDIT: Found the response with the trailing semi-colon at the end. Everything works now.

[CaptainEboy]

@Fatjookie how were you able to implement this in js.

[aprct]

It could be that things are just rendering way off screen.

I was rendering something about 400 units in height, but to vertically center the carousel I had to set the <Carousel>'s height prop to -200 after setting the Carousel's sizing and positioning to take up the whole screen. If I set the height prop to 400, then it just rendered really far above the screen.

I'm not entirely sure that I understand the height prop correctly, so I can't speak to whether this is a bug or if it's working as intended.

[dohooo]

Same here with Expo. The library looks absolutely amazing and it is sad I cannot get it to work. After a bunch of reinstalling (mainly, Reanimated). I ended up with:

text strings must be rendered within a text component

item were rendered within a <Text>{ item }</Text> component. I tried modiying everything for several hours yesterday, but couldn't make it work.

Take your time @dohooo and I do not expect anything else, than you keep doing that wonderful work of god you're currently doing.

EDIT: Found the response with the trailing semi-colon at the end. Everything works now.

Sorry for that, my problem. https://github.com/dohooo/react-native-reanimated-carousel/issues/226#issuecomment-1198035593

[dohooo]

@Fmstrat I haven't tried using RNRC on projects that aren't EXPO hosting, so is it possible that it's your configuration problem? And it is normal for me to use RNRC in JS RN project.

[dohooo]

I'll reopen this issue If you have any other questions.