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 

or

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'

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 |

Contributor guidelines

• Fork the repository.
• Clone the forked repository.
• Create your own branch.
• Create a pull request with changes made.

License

MIT

Free Software, Hell Yeah!