React-native-swiper: 1.5.13 Android swiper content no display

[chenfuwei]

Which OS ?

Version

Which versions are you using:

• react-native-swiper v?
• react-native v0.?.?

Expected behaviour

Actual behaviour

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.
-

Steps to reproduce

1.
2.
3.

[ardmn]

same issues

[ardmn]

In my case swipeview not show content if it in scrollview ...

[ardmn]

Or no. If I add swipe into view then swipe not show content:

<View style={{flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}>

[MacKentoch]

same case as @ardmn .

Won't display content on android if Slider inside a ScrollView.

W/ViewPager: Requested offscreen page limit 0 too small; defaulting to 1

[MacKentoch]

I love both iOS and Android. But why the hell do people neglect Android so much?
It seems like some kind arrogance from iOS users...

For my concern I found a reliable fix: I just use a better maintained lib: https://github.com/archriss/react-native-snap-carousel

[timbrandin]

I just noticed I needed to set the width of the Swiper in Android for it to display.

[a3diti]

Fixed it on Android and IOS
At src/index.js comment the parts of curly brackets for the platform if statement
This happens because of the component ViewPagerAndroid which is used only on android, the added comments ensure to use ScrollView for both IOS and Android

[mursang]

@a3diti I did that, but I am getting the error:

_this.scrollVIew[(intermediate value)(intermediate value)(intermediate value)] is not a function

EDIT:
I got it working.
My slide was like this:

<View key={data.id}>
<TouchableOpacity style={{flex: 1}} onPress={()=>{}}>
<Text></Text>
<Image/>
</TouchableOpacity>
</View>

Just removed:
flex:1
on button's style, and got it working.
No need to edit the code as @a3diti did. Hope this helps.

[a3diti]

When using Modal or ScrollViews it does have some issues, so i made a few changes and added a property hasFloatingParent default to false, and i can set it to true when needed
Here are the changes of src/index.js
https://gist.github.com/a3diti/0c3da7e11d099677a6fbe4987f13513c

@mursang When i remove flex:1 does not fix the issue when using ScrollView inside Swiper childs, or when using a Modal as a parent of Swiper.
The problem is simple: Swiper is a blank page when it is inside a Modal

It probably comes from react native component ViewPagerAndroid

[appielife]

Still breaking for me .
If i am using your code it's not rendering images.
Can you check again please. :)
@a3diti

[marcosmartinez7]

I had the same problem in Android and inside a model. The @a3diti workarround solves it.

Is there any advantage in use ViewPagerAndroid insted of a ScrollView in android?

[yaraht17]

I have same problem, and i change ViewPagerAndroid to ScrollView, but a problem ScrollView in Android can't infinity loop. It has stop when i scroll to end of array. I tried fix it in 4 hour but it's impossible.

[bhargav82]

I had to add a delay to get mine to work, but yes it works!

  constructor(props) {
    super(props);
    this.state = { showSwiper: false };
  }

  componentDidMount() {
    // Must use this 100-ms delayed swiper workaround to render on Android properly
    setTimeout(() => {
      this.setState({showSwiper: true});
    }, 100);
  }

  render() {
    var exampleSwiper = (
      <Swiper activeDotColor={'white'} loop={false} >
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
      </Swiper>
    );
    return (
      <Modal presentationStyle={'overFullScreen'}>
        {this.state.showSwiper ? exampleSwiper : null}
      </Modal>
    );
  }

[sumitk]

Comment above 2 lines to get offset working.

[peteroid]

After struggling a day for this issue, found that adding a containerStyle to <Swiper /> fixed it.

<Swiper
  containerStyle={{ alignSelf: 'stretch' }}>
  <View />
</Swiper>

[MewX]

@peteroid 's solution is more elegant than @timbrandin 's, but they all worked for me!

Thank you all!