meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.24k stars 2.26k forks source link

if use the carousel inside react-native-modals the sliding is not working on IOS only #919

Open FatmaMahmoud698 opened 2 years ago

FatmaMahmoud698 commented 2 years ago

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",
Gfr1992 commented 2 months ago

any update on this?