0.1.2 • Published 5 years ago

react-native-square-timer v0.1.2

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

react-native-square-timer

Square Timer component for React Native

NPM

  • stable release version: version
  • package downloads: downloads
  • MIT license

Show Cases

IOSAndroid
npm.ionpm.io

Getting Started

Installation

npm i react-native-square-timer --save

Basic Usage

  • Install react-native-cli first
$ npm install -g react-native-cli

Note: GUIDE

  • Initialization of a react-native project
$ react-native init AwesomeProject
  • Then, edit AwesomeProject/App.js, like this:
import * as React from 'react';
import { View } from 'react-native';
import SquareTimer from 'react-native-square-timer';

type Props = {}
export default class App extends React.Component<Props> {
    render() {
        return (
            <View 
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white'
                }}
            >
            <SquareTimer
                min={2}
                onTimeElapsed={() => {
                    console.log('Timer Finished!');
                }}
            />
        </View>
        );
    }
}

Props

parametertyperequireddescriptiondefault
minnumberyesTime in minutes
lengthnumbernoThe length of square as height & width of the component200
borderWidthnumbernoThe border width of the square20
elapsedIndicatorColorstringnoThe elapsed time indicator color"#818181"
remainingIndicatorColorstringnoThe remaining time indicator colorcolorful
innerSquareColorstringnoThe color of inner sqaure"#ffffff"
styleobjectnoTo style the timerdefault
textStyleobjectnoTo override the text styledefault
onTimeElapsedfunctionnoCallback for the timer end() => {}

To run example

cd example
npm install
react-native run-android (For android)
react-native run-ios (For ios)

In case of any issue follow the GUIDE.