react-native-view-slider/dots.js

A fully customizable view/image/component slider for react native applications

import React from 'react'
import {View, StyleSheet} from 'react-native'

export default Indicators = (props) => {
  const activeColor = props.activeColor
  const inactiveColor = props.inactiveColor
  const dotsCount = props.count
  const activeDot = props.activeDot
  const containerStyle = props.containerStyle
  
  const createDots = () => {
    let dot = []
    for(let i = 1; i <= dotsCount; i++) {
      dot.push(<View key={i} style={[styles.dot, {backgroundColor: activeDot === i ? activeColor : inactiveColor}]}></View>)
    }
    return dot
  }

  return(
    
    <View style={[styles.dotContainer, containerStyle]}>
      {createDots().map((dot, i) => (<React.Fragment key={i}>{dot}</React.Fragment>))}
    </View>
  )
}

const styles = StyleSheet.create({
  dotContainer: {
    marginVertical: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  dot: {
    marginHorizontal: 10,
    padding: 5,
    borderRadius: 100,
  }
})