react-native-snap-carousel
react-native-snap-carousel copied to clipboard
if use the carousel inside react-native-modals the sliding is not working on IOS only
I had slider inside the modal, on ios I can't slide the images it is stuck on IOS but working fine on android
my code
import { Modal, SlideAnimation } from 'react-native-modals';
import Carousel, { Pagination } from 'react-native-snap-carousel';
return (
<View>
<Modal
visible={this.props.productModal}
modalAnimation={new SlideAnimation({
slideFrom: 'left',
})}
onTouchOutside={this.props.closeModel}
transparent={true}
style={{
backgroundColor: 'rgba(0, 0, 0, 0.69)',
justifyContent: 'center'
}}
width={0.9}
>
<View style={styles.modalContainer}>
<TouchableOpacity style={{ marginTop: 10, alignItems: 'center' }}
onPress={this.props.showGallery}
>
<Carousel
ref={this.props.isCarousel}
data={this.props.showProductImages}
renderItem={CarouselCardItem}
sliderWidth={SLIDER_WIDTH}
itemWidth={ITEM_WIDTH}
onSnapToItem={(index) => this.props.setIndex(index)}
useScrollView={true}
removeClippedSubviews={false}
loop={true}
contentContainerCustomStyle={{ alignItems: 'center' }}
scrollEnabled={true}
activeSlideAlignment="center"
autoplay={true}
loopClonesPerSide={3}
slideStyle={{borderRadius: 20, overflow: 'hidden'}}
/>
<Pagination
dotsLength={this.props.showProductImages.length}
activeDotIndex={this.props.index}
carouselRef={this.props.isCarousel}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 0,
backgroundColor: '#345DFF'
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
</TouchableOpacity>
</View>
</Modal>
</View>
);
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.64.3",
"react-native-modals": "^0.22.3",
"react-native-snap-carousel": "^3.9.1",
any update on this?