The carousel is not working in web, it is not being rendered

[DakshAg62]

The carousel is working fine on both ios and android but it is now working on Web, Here is the code:
import React, { useState, useRef, useCallback, useEffect } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Linking,
} from 'react-native';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import Carousel from 'react-native-reanimated-carousel';
import { useDispatch, useSelector } from 'react-redux';
import ProgressCircle from 'react-native-progress-circle';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
import FastImageView from '../FastImageView';
import { getScreenWidth } from '../../utils/LayoutUtility';
import {
fetchSelfieHistroyAttributes,
saveSelfieData,
} from '../../actions/SkinSelfieAnalysisActions';
import Utility from '../../utils/Utility';
import { PERMISSION_STORE } from '../../config/Constants';
import { SCREEN_CONSTANTS } from '../../config/ScreenConstants';
import { isBlank, isPresent } from '../../utils/BooleanUtility';
import images from '../../theme/Images';
import { extractDate } from '../../utils/DateAndTimeUtility';

const HistoryComponent = () => {
const navigation = useNavigation();
const [currentIndex, setCurrentIndex] = useState(0);
const carouselRef = useRef(null);
const dispatch = useDispatch();
const [carouselData, setCarouselData] = useState([]);
const [showShimmer, setShowShimmer] = useState(true);
const userSelfieData = useSelector(
(state) => state.UserAccountInfo.selfieAnalysis,
);
console.log('-history component', carouselData);
const handleClickOnSelfie = (index) => {
navigation.navigate(SCREEN_CONSTANTS.PAST_SKIN_ANALYSIS, { index });
};

const handleFetchResult = () => {
const params = { startDate: '', endDate: '', has_orbo_content: false };
dispatch(
fetchSelfieHistroyAttributes(params, (success, response) => {
if (success) {
const extractedData = response.objects.map((item) => ({
created_at: item.data.attributes.created_at,
skin_score: item.data.attributes.skin_score,
image: item.data.attributes.image,
}));
const UploadNewSelfieData = {
title: 'uploadNewSelfie',
};
if (isPresent(extractedData)) {
setCarouselData([UploadNewSelfieData, ...extractedData]);
}
} else {
console.error('API Error');
}
}),
);
};

const navigateToSelfie = () => {
dispatch(saveSelfieData({ uploadedSelfieStatus: '' }));
Utility.checkPermissionStatic(
PERMISSION_STORE.camera,
true,
(permissionStatus) => {
if (
permissionStatus === 'granted' ||
permissionStatus === 'authorized'
) {
navigation.navigate('TakeSkinSelfie', {
previousScreen: 'ForYou',
});
} else if (
permissionStatus === 'never_ask_again' ||
permissionStatus === 'denied'
) {
Linking.openSettings();
}
},
);
};

const UploadNewSelfie = (props) => {
const { styling } = props;
return (
<TouchableOpacity
style={[
styles.image,
{
backgroundColor: 'lightgrey',
justifyContent: 'center',
alignItems: 'center',
},
styling,
]}
onPress={navigateToSelfie}
>


);
};

const getColorForOverAllScore = (score) => {
if (score <= 40) {
return '#ff7171';
} else if (score <= 70) {
return '#ffc800';
} else {
return '#99c66c';
}
};

useFocusEffect(
useCallback(() => {
handleFetchResult();
}, [userSelfieData]),
);

useEffect(() => {
const timer = setTimeout(() => {
setShowShimmer(false);
}, 5000);
return () => clearTimeout(timer);
}, []);

if (isBlank(carouselData)) {
if (!showShimmer) return null;
const shimmerStyles = [
{ style: styles.shimmerLeftOuter },
{ style: styles.shimmerLeftSmall },
{ style: styles.shimmerCenterLarge },
{ style: styles.shimmerRightSmall },
{ style: styles.shimmerRightOuter },
];
const shimmerColors = ['#E0E0E0', '#F5F5F5', '#E0E0E0'];
return (

{shimmerStyles.map((item, index) => (

))}

);
}

const renderCarouselItem = ({ item, index }) => {
const distanceFromCenter = Math.abs(index - currentIndex);
const isCentered = index === currentIndex;
const scale = isCentered
? 1.2
: Math.max(1.3 - distanceFromCenter * 0.2, 0.7);
const itemStyle = { transform: [{ scale }] };

if (item?.title === 'uploadNewSelfie') {
  return <UploadNewSelfie styling={itemStyle} />;
}

return (
  <TouchableOpacity
    style={[{ alignItems: 'center' }, itemStyle]}
    onPress={() => handleClickOnSelfie(index - 1)}
  >
    <View key={index}>
      <FastImageView
        source={{ uri: item.image }}
        style={styles.image}
        resizeMode='cover'
      />
    </View>
    <View style={styles.scoreContainer}>
      <Text style={styles.carouselDateText}>
        {extractDate(item.created_at)}
      </Text>
      <View style={styles.overAllSkinScore}>
        <ProgressCircle
          percent={item?.skin_score}
          radius={20}
          borderWidth={3}
          color={getColorForOverAllScore(item?.skin_score)}
          shadowColor='#fff'
          bgColor='#fff'
        >
          <Text style={styles.headingText}>{item?.skin_score}%</Text>
        </ProgressCircle>
      </View>
    </View>
  </TouchableOpacity>
);

};

return (
<>


<Carousel
ref={carouselRef}
loop={false}
width={getScreenWidth() / 2}
height={getScreenWidth() / 1.5}
sliderWidth={50}
itemWidth={50}
data={carouselData}
scrollAnimationDuration={100}
mode='parallax'
pagingEnabled
onSnapToItem={(index) => setCurrentIndex(index)}
defaultIndex={0}
currentIndex={currentIndex}
renderItem={renderCarouselItem}
style={styles.carousel}
/>


</>
);
};

