79 lines
2.4 KiB
JavaScript
79 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import { View, ScrollView, Text, StyleSheet, Image, ImageBackground, TouchableOpacity, Platform, PlatformColor } from 'react-native'
|
|
import Theme from '../theme.style.js';
|
|
|
|
export default function BoardCarousel(props) {
|
|
return (
|
|
<View style={styles.container}><ScrollView
|
|
horizontal={true}
|
|
contentContainerStyle={{ ...styles.scrollView, width: `${100 * props.intervals}%` }}
|
|
showsHorizontalScrollIndicator={false}
|
|
onContentSizeChange={props.onContentSizeChange}
|
|
onScroll={props.onScroll}
|
|
scrollEventThrottle={200}
|
|
pagingEnabled
|
|
decelerationRate="fast"
|
|
>
|
|
{props.items.map((item, index) => {
|
|
return (
|
|
<ImageBackground key={index} source={item.image} style={{flex: 1, resizeMode: "cover", backgroundColor: Theme.colors.primary}}>
|
|
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', padding: 30, bottom: Platform.OS == 'ios' ? 60 : 35}}>
|
|
<Text style={{fontSize: 16.5, color: '#fff'}}>{item.title}</Text>
|
|
<Text style={{color: '#fff'}}>{item.subtitle}</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
)
|
|
})}
|
|
</ScrollView>
|
|
<View style={{position: 'absolute', left: 0, right: 0, bottom: Platform.OS === "ios" ? 40 : 20, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
|
|
<View style={styles.bullets}>
|
|
{props.bullets}
|
|
</View>
|
|
<View style={styles.button}>
|
|
<TouchableOpacity style={{ padding: 10 }} onPress={props.onPress || null}>
|
|
<Text style={{color: Theme.colors.primary, fontSize: 16}}>GET STARTED</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
statsHead: {
|
|
paddingTop: 10,
|
|
paddingHorizontal: 12,
|
|
},
|
|
container: {
|
|
height: '100%',
|
|
width: '100%',
|
|
backgroundColor: '#fbfbfb',
|
|
shadowColor: '#fcfcfc',
|
|
shadowOpacity: 1,
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 5
|
|
},
|
|
},
|
|
scrollView: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
overflow: 'hidden',
|
|
width: '100%',
|
|
height: '100%'
|
|
},
|
|
bullets: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 10,
|
|
paddingTop: 5,
|
|
},
|
|
button: {
|
|
paddingHorizontal: 10,
|
|
paddingTop: 5,
|
|
},
|
|
bullet: {
|
|
paddingHorizontal: 3,
|
|
alignSelf: 'center',
|
|
left: 20
|
|
}
|
|
}); |