React-native-component : lazyfox-circular-countdown
Prerequisites
This library uses react-native-svg to render this component, Therefore this library needs to be installed AND linked into your project to work.
if there's any problem when you install this component, just trying to run react-native link react-native-svg, Other than the above dependency this library uses pure javascript and supports both iOS and Android.
Motivation
I made this library motivated by my last project, which requires a component countdown circle, whereas when I look for it on Google, there is no component that matches the apps I made, so I tried making it by myself using the svg technique.
Installation
To install this component to your react-native project, please just following this instruction bellow.
#on your root project, enter command $ npm install --save lazyfox-circular-countdown react-native-svg #after downlaoding the dependencies, please enter this command to linked the dependencies of react-native-svg $ react-native link react-native-svg
Example code
To install this component to your react-native project, please just following this instruction bellow.
import React Component from 'react';import Text View from 'react-native';import LazyFoxCircularCountDown from "lazyfox-circular-countdown"; <Props> { return <View => <Text =>React-native countdown circle</Text> <LazyFoxCircularCountDown = // = // = // ** = // ** = // ** = // ** = // ** ="#fff" // ** ="#0B2534" // ** ="#457A80" // ** ="#457A80" // ** = // * = * /> </View> ; }
if you want to start the coundown manually, you can add props isAutoStart={true} and call the method on componentDidMount or another function, you can follow this example code.
import React Component from 'react';import Text View from 'react-native';import LazyFoxCircularCountDown from "lazyfox-circular-countdown"; <Props> { thistime; } { return <View => <Text =>React-native countdown circle</Text> <LazyFoxCircularCountDown = // = = // = // ** = // ** = // ** = // ** = // ** ="#fff" // ** ="#0B2534" // ** ="#457A80" // ** ="#457A80" // ** = // * = * /> </View> ; }
defaultProps
So you can add many properties, you can look at the list of defaultprops / properties
// Propeties LazyFoxCircularCountDowndefaultProps = offset: 0 stroke: 0 r: 20 circleWidth:120 strokeWidth:8 fill:"#fff" stroke:"green" backStroke:"#0B2534" centerFontSize:20 color:"#333" seconds:10 secondsLenght:null null null useDecimal:true isMinutes:false isSeconds:false delayTime:null isAutoStart:true isShow:true defaultValue:10;
Dependencies
This component using react react-native-svg
License
MIT Licences