const styles = StyleSheet.create({
home: {
width: getScreenWidth(),
alignItems: 'center',
alignSelf: 'center',
marginTop: 22,
},
title: {
fontSize: 18,
fontWeight: 'bold',
color: 'black',
},
subTitle: {
fontWeight: '400',
fontSize: 14,
color: 'black',
},
container: {
height: 300,
width: getScreenWidth(),
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
marginTop: -24,
},
image: {
width: 200,
height: 200,
borderRadius: 100,
borderWidth: 5,
borderColor: '#FFFFFF',
zIndex: -100,
},
carousel: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 10,
width: getScreenWidth(),
},
carouselDateText: {
fontFamily: 'Roboto-Regular',
color: '#000000',
fontWeight: '400',
},
carouselScoreText: {
fontFamily: 'Roboto-Regular',
color: '#000000',
fontWeight: '700',
},
leftArrow: {
position: 'absolute',
top: '50%',
transform: [{ translateY: -15 }],
zIndex: 1,
left: 0,
justifyContent: 'center',
alignItems: 'center',
},
rightArrow: {
position: 'absolute',
top: '50%',
transform: [{ translateY: -15 }],
zIndex: 1,
right: 0,
justifyContent: 'center',
alignItems: 'center',
},
arrowImage: {
width: 30,
height: 30,
},
overAllSkinScore: {
width: 36,
height: 36,
borderRadius: 20,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
marginLeft: 6,
marginTop: 6,
},
headingText: {
fontFamily: 'Roboto',
fontSize: 15,
fontWeight: '700',
color: '#000000',
},
shimmerContainer: {
flexDirection: 'row',
alignSelf: 'center',
marginTop: 8,
},
shimmerLeftSmall: {
width: 130,
height: 130,
borderRadius: 100,
alignSelf: 'center',
marginRight: -60,
},
shimmerCenterLarge: {
width: 180,
height: 180,
borderRadius: 100,
alignSelf: 'center',
zIndex: 1,
},
shimmerRightSmall: {
width: 130,
height: 130,
borderRadius: 100,
alignSelf: 'center',
marginLeft: -60,
},
shimmerLeftOuter: {
width: 110,
height: 110,
borderRadius: 100,
alignSelf: 'center',
marginRight: -60,
},
shimmerRightOuter: {
width: 110,
height: 110,
borderRadius: 100,
alignSelf: 'center',
marginLeft: -60,
zIndex: -1,
},
imageStyle: {
width: 20,
height: 20,
},
scoreContainer: {
flexDirection: 'row',
alignItems: 'center',
},
});

export default HistoryComponent;

[dosubot]

Hey there, @DakshAg62! I'm here to help you out with any bugs, questions, or contributions you have. Let's dive in and tackle this together!

There are a few similar threads regarding issues with the carousel not rendering on the web. Here are some solutions that have been suggested:

1. Update Babel Configuration: Add the @babel/plugin-transform-export-namespace-from plugin to your Babel configuration file (e.g., .babelrc or babel.config.js):

   [
     '@babel/plugin-transform-export-namespace-from',
     'react-native-reanimated/plugin',
   ],

2. Update Webpack Configuration: Add 'react-native' to the compileNodeModules array in your Webpack configuration:

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

These changes have helped resolve similar issues for other users ^[1].

Additionally, ensure that you are using a compatible version of react-native-reanimated-carousel. Upgrading to version 4.0.0-canary.23 or later might resolve compatibility issues with web browsers ^[2].

To continue talking to Dosu, mention @dosu.

---

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

[DakshAg62]

I have added these things in my config-override.js like this:
...addBabelPlugins('react-native-reanimated/plugin'),
...addBabelPlugins('@babel/plugin-transform-export-namespace-from'), But still it is not working. I will try upgrading the version

[yurso666]

I encountered a similar problem, it works well on mobile, but for web, it will stuck when trying to scroll the carousel manually. I have tried the example app, it doesn't work on the web either.

[dosubot]

Hi, @DakshAg62. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• The carousel component fails to render on the web, but works on iOS and Android.
• You have tried updating Babel and Webpack configurations without success.
• You plan to upgrade the library version as a potential fix.
• Another user, yurso666, confirms experiencing a similar issue, suggesting a broader web compatibility problem.

Next Steps:

• Please let us know if this issue is still relevant to the latest version of the react-native-reanimated-carousel repository by commenting here.
• If there is no further activity, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!