DEV Community

Claire Lu
Claire Lu

Posted on

Update next button'react-native-swiper'

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
Enter fullscreen mode Exit fullscreen mode

The prop nextButton do the trick.
https://github.com/leecade/react-native-swiper#control-buttons

Top comments (0)