leecade / leecade/react-native-swiper
Android: Not rendering first slide.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
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"
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the provided index.android.js example with react-native 0.29.1 and react-native-swiper 1.4.6, then add the first slide after mounting. Compare Android behavior with iOS and trace how the Swiper handles its children when the initial array is empty; done means the first dynamically added slide renders on Android without breaking the existing behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100