Can we change button color of Swiper module in React Native?

Question

I use React native. I'd like to use Swiper from react-native-swiper.

import Swiper from "react-native-swiper";

Here as you can see, the button color is set blue as a default as well as size.

I use this Swiper as below.

<Swiper
  style={{
    width,
    height: 400,
  }}
  buttonWrapperStyle={{
    paddingHorizontal: 20,
  }}
  horizontal
  showsButtons={true}
  showsPagination={true}
  }
>
  {file.map((onepic) => (
    <File
      resizeMode="cover"
      style={{ width, height: 400 }}
      source={{ uri: onepic }}
    ></File>
  ))}
</Swiper>

Even if I've searched a lot how to change button color and size, but nothing was found.

please help me.

Answer 1

Yes you can, there is props called buttonWrapperStyle which is nothing but a style.

You can even change style of specific left/right button by using nextButton or prevButton props

nextButton={()=><Text style={styles.buttonText}>Next</Text>}

Find more in detail from here https://github.com/leecade/react-native-swiper#control-buttons

Answer 2

You can just add

style={{'--swiper-navigation-color': 'blue'}}