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

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

[stevula]

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.

[cngeru]

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