react-native-swiper
react-native-swiper copied to clipboard
leecade
swiper image not showing
Swiper image not showing, only can see the dot changing the position. Saw this https://github.com/leecade/react-native-swiper/issues/416 but i added removeClippedSubviews={false} also have same issue. Every time i have to delete <swiper/> and save and reload and paste back it only show up. I try to export as apk also have same issue. Any idea to fix this ?
<View style={styles.container}>
<ScrollView>
<Swiper height={Dimensions.get('window').width / 1.3} showsButtons={false} removeClippedSubviews={false} autoplay={true} autoplayTimeout={3} autoplayDirection={true}
dot={<Swiperdot/>} activeDot={<Swiperactivedot/>} paginationStyle={{bottom: 10}}>
<SwiperImgItem pathuri={this.state.path1}/>
<SwiperImgItem pathuri={this.state.path2}/>
<SwiperImgItem pathuri={this.state.path3}/>
</Swiper>
</ScrollView>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#000000'
},
});
@arribbar @cyperus @koansang guys, I have solution, I try using setTimeout to delay some time for swiper render. This worked for me, hope u guys also.
constructor(props) {
super(props);
this.state = {
startswiper:false,
};
}
componentWillMount(){
setTimeout(() => {this.setState({startswiper:true})}, 500);
}
_renderSwiper(){
return(
<Swiper height={300} showsButtons={false} removeClippedSubviews={false} autoplay={true} autoplayTimeout={3} autoplayDirection={true}
dot={<Swiperdot/>} activeDot={<Swiperactivedot/>} paginationStyle={{bottom: 10}}>
<SwiperImgItem />
<SwiperImgItem />
<SwiperImgItem />
</Swiper>
);
}
render() {
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
{
this.state.startswiper === true ?
this._renderSwiper()
: null
}
</View>
);
}
It worked for me changing width from 99% to 100%, for both iOS and Android
constructor(props) {
super(props);
this.state = {
width: '99%',
};
}
componentWillMount() {
setTimeout(() => {
this.setState({
width: '100%'
});
}, 500);
}
render() {
console.log(' about to render swiper');
const slides = this.props.dataList.map(this.renderView.bind(this));
return (
<Swiper
width={this.state.width}
dotColor={LIGHT_GREY_3}
activeDotColor={YELLOW}
containerStyle={this.props.style}
style={styles.scrollStyle}
>
{ slides }
</Swiper>
);
}
+1, same issue here. It only repros in Android, iOS works fine for me. Sometimes the contents render, sometimes they don't. When they don't render, the inspector show that the children of Swiper are empty.
This is a sad, sad hack, but adding this to a parent of Swiper fixes the issue for me:
componentDidMount() {
this.forceUpdate()
}
Hopefully this gives a clue as to the proper solution, I really can't find a library I'd like to use as an alternative to this.
Update: The above hack made it happen less frequently, but it was still flaky at a lower rate. So I ended up switching to https://github.com/archriss/react-native-snap-carousel (which works great).
I'm experiencing this issue on Android as well. Sometimes the images won't show at all and sometimes it only renders the first 3 images (loadMinimalSize = 2). I these cases the pagination doesn't update properly either.. Can we give this problem some priority as a lot of people seem to have issues on Android devices?
having the same here on android with all latest versions, needed the trick of @arribbar , but it shows double slides now ...
@JayricMok's solution fixed my problem
In my case, you also need to set height property for Swiper if you run on iOS
I added swiper in my project,sometimes it was wrong.Specifically,it didn't work.The fact is images and dots all missing.Why?
I use blow code resolve this problem,but why?
componentDidMount(){
//to fix react-native-swiper in android bug
if (Platform.OS === 'android') {
setTimeout(() => {
this.setState({ visiableSwiper: true })
}, 0)
}
}
{this.state.visiableSwiper&&<Swiper/>}
Guys, sometimes when the parent View has a flex-direction or align-items then it does not render correctly. Try to remove those flex properties from the parent and see if it renders correctly.
Solution
the problem is by the height in Swiper
- 1)import Dimensions of react-native and get dimensions
import {Dimensions} from 'react-native';
let ScreenHeight = Dimensions.get("window").height;
- 2)use dimensions
<View style={{height: ScreenHeight}}>
<Swiper showsButtons={true}>
<View style={styles.slideDefault}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
</Swiper>
</View>
- style
const styles = StyleSheet.create({
slideDefault: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
}
});
- All code
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
let ScreenHeight = Dimensions.get("window").height;
export default class App extends Component {
constructor() {
super();
this.state = {
auterScrollEnable: true,
}
}
render() {
return (
<View style={{height: ScreenHeight}}>
<Swiper showsButtons={true}>
<View style={styles.slideDefault}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
</Swiper>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
slideDefault: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
text: {
color: 'white',
fontSize: 30,
fontWeight: 'bold',
}
});
@aesyungan it does the trick but it's still not good enough... Once you have a component that needs to scroll, the screen height cut the view and it messes up with the scrolling.
<Swiper
autoplay
autoplayTimeout={5}
height={240}
showsButtons={false}
showsPagination={true}
loop={true}
backgroundColor='transparent'
activeDotColor='black'
// dotColor='white'
>
{
this.props.data.banner.map((item,i)=>{
console.log("the image url is"+item.BannerUrl);
<View>
<Image style={{flex:1,width,resizeMode:'contain'}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}/>
</View>
})
}
</Swiper>
I have to display item.BannerUrl in Image component.The url is passing required times to item.BannerUrl.But i am not getting the images.It shows only 7dots.Please anyone tell me what is the problem here?
I tried following and worked for me, hope it helps you:
<Swiper
showsPagination={true}
autoplay={true}
width={width-20}
loop={true}
backgroundColor='#00FF00'
showsButtons={false}
dot={ <View style={styles.swiperDot} /> }
activeDot={ <View style={styles.swiperActiveDot} /> }
></Swiper>
I have wrapped swiper in a view tag.
I experienced a problem on iOS with RN 0.55.3. Using <Swiper> with images, only 2 first items are shown, the third one is blank.
Does anyone else have the same problem?
UPDATE: it turns out that my styles is not good enough. I use the styles provided on the example "Swiper Number" and it works properly now.
I don't know if this issue has something to do with the "resizeMode" of <Image/> component.
In my situation. when resizeMode="stretch", like below
<Swiper style={{flex: 1}} >
{
wallpapers.map((imgsrc, index) => (
<TouchableWithoutFeedback
key={index}
style={{flex: 1}}
>
<Image source={imgsrc} style={styles.image} resizeMode="stretch"/>
</TouchableWithoutFeedback>
))
}
</Swiper>
one of images will not show up, only one of them.
But, every thing woks fine if you change the props to resizeMode="cover".
For me, in Android is fine, but in IOS only show the first image.
I checked my codes, i write height={h} like this, but i write width in style,
<Swiper height={h} style={{width:w}} >
then i write width like height ,
<Swiper height={h} width={w} >
it's ok for me in ios.
