SSR (server side rendering)?

[cglacet]

I have a react-native app that I'm porting to the web and I would like the content of the Carousel to be rendered on the server (SSR). For now it seems like the renderItem function is not called at all (and the HTML rendered is therefore empty).

I'm using react-native-web (and Solito for the navigation part).

Note that I installed reanimated using this strategy Solito / Next.js Compatibility.

Any idea how I can achieve this?

[dosubot[bot]]

🤖

Hey @cglacet! Great to see you diving into new adventures with the carousel 🎢

Unfortunately, server-side rendering (SSR) is not supported in React Native or its libraries such as react-native-reanimated-carousel. React Native is a framework for building native mobile apps, and it doesn't have the concept of a "server" in the same way that a web application does.

The react-native-reanimated-carousel library, which your code is using, is designed for creating smooth and powerful animations in React Native. This library relies on the native capabilities of the mobile device to perform its animations, and as such, it is not designed to work with server-side rendering.

When porting your React Native app to the web using react-native-web, it's important to note that not all React Native libraries will work out of the box with react-native-web. Some libraries may require additional configuration or may not be compatible at all.

In the case of react-native-reanimated-carousel, it seems like the renderItem function is not being called because the library is not compatible with server-side rendering. You may need to find a different solution for creating a carousel in your web app, such as using a web-specific carousel library.

I hope this information helps. If you have any other questions or need further clarification, feel free to ask.

Sources

• src/components/ItemRenderer.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[cglacet]

I tested the base example in reanimated and it seems to render properly on the server.

[cglacet]

I was mistaking, renderItem is called. On the other hand, it doesn't render anything, for example :

export function NumberCarousel() {
    return (
        <Carousel
            data={[1, 2, 3, 4]}
            renderItem={({item}) => {
                console.log('Carousel item', item);
                return <NumberItem v={item} />;
            }}
            width={100}
            height={100}
        />
    );
}


function NumberItem({v}: {v: number}) {
    console.log('Render number item', v);
    return <Text>Item: {v}</Text>;
}

This will print:

Carousel item 1
Carousel item 2
Carousel item 3
Carousel item 4

Instead of:

Carousel item 1
Render number item 1
Carousel item 2
Render number item 2
Carousel item 3
Render number item 3
Carousel item 4
Render number item 4

This obviously give the second output on the client side.