react-nativereact-native-swiper

How to change default colors of React Native Swiper component?


I'm using this React Native Swiper component: https://github.com/leecade/react-native-swiper#custom-basic-style--content

I'm having trouble changing the dot color to anything but the default blue. Anyone know how to do this?

Here is my code:

<Swiper style={styles.wrapper} loop={true}>
      {rows.map(function(obj, index) {
          return(
            <View style={styles.main} key={index}>
              <Image
                source={{uri: obj.url}}
                style={styles.main} />
            </View>)
      })}
    </Swiper>

Solution

  • This component has a prop named 'dot', which you can change the style of the dot.

    <View style={{
          backgroundColor:'rgba(0,0,0,.2)', 
          width: 8, 
          height: 8,       
          borderRadius: 4, 
          marginLeft: 3, 
          marginRight: 3, 
          marginTop: 3, 
          marginBottom: 3,}} 
    />