I am trying to build horizontal slider with images as slides using react-native-snap-carousel. When pressing on an image it should expand to fullscreen and then navigate to another page (i am animating it's width, height and translating it using reanimated 2).The issue is that on Android, when pressing the image, it won't expand out of the carousel's slides container ( it scales and translates right, but it's only inside the sliders container). Mentioning that it works ok on iOS.
Does anybody have a clue why is this working ok on iOS but not on Android?
Thanks
this is the carousel and the CarouselImage:
<Carousel<string> ref={carouselRef} containerCustomStyle={[{ overflow: 'visible', height: imageHeight }, containerStyle]} contentContainerCustomStyle={{ overflow: 'visible' }} data={images} loop={circular} useScrollView={true} renderItem={({ item, index }) => (<CarouselImage item={item} index={index} imageWidth={imageWidth} imageHeight={imageHeight} activeIndex={activeIndex} style={imageStyle} icon={icon} carouselRef={carouselRef} images={images} progress={progress} /> )} slideInterpolatedStyle={stackAnimatedStyles} scrollInterpolator={scrollInterpolator} inactiveSlideScale={1} sliderWidth={sliderWidth} itemHeight={imageHeight} itemWidth={imageWidth + imageMargin} onSnapToItem={(index: number) => { setActiveIndex(index); }} activeSlideAlignment={activeSlideAlignment} /><Pressable onPress={handleScaleIn} disabled={!!icon}><Animated.Image source={{ uri: item }} style={[animatedStyle, style]} ref={imageRef} /> {!!icon && (<Animated.View style={iconAnimatedStyle}><Pressable onPress={handleScaleIn} style={[ styles.pressableIcon, { left: imageWidth - branding.padding.padding_32 } ]}> {icon}</Pressable></Animated.View> )}</Pressable>
also around the carousel i am using a wrapper around the carousel:
<View style={{ backgroundColor, zIndex: 1, overflow: 'visible' }}>