react-native-linear-timer

Linear Timer component for React Native

NPM

• stable release version:
• package downloads:
• 

Show Cases

IOS	Android

Getting Started

Installation

npm i react-native-linear-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 LinearTimer from 'react-native-linear-timer';
 
type Props = {}
export default class App extends React.Component<Props> {
    render() {
        return (
            <View 
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white'
                }}
            >
            <LinearTimer
                min={2}
                onTimeElapsed={() => {
                    console.log('Timer Finished!');
                }}
            />
        </View>
        );
    }
}

Props

parameter	type	required	description	default
min	number	yes	Time in minutes
height	number	no	The height of the component	38
rermainingEndThreshold	number	no	The threshold width after which the remaining end color change	10
elapsedIndicatorColor	string	no	The elapsed time indicator color	"#A8C3BC"
remainingIndicatorColor	string	no	The remaining time indicator color	"#0E3657"
rermainingEndIndicatorColor	string	no	The remaining end time indicator color after threshold	"#cc0000"
style	object	no	To override the timer style	default
textStyle	object	no	To override the text style	default
onTimeElapsed	function	no	Callback 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.