meliorence / meliorence/react-native-snap-carousel

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

Open
#919 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

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",

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file or test is named. Reproduce the provided react-native-modals and react-native-snap-carousel setup on iOS, compare its touch behavior with Android, and identify why the carousel cannot slide inside the modal; done when the images slide correctly on iOS without regressing Android behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.