meliorence / meliorence/react-native-snap-carousel
if use the carousel inside react-native-modals the sliding is not working on IOS only
Open
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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