React-native-swiper: Support for Android

[arunshan]

I am planning to use this module for a project and would like to know if this works on Android. All the components used in this repo does not have 'IOS' suffix to it, so I believe it should be fine. :)

[ghost]

It doesn't really work on android. There is no paging, just continuous scroll. Paging buttons also don't work.

[lucasmreis]

+1 for Android support

[niftylettuce]

:+1: For Android!

[jforaker]

@niftylettuce do you have a fork with working swipe? (already borrowed your navbar fork :stuck_out_tongue_winking_eye:)

[ghost]

For anyone looking for paging functionality, check out this module: https://github.com/race604/react-native-viewpager

[cgarvis]

I didn't like the datasource of react-native-viewpager and it does look like the author is going to be working on this repo soon, so I built https://github.com/fixt/react-native-page-swiper

[sritampatnaik]

@cgarvis Does your's support Android ?

[cgarvis]

@sritampatnaik yes.

[niftylettuce]

@jforaker unfortunately no :laughing:

[niftylettuce]

Perhaps we could borrow the Modal/Portal concept from my package here (which ensures the swiper would be shown above everything else). https://github.com/niftylettuce/react-native-loading-spinner-overlay

[raymanyoung]

In fact the issue of Android support is that ViewPagerAndroid is used instead of scrollView so the adding corresponding event will make it work

[bsinc]

+1 would really appreciate this!

[sharq1]

+1

[acamenhas]

+1 !!!

[samdturner]

This looks like a terrific project, and we are seriously considering using it in production for our iOS app. Is releasing a version with Android support going to happen soon - like in the next couple of months? (we obviously would use the same component for iOS and Android). Your hard work is really appreciated!

[darrenchiu]

this module is awesome, please do add android support! Love this module so much

[narek11]

+1 for android support

[anonrig]

+1 for android support

[shireen]

+1

[sdduursma]

+1

[yohanceli]

+1

[oliversisson]

Update? @leecade

[oliversisson]

So it works fine for me in Android so long as I add

containerStyle={{width: windowDimensions.width}}

[jaspreetsingh2701]

+1

[yarrumretep]

+1

[nickitatkach]

+1

[plattyp]

Per @oliversisson comment, I'm able to get it to work fine in both iOS and Android by doing the following with the containerStyle prop and width:

...
import Dimensions from 'Dimensions';

class Scene extends Component {
  getWidth() {
    return Dimensions.get('window').width;
  }

  render() {
    const width = this.getWidth();

    return (
       <View style={styles.outerContainer}>
          <Swiper
            showsButtons={false}
            showsPagination={false}
            containerStyle={{width}}
          >
            {this.renderCards()}
          </Swiper>
       </View>
    );
}

[joshkmartinez]

+1 for android support! I really need this!

[RaonyMarcondes]

+1 Android Support

[sejas]

+1 Android Support

[sejas]

yeah, @plattyp is right. It is already working in Android (check the Roadmap)

You need to use a fixed width in this prop containerStyle

So we should close this issue.

import Dimensions from 'Dimensions';

class Slider extends Component {
  render() {
    const width = Dimensions.get('window').width
    return (
       <View style={styles.outerContainer}>
          <Swiper
            showsButtons={false}
            showsPagination={false}
            containerStyle={{width}}
          >
            {this.renderCards()}
          </Swiper>
       </View>
    );
}

[zacharymorel]

The android fix doesn't work for me even when I add containerStyle={{width}} as a Swiper prop.

[joshkmartinez]

@zacharymorel Same for me. Its cut off at the top and bottom on android, absolutely fine on ios...

[joshkmartinez]

@zacharymorel Have you had a fix for this yet?

[zacharymorel]

@joshkmartinez I haven't yet, I've decided to attempt to build a carousel component myself.

[azwar]

@zacharymorel make sure you are passing Style object.

Here is my detail example:

    <Swiper
        showsButtons={false}
        showsPagination={false}
        containerStyle={styles.swiperStyle}
      >
        {this.renderCards()}
   </Swiper>

Here is the style:

 const styles = StyleSheet.create({
    swiperStyle: {
        width: Platform.OS === 'ios' ? '100%' : Dimensions.get('window').width
    }
 })

[anasidrissi]

worked just fine for me (Android use)
just watch out for any containing views make sure to assign the appropriate style

[RossKinsella]

automaticallyAdjustContentInsets sorted out android not rendering for me...

RN: 0.54.4
react-native-swiper: 1.5.13

[brunokiafuka]

automaticallyAdjustContentInsets sorted out android not rendering for me...

RN: 0.54.4
react-native-swiper: 1.5.13

const window = Dimensions.get('window');

<------->

 <Swiper ref='mySwiper' onIndexChanged={this.onSwipe}
            loop={false}
            showsPagination={false}
            scrollEnabled={false}
            height={window.height}
            width={window.width}
            containerStyle={{ alignSelf: 'stretch' }}
          >

Setting width and height for the swiper fixes the issues on Android. 🚀