React-native-swiper: After the latest commit, all my swipers appear blank.

[innerexception]

Not ideal.

[mrdezzods]

Which platform?

[innerexception]

RN 0.46 / RN Swiper 1.5.5

[mrdezzods]

I just released a new version 1.5.8 . Can you please check with that if the issue is resolved?

[innerexception]

Unfortunately with RN 0.46 / RN Swiper 1.5.8 all swipers are still blank. Anything else I can check?

[mrdezzods]

Can you maybe share your code?

[innerexception]

Sure here's one of my render methods that used to work in 1.5.4:

              return  <View style={{height: '90%'}}>
                                <Swiper onMomentumScrollEnd={(e, state, context) => this.setState({activeView: getActiveViewFromIndex(state.index)})}
                                        loop={true}
                                        index={getIndexFromActiveView(this.state.activeView)}
                                        showsPagination={false}>
                                    <Text>Some content... :)</Text>
                                </Swiper>
                            </View>

[innerexception]

I'm fine, I just reverted to 1.5.4 and all is well. 1.5.8 doesn't seem to work for me though.

[ghost]

Same here, RN 0.47.1, react-native-swiper 1.5.7 and 1.5.8. Previously worked with RN 0.45.1 and react-native-swiper 1.5.4

This only happens on Android, works fine on iOS

render () {
  return (
    <Modal
      visible={this.state.showModal}
      onRequestClose={this.toggleModal}>
      <View style={styles.closeButton}>
        <IconToggle name='close' color={Colors.snow} onPress={this.toggleModal} />
      </View>
      <View style={styles.centered}>
        <Swiper showsButtons loop={false}>
          <View style={styles.slide1}>
            <Text style={styles.text}>How to Use</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>Why to Use</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>When to Use</Text>
          </View>
        </Swiper>
      </View>
    </Modal>
  )
}

[liuchengbao]

when react-native 0.46.4,react-native-swiper 1.5.4 or 1.5.8 not work,What can I do？

[cbjs]

same.

[arribbar]

@RobertSheaO @jbakerdev Can you fork the project and reproduce the bug with one example? It would be easier for us to help you.
@liuchengbao You can do the same and help us make this project works for you

[ghost]

I was able to narrow it down to the usage of ViewPagerAndroid. I took flex: 1 off and set it to height: 400 and got something to render. Obviously that's not a good fix, but it narrows it down to a styling issue.

[arribbar]

Maybe you can use height from https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L19. Then, you can erase it with this.props.style.
What do you think about this solution ?

[ghost]

The code in the repo is very different than what's in 1.5.8

Here's the change I made that fixed it.

Old Code

<ViewPagerAndroid ref='scrollView'
  {...this.props}
  initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
  onPageSelected={this.onScrollEnd}
  style={{flex: 1}}>
  {pages}
</ViewPagerAndroid>

New Code

wrapper: {
  backgroundColor: 'transparent',
  height: Dimensions.get('window').height
},

<ViewPagerAndroid ref='scrollView'
  {...this.props}
  initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
  onPageSelected={this.onScrollEnd}
  style={[styles.wrapper, this.props.style]}>
  {pages}
</ViewPagerAndroid>

[arribbar]

2 questions:

• Can you try without your changes but the last version, 1.5.9 ?
• If the bug persists, can you make a PR ?

[ghost]

1.5.9 isn't pushed to the NPM repository yet, yarn can't find it.

And yes, I'll make a PR if it's not fixed.

[arribbar]

You can either add directly the git project in your package.json or even easier, make directly the change.
You just need to remove one line, cf this commit https://github.com/leecade/react-native-swiper/commit/d1364f5f392a87db432cca1bf51338f7bb1b86e4
Your example seems to work in my case

[ghost]

@arribbar The weird thing is, what gets pulled down via yarn add [email protected] is very different than what's in github... Here's small sample from the styles object. Notice the lack of wrapperIOS and wrapperAndroid in what gets installed. There's quite a few other differences as well.

react-native-swiper from yarn install

container: {
  backgroundColor: 'transparent',
  position: 'relative'
},

