New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Swiper Image Disappears on IOS when Icon Pressed #836
Comments
+1 I have this bug as well. Bizarre. |
Can't seem to find any workarounds for it. Please resolve ASAP. |
Just a heads up to anyone else with this problem, we made the ultimate decision that The ONLY drawback is that you need to specify the exact width of the screen or container, but if that's not a deal breaker - checkout an example of how the above application would work: import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import SnapCarousel from 'react-native-snap-carousel';
export default class ImageSwiper extends Component {
constructor(props) {
super(props);
this.screenWidth = Dimensions.get('window').width;
this.state = {
imageUrls: ['http://img1.png', 'http://img2.png', 'http://img3.png'],
currentSlideIndex: 0,
};
this._updateCurrentSlideIndex = this._updateCurrentSlideIndex.bind(this);
}
// Should be a static function since we don't use `this` inside.
static renderSlide(imageUrl) {
return <Image source={{ uri: imageUrl }} width={this.screenWidth} height={250} />;
}
_updateCurrentSlideIndex(i) {
this.setState({ currentSlideIndex: i });
}
render() {
return (
<View style={s.container}>
{/* Slider */}
<SnapCarousel
data={this.state.imageUrls}
renderItem={ImageSwiper.renderSlide}
layout="default"
sliderWidth={this.screenWidth} // cannot be a percentage
itemWidth={this.screenWidth} // cannot be a percentage
inactiveSlideScale={1} // neutralise carousel effect
inactiveSlideOpacity={1} // neutralise carousel effect
onSnapToItem={i => this._updateCurrentSlideIndex(i)} // update slide dots
/>
{/* Slide Dots */}
<View style={s.dotsContainer}>
{this.state.imageUrls.map((url, i) => (
<View
key={`dot_${url}`}
style={[
s.dot,
i === this.state.currentSlideIndex ? s.dotCurrent : {},
]}
/>
))}
</View>
</View>
);
}
}
// Styles
const s = StyleSheet.create({
container: {
width: '100%',
},
dotsContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 10,
},
dot: {
width: 8,
height: 8,
borderRadius: 4,
marginRight: 5,
backgroundColor: '#CCCCCC',
},
dotCurrent: {
backgroundColor: '#007AFF',
},
}); Although it needs a little more customisation to get going, Snap Carousel is much better maintained and has documented features that actually work. You also get the major performance boost of a FlatList to render slides - so I hoped this at least helped someone. But yeah, if it's too late to switch packages, hopefully you get a bug fix soon 🤞 |
Which OS ?
IOS
Version
Which versions are you using:
react-native-swiper v?
^1.5.13
react-native v0.?.?
0.53.0
react-native-elements v
^1.0.0-beta5
Expected behaviour
Image Should Not Disappear when heart icon is clicked
Should be able to swipe images
Actual behaviour
View/ Image nested within disappears on clicking heart icon
Can see pagination style (dot). But it does not move on swiping swiper region (when the images disappeared).
My Code
After Clicking on the Heart Icon
The text was updated successfully, but these errors were encountered: