Support for Android about react-native-swiper HOT 39 OPEN

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>
    );
}

from react-native-swiper.

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>
    );
}

from react-native-swiper.

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

containerStyle={{width: windowDimensions.width}}

from react-native-swiper.

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

from react-native-swiper.

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

from react-native-swiper.

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

from react-native-swiper.

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

from react-native-swiper.

+1 for Android support

from react-native-swiper.

👍 For Android!

from react-native-swiper.

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

from react-native-swiper.

@cgarvis Does your's support Android ?

from react-native-swiper.

@sritampatnaik yes.

from react-native-swiper.

@jforaker unfortunately no 😆

from react-native-swiper.

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

from react-native-swiper.

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

from react-native-swiper.

+1 would really appreciate this!

from react-native-swiper.

+1

from react-native-swiper.

+1 !!!

from react-native-swiper.

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!

from react-native-swiper.

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

from react-native-swiper.

+1 for android support

from react-native-swiper.

+1 for android support

from react-native-swiper.

+1

from react-native-swiper.

+1

from react-native-swiper.

+1

from react-native-swiper.

Update? @leecade

from react-native-swiper.

+1

from react-native-swiper.

+1

from react-native-swiper.

+1

from react-native-swiper.

+1 for android support! I really need this!

from react-native-swiper.

+1 Android Support

from react-native-swiper.

+1 Android Support

from react-native-swiper.

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

from react-native-swiper.

@zacharymorel Have you had a fix for this yet?

from react-native-swiper.

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

from react-native-swiper.

@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
    }
 })

from react-native-swiper.

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

from react-native-swiper.

automaticallyAdjustContentInsets sorted out android not rendering for me...

RN: 0.54.4
react-native-swiper: 1.5.13

from react-native-swiper.

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

from react-native-swiper.