wrapper: {
  backgroundColor: 'transparent'
},

slide: {
  backgroundColor: 'transparent'
},

react-native-swiper from github source

container: {
  backgroundColor: 'transparent',
  position: 'relative',
  flex: 1
},

wrapperIOS: {
  backgroundColor: 'transparent',
},

wrapperAndroid: {
  backgroundColor: 'transparent',
  flex: 1
},

slide: {
  backgroundColor: 'transparent',
},

[arribbar]

@mrdezzods Maybe there was a bug when you updated npm package. Can you check it ? I can't publish anything on npm.
@RobertSheaO Indeed, this is weird. Can you try replacing in package.json react-native-swiper: ... by "react-native-swiper": "git+https://github.com/leecade/react-native-swiper.git" ?

[Lizhooh]

I don't know why, react natie v0.47 does not display content and blank.

"react-native-swiper": "^1.5.8",

I'm using the basic example

No content, blank, height zero

<Swiper style={styles.wrapper} showsButtons>
    <View style={styles.slide1}>
        <Text style={styles.text}>Hello Swiper</Text>
    </View>
    <View style={styles.slide2}>
        <Text style={styles.text}>Beautiful</Text>
    </View>
    <View style={styles.slide3}>
        <Text style={styles.text}>And simple</Text>
    </View>
</Swiper>

There is content, height is not zero

<View style={styles.slide1}>
    <Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
    <Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
    <Text style={styles.text}>And simple</Text>
</View>

when I use v1.5.5, there's no problem

[ghost]

@arribbar I added the git link to my package.json and it pulled down what's on github; however, iOS now no longer works. It just shows the left/right arrows at the top of the screen. I'm pretty sure the issue is the introduction of using {flex: 1}

[arribbar]

Ok, thank you @RobertSheaO.
It's weird because I think we do not change any style for iOS...
Can you give me a version of your code in which I can reproduce the bug (with the style and all imports you use)? You can fork the project and create one example with your bug.
I'll take a look at it.

[ghost]

I'll fork and create an sample this week for you.

[fhadsheikh]

+1

[Alex-Mann]

Happening to me also, RN v0.47.1, Swiper v1.5.10. Any updates about an example/fix?

[relense]

+1

[Lizhooh]

+2

[FatalTouch]

Had a blank swiper on iOS. fixed by setting flex:1 for the parent view of the swiper.

[Gp2mv3]

I also have a white swiper on Android.
Swiper v1.5.10 and RN 0.47.1

[lazyTai]

+1

[michel-p]

Hi everyone, is there any solution being implemented ? or did someone find any workaround ? I have this issue on my project for 2 weeks now.

Swiper is blank on Android ( RN 0.47.1, swiper 1.5.12 )

PS : also have some rendering problem on IOS when swiper is in react-native Modal.

[nikhilemmanuel]

Facing the same issue, RN 0.46.4, swiper 1.5.12. Blank screen appears on both IOS and android and the app does not load.

[nikhilemmanuel]

Solved it by using flex:1 for the parent view. @FatalTouch 👍

[arribbar]

Guys, I can't help you without an example reproducing the bug. You can try playing with flex:1 with parent as @nikhilemmanuel did.
If you want some, please, add an example. It might be different bugs

[prevuelta]

I did a real quick example: https://github.com/prevuelta/react-native-swiper
Simply putting the swiper in a view generated this bug. As soon as you add height to the parent, it's fine. Tested on Android phone (Google Pixel). Hope that helps

[pppluto]

use react-native-0.46.4 && react-native-swiper 1.5.13 still blank on android. set the height on swiper props fix it

[infinityl00p]

+1

[egunsoma]

still blank for me too.

[ciriac]

Had the same issue while upgrading to the latest RN version. Solved it with this. Not ideal, but it works.

containerStyle={{flex: 1, position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}

[innerexception]

https://github.com/skv-headless/react-native-scrollable-tab-view

[nickmccomb]

Had the same issue while upgrading to the latest RN version. Solved it with this. Not ideal, but it works.

containerStyle={{flex: 1, position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}

Fixed it for me on RN 0.61.1, thanks @ciriac!