import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Icon } from 'react-native-elements'
import Swiper from 'react-native-swiper'
import FormComponent from '../Forms/FormComponent'
const Quiz = () => {
return (
<Swiper
style={styles.wrapper}
showsButtons={true}
autoplay={false}
loop={false}
buttonWrapperStyle={{ color: 'purple' }}
nextButton={
<Icon
// style={styles.arrowRight}
name='arrow-right'
type='font-awesome'
raised
reverse
size={18}
/>
}
prevButton={
<Icon
// style={styles.arrowRight}
name='arrow-left'
type='font-awesome'
raised
reverse
size={18}
/>
}
>
<View style={styles.slide1}>
<FormComponent />
</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>
)
}
const styles = StyleSheet.create({
wrapper: {},
slide1: {
flex: 1,
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BB',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
})
export default Quiz
The prop nextButton do the trick.
https://github.com/leecade/react-native-swiper#control-buttons
Top comments (0)