React Native Circle Slider Example

React Native

Nicesnippets

941

13-11-2021


React Native Circle Slider Example

Hi Guys,

In this tutorial, I will learn you how to implement circle slider in your app using react native.

Here, i will give you complete example for implementing circle slider using react native as bellow.

Step 1 - Create project


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

expo init nicesnippetsApp

Step 2 - Install Package

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

yarn add react-native-circle-slider

Step 3 - App.js

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

}

});

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...


Recommended Posts