Skip to content

Add background color property #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
danpliego wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Add background color property #28

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
551185f
Add background color property
danpliego Dec 10, 2015
55257d3
Merge pull request #1 from juankiz/master
danpliego Feb 11, 2016
0ad3471
change carousel styles
danpliego Apr 1, 2016
5604c61
Merge branch 'master' of github.com:danpliego/react-native-carousel
danpliego Apr 1, 2016
bceebfe
correct padding-top
danpliego Apr 1, 2016
02f42a8
hide if < 1
danpliego Apr 1, 2016
67c3692
Fix bug when pressing an indicator with a custom width.
juankiz Apr 13, 2016
4e14fed
Merge pull request #2 from juankiz/master
danpliego Apr 13, 2016
1d72849
Add method to sync carousel location with current image
danpliego Apr 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions Carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ var Carousel = React.createClass({
animate: true,
delay: 1000,
loop: true,
backgroundColor: 'transparent'
};
},

Expand All @@ -53,9 +54,14 @@ var Carousel = React.createClass({
}
},

syncCarouselLocation() {
var width = this.state.activePage * this.props.width;
this.refs.scrollView && this.refs.scrollView.scrollWithoutAnimationTo(0, width);
},

indicatorPressed(activePage){
this.setState({activePage});
this.refs.scrollView.scrollTo({y:0, x:activePage * width});
this.refs.scrollView.scrollTo({y:0, x:activePage * this.props.width});
},

renderPageIndicator() {
Expand All @@ -72,9 +78,11 @@ var Carousel = React.createClass({
};
position.left = (this.props.width - position.width) / 2;

for (var i = 0, l = this.props.children.length; i < l; i++) {
style = i === this.state.activePage ? { color: this.props.indicatorColor } : { color: this.props.inactiveIndicatorColor };
indicators.push(<Text style={[style, { fontSize: this.props.indicatorSize }]} key={i} onPress={this.indicatorPressed.bind(this,i)}>&bull;</Text>);
if (this.props.children.length > 1) {
for (var i = 0, l = this.props.children.length; i < l; i++) {
style = i === this.state.activePage ? { color: this.props.indicatorColor } : { color: this.props.inactiveIndicatorColor };
indicators.push(<Text style={[style, { fontSize: this.props.indicatorSize }]} key={i} onPress={this.indicatorPressed.bind(this,i)}>&bull;</Text>);
}
}

return (
Expand Down Expand Up @@ -123,7 +131,7 @@ var Carousel = React.createClass({
return (
<View style={{ flex: 1 }}>
<ScrollView ref="scrollView"
contentContainerStyle={styles.container}
contentContainerStyle={[styles.container, {backgroundColor: this.props.backgroundColor}]}
automaticallyAdjustContentInsets={false}
horizontal={true}
pagingEnabled={true}
Expand Down Expand Up @@ -156,6 +164,7 @@ var styles = StyleSheet.create({
position: 'absolute',
flexDirection: 'row',
flex: 1,
top: 190,
justifyContent: 'space-around',
alignItems: 'center',
alignSelf: 'center',
Expand Down