It is not working on android

[cngeru]

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

[yaohb]

i have the same problem, it's not working for android!!

[alangumer]

Same here, is not working on Android, react-native 0.55.3

[wesleymonaro]

Same here, using react-native 0.54.4. I tried downgrade to swipe version 1.5.12, without success :/

In IOS emulator works fine.

[maks171293]

Also have the same error. Looks like this is because of react-navigation. If I put the same code to the new project without react-navigation, the content is appear.

[swingywc]

Same here using react-native v0.52.0, one weird thing is when I am using Hot Reloading and make changes on loop attribute, the content will appear.

--- UPDATE --- I am using the <Swiper> inside a <Modal> component, it's not working with react-navigation but works fine in react-native-navigation.

[cngeru]

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

[booleanBoy]

Same here with the same setup as @swingywc on Android. I've got the pagination indicators, but not the page contents. Wrapping in a ScrollView hasn't solve the problem either.

[alangumer]

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

[booleanBoy]

Just solve the issue for myself, which is related to the Modal I have wrapped around it. See my comment on #435 for example code.

EDIT Scratch that, only works on the first showing :(

[booleanBoy]

Looked at the PR @alangumer and it works just fine, thanks!

[CricketLaChica]

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?

[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.

[kyunkakata]

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

[vicros0716]

@stevula removing alignItems: 'center' worked for me when the parent was a <View> element. Amazing catch.

[almorak]

[ android ] not work in a modal + parent view, even no alignItems. *using react-navigation

[halbano]

Hey @stevula, lifesaver finding. What is your theory about the issue? Would you mind sharing it with me? Thanks in advance.

[anshgupta1234]

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.

I'm forever indebted to you. Thanks a lot

[navanit-jha]

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.

@stevula Thank you so much : ) You are amazing