Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Why won't overflow: 'visible' allow image to expand to fullscreen on android react-native?

$
0
0

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'  }}>

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>