react-native-swiper: It is not working on android

Which OS ?

Windows

Version

10 Which versions are you using:

react-native-swiper v1.5.13
react-native v0.55

Expected behaviour

Expect to load a sliding carousel on android

Actual behaviour

displays this weird screen screenshot_20180503-142443

How to reproduce it-

import React from "react";
import {
    Dimensions,
    View,
    StyleSheet,
    Text,
    Platform
} from "react-native";
import Swiper from "react-native-swiper";

class Splash extends React.Component {
  render() {
        return (
            <View style={styles.container}>
              <View style={{height: 200,alignItems:'flex-start'}}> 
               <Swiper
                 showsButtons={false}
                 loop={false}
                 >
                <View style={styles.container}>
                  <Text>
                    Fun
                  </Text>
                </View>
                <View style={styles.container}>
                  <Text>
                    play,chat,have fun
                  </Text>
                </View>
              </Swiper>
             </View>
            </View>
        );
    }
}
export default Splash;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Steps to reproduce

Try running on expo

About this issue

Original URL
State: open
Created 6 years ago
Comments: 18

Most upvoted comments

For me it was not working when <Swiper>'s parent had alignItems: 'center'. It worked fine when I removed that property. If it’s relevant, the parent was an <ImageBackground> element with the following styles:

{
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  }

It worked fine when I changed the parent styles to this:

{
    height: '100%',
    width: '100%',
}

But it also worked when I just commented out the alignItems rule I had originally.

TLDR: just remove alignItems: 'center' from the parent element.

+27

stevula on Jul 12, 2018

The only thing that seems to work is by wrapping the Swiper Component <Swiper></Swiper> with ScrollView instead of View

cngeru on May 7, 2018

It looks like the issue has something to do with the ViewPagerAndroid, take a look at this PR by @msutariya

alangumer on May 15, 2018

@stevula you are my life savior. Thank you. ^^

kyunkakata on Jul 1, 2018

I’ve tried doing the PR by @alangumer, which basically bypasses ViewPagerAndroid and use ScrollView – the issue is, it doesn’t support things like going to a specific index for Android. Did this use to work for Android before?

CricketLaChica on May 21, 2018