React-native-counter-timer NPM

React Native Counter Timer

Advance Counter timer for React Native using react-native progress, react-native-background-timer and react-native-linear-gradient

Installation

iOS,

Step 1 - Install library

npm i react-native-counter-timer --save

yarn add react-native-counter-timer

Step 2 - Add it to your project

You need to include the ART library in your project on iOS, for android it's already included.

For CocoaPod users:

Add these 2 and and then run pod install in ios directory:

pod 'React-ART', :path => '../node_modules/react-native/Libraries/ART'

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

Or manually:

React ART based components,

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

BVLinearGradient component, 1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-linear-gradient and add BVLinearGradient.xcodeproj. (Screenshot 1) (Screenshot 2). 2. Add libBVLinearGradient.a to Build Phases -> Link Binary With Libraries (Screenshot 1) (Screenshot 2). 3. Click on BVLinearGradient.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React - if it isn't, then add it. This is so XCode is able to find the headers that the BVLinearGradient source files are referring to by pointing to the header files installed within the react-native node_modules directory. (Screenshot).

Step 3 - Add background timer

Using CocoaPod:

Add this and and then run pod install in ios directory:

pod 'react-native-background-timer', :path => '../node_modules/react-native-background-timer'

npm.io npm.io

Usage - Basic

import RNTimer from "react-native-counter-timer";

const timer = {
  restTimeHours: 0,
  restTimeMinutes: 0,
  restTimeSeconds: 7,
  activiTimeHours: 0,
  activeTimeMinutes: 0,
  activeTimeSeconds: 8,
  sets: 7,
 };

 <RNTimer 
  timer={timer}
  />

Props

Timer

Props	Description	Type	Default Values
`runInBackground`	Run timer in background	bool	true

Controller

Props	Description	Type	Default Values
`controllerButtons`	3 controller buttons and swap the values in the array to change the button order	array	'RESET', 'PRIMARY_ACTION', 'SKIP'
`controllerPosition`	controller position at 'TOP'or 'BOTTOM'	String	'BOTTOM'
`controlsWrapperStyle`	Wrapper style of controller	Object	{flexDirection: 'row',justifyContent: 'space-around',paddingBottom: 10,paddingTop: 10,}

Controller - Reset Button

Props	Description	Type	Default Values
`controllerResetText`	Reset button text	String	'RESET'
`controllerResetButtonTextStyle`	Reset button text style	Object	{color: '#0086C6',fontSize: 16}
`controllerResetButtonStyle`	Reset button style	Object	{paddingTop: 10,alignItems: 'center',flex: 1}
`controllerDisabledResetButtonTextStyle`	Reset button text style when button is disable	Object	null
`controllerDisabledResetButtonStyle`	Reset button style when when button is disable	Object	null
`controllerResetButtonElement`	React native element inside the reset button	Object	null

Controller - Skip Button

Props	Description	Type	Default Values
`controllerSkipButtonText`	Skip Button text	String	'SKIP'
`controllerSkipButtonStyle`	Skip button text style	Object	{paddingTop: 10,alignItems: 'center',flex: 1,}
`controllerDisabledSkipButtonTextStyle`	Skip button text style when button is disabled	Object	null
`controllerDisabledSkipButtonStyle`	Skip button style when button is disabled	Object	null
`controllerSkipButtonElement`	React native element inside the skip button	Object	null

Controller - Action Button (first)

Props	Description	Type	Default Values
`controllerMainPrimaryActionButtonStyle`	Style of main primary button	Object	null
`controllerMainPrimaryActionDisabledButtonStyle`	Style of main primary button when disable	Object	null
`controllerMainPrimaryActionButtonElement`	React native element inside primary action button	Object	null

Controller - Action Button (Second)

Props	Description	Type	Default Values
`controllerSecondPrimaryActionButtonTextStyle`	Style of second primary action	Object	null
`controllerSecondPrimaryActionButtonStyle`	Style of second primary action button style	Object	null
`controllerSecondPrimaryActionButtonElement`	React native element inside second primary action button	Object	null

Progress

Props	Description	Type	Default Values
`progressAnimation`	If the circle should animate	bool	true
`progressBorderWidth`		Number	0
`progressDirection`	Direction of the circle clockwise or counter-clockwise	String	'counter-clockwise'
`progressStyle`	Progress Style	Object	{alignItems: 'center',justifyContent: 'center',}
`progressThickness`	Thickness of the circle.	Number	4
`progressVisible`	Whether or not to visible progress bar	bool	true
`progressSize`	Diameter of the circle	Number	140
`progressWrapper`	Override the style of progress circle wrapper	Object	{ paddingTop: 30}
`progressPrimaryStatusColor`	Progress color when timer in primary status	Object	'#31708E'
`progressSecondaryStatusColor`	Progress color when timer in secondary status	Object	'#E85A4F'

Counter

Props	Description	Type	Default Values
`counterTimer`	Display order of hours, minutes and seconds. swap the value to change the order or remove. Ex: 'SECONDS', 'MINUITES'	array	'HOURS', 'MINUITES', 'SECONDS'
`counterTexts`	Display order of max timer, timer and sets. Swap the value in array to change the order or remove	array	'MAX_TIME', 'TIMER', 'SET' }

Counter - Set

Props	Description	Type	Default Values
`counterSetSeperatorText`	Symbol to seperate between counter set text and number	String	'/'
`counterSetText`	Text of counter set	String	'Set'
`counterSetTextWrapperStyle`	Wrapper style of counter text	Object	{fontSize: 20, color: 'black'}

Counter - Status

Props	Description	Type	Default Values
`counterTimerDefaultStatusText`	Counter timer text value before start the timer	String	'Default'
`counterTimerPrimaryStatusText`	Counter timer text value when timer in primary status	String	'primary'
`counterTimerSecondaryStatusText`	Counter timer text value when timer in secondary status	String	'secondary'

Gradient Color

Props	Description	Type	Default Values
`gradientColorsDefault`	Gradient color of timer container before start the timer	Object	''rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)''
`gradientColorsRepsActive`	Gradient color of timer container when timer is in primary mode	Object	''rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)''
`gradientColorsRestActive`	Gradient color of timer container when timer is in Secondary mode	Object	''rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)''

More info - https://github.com/react-native-community/react-native-linear-gradient

Events

Props	Description	Default Values
`onActivityCompleted`	Invoke after completed the timer	null
`onSecondaryModeEnd`	Invoke when secondary mode end	null
`onPrimaryModeStartPressed`	Invoke when press start button in primary mode	null
`onSecondaryModePausePressed`	Invoke when press pause button in secondary mode	null
`onPrimaryModePausePressed`	Invoke when presss pause button in primary mode	null
`onSecondaryModeStartPressed`	Invoke when press start button in secondary mode	null
`onSkipPressed`	Invoke when press skip button	null