Hi Guys,

Today, I will learn you how to implement circle slider in react native. we will show example of react native circle slider.

Here, I will give you full example for simply implement circle slider using react native as bellow.

In the first step Run the following command for create project.

expo init MyWebtutsProject

In the step,I will install react-native-circle-slider.

yarn add react-native-circle-slider

In this step, You will open App.js file and put the code.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CircleSlider from "react-native-circle-slider";

export default class CircleSliderExample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>React Native Circle Slider</Text>
        <CircleSlider btnRadius={20} textSize={18} strokeWidth={5} meterColor={'#3DBBC3'} strokeColor={'#e1e1e1'} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  heading: {
    fontSize: 25,
    marginBottom: 20
  }
});

In the last step run your project using bellow command.

expo start

It will help you..