Android: Not rendering first slide.

[srdjan-kolosek]

I'v made a basic rn app and added react-native-swiper. When i add a new item to the array im rendering slides from the first slide will not show on android. It works fine on iOS. It allso works fine if there are atleast 2 elements initialy in the array.

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper'
class SwiperTest extends Component {
  constructor(props) {
      super(props)
      this.state = {slides: []}
  }

  renderAttachments() {
    return this.state.slides.map((slide, index) => {
      return (
        <View style={[styles.slide1]} key= { index }>
          <Text>{ "Slide " + index }</Text>
        </View>
      );
    });
  }

  onPress() {
    this.setState({slides: this.state.slides.concat("Slide")})
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress = {this.onPress.bind(this)}><Text >Add slide!</Text></TouchableOpacity>
      <Swiper
        style={styles.wrapper}
        showsButtons={true} loop={false}
        dot={<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 5, height: 5,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 30,}} />}
        activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 30,}} />}
      >
       {this.renderAttachments()}
      </Swiper>
      </View>
    )
  }
}

var styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})

AppRegistry.registerComponent('SwiperTest', () => SwiperTest);

package.json

"react": "15.2.1",
    "react-native": "0.29.1",
    "react-native-swiper": "^1.4.6"

[karkb]

Hi @srdjan-kolosek, I am facing the same issue here. Any update? appreciate any help.

[srdjan-kolosek]

@karkb Nope.

[franverona]

I found this package a few days ago, and it could be helpful for you both because it doesn't face these issues: https://github.com/race604/react-native-viewpager

[getnashty]

This repo is certainly not dead if you look at the commit history. Feel free to submit a PR to fix any issues.

On Aug 27, 2016, at 5:06 AM, imoreapps notifications@github.com wrote:

I found this fork, it fixes this issue. https://github.com/ryd0rz/react-native-swiper

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/leecade/react-native-swiper/issues/191#issuecomment-242906027, or mute the thread https://github.com/notifications/unsubscribe-auth/AAG52A2z4iAWgmGKQ4BkJSdFDWrInRugks5qj_38gaJpZM4JMVBt .

[MoonTahoe]

This is a problem for me even in iOS using v1.5.12. It adds extra screens at the beginning and the end.

I fixed it by installing at v1.4.9

 npm install react-native-swiper@1.4.9