Unsupported on the Web

[JeongHyeon1997]

Describe the bug
A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

It comes out well on Android, but on react-native-web, the screen comes out, but I can't move it to the next screen.

Other people often can't do it on the web, and I've tried to refer to the examples as much as possible, but it's not working. As it says it supports the web, can you help me solve it?

To Reproduce
Steps to reproduce the behavior:

�yarn run start
yarn run web

`
import {renderItem} from '../../../utils/render-item.tsx';
import * as React from 'react';
import {View} from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const defaultDataWith6Colors = [
'#B0604D',
'#899F9C',
'#B3C680',
'#5C6265',
'#F5D399',
'#F1F1F1',
];

export const Banner = () => {
return (

<Carousel
loop={true}
width={385}
height={258}
snapEnabled={true}
pagingEnabled={true}
autoPlayInterval={2000}
data={defaultDataWith6Colors}
style={{width: '100%'}}
onSnapToItem={index => console.log('current index:', index)}
autoPlay={true}
renderItem={renderItem({rounded: true, style: {marginRight: 8}})}
vertical={false}
/>

);
};

// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
entry: path.join(__dirname, 'index.web.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
extensions: ['.web.js', '.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'react-native$': 'react-native-web',
'@react-native-gesture-handler': 'react-native-gesture-handler',
},
fallback: {
process: require.resolve('process/browser'),
},
},
module: {
rules: [
{
test: /.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.svg$/,
use: ['@svgr/webpack'],
},
{
test: /.(png|jpe?g|gif|webp)$/,
type: 'asset/resource',
},
],
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html',
}),
new webpack.DefinePlugin({
DEV: JSON.stringify(process.env.NODE_ENV !== 'production'),
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 3000,
hot: true,
},
};
`

// babel.config.js module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript', 'module:metro-react-native-babel-preset', ], plugins: [ '@babel/plugin-transform-export-namespace-from', 'react-native-reanimated/plugin', ], };

Versions (please complete the following information):

react: v18.3.1
react-native: v0.76.1
react-native-reanimated: v3.16.7
react-native-reanimated-carousel: ^3.5.1
react-native-gesture-handler: ^2.22.0

[dosubot]

@JeongHyeon1997 Greetings! 👋 I'm here to assist you with any bugs, questions, or contributions. Let's squash those bugs together!

There are similar threads that might help you resolve the issue with react-native-reanimated-carousel on the web:

1. An open issue suggests updating the Babel configuration by adding the @babel/plugin-transform-export-namespace-from plugin, which you have already done. Additionally, it recommends updating the Webpack configuration by adding 'react-native' to the compileNodeModules array. This might be worth trying if you haven't already:

   const compileNodeModules = [
     'react-native',
   ].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

   You can find more details in the open issue ^[1].

2. A closed issue was resolved by upgrading react-native-reanimated-carousel to ^4.0.0-alpha.0. Given your current version is ^3.5.1, you might consider upgrading to see if it resolves the problem. More information is available in the closed issue ^[2].

These solutions have helped others with similar issues, so they might be worth trying in your case.

To continue talking to Dosu, mention @dosu.

---

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

[JeongHyeon1997]

As I changed the "react-native-reanimated-carousel" version from 3.5.1 to 4.0.0, the app also experiences an error.

(NOBRIDGE) ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function computedOffsetXValueWithAutoFillData on the UI thread.
See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-synchronously-call-a-non-worklet-function-on-the-ui-thread for more details., js engine: reanimated