@deepnothing/react-native-view-slider/dots.js

A fully customizable 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: 2,
    padding: 2,
    borderRadius: 100,
  }
})