Lightweight React/React Native Countdown Circle Timer

react-countdown-circle-timer

React/React Native countdown timer component in a circle shape with color and progress animation.

react countdown

  • Countdown animation independently optimized for the Web and Mobile
  • Transition between colors during the countdown
  • Fully customizable content in the center of the circle
  • a11y support
  • Built-in and ready-to-use TypeScript type definitions.

React

yarn add react-countdown-circle-timer

 

Check out the full documentation for demos and use cases.

React Native

yarn add react-native-countdown-circle-timer

 

This component has a peer dependency on react-native-svg. Read the full documentation for the installation guide, as well as demos and use cases.

Props for both React/React Native

PROP NAME TYPE DEFAULT DESCRIPTION
duration number required Countdown duration in seconds
colors [color HEX: string, transition duration: number 0 ~ 1][] required Array of tuples: 1st param – color in HEX format; 2nd param – time to transition to next color represented as a fraction of the total duration
initialRemainingTime number Sets the initial remaining time when the countdown starts. By default the countdown starts at the duration provided.
size number 180 Width and height of the SVG element
strokeWidth number 12 Path stroke width
strokeLinecap round | square round Path stroke line cap
trailColor string #d9d9d9 Circle trail color – takes any valid color format (HEX, rgb, rgba, etc.)
rotation clockwise | counterclockwise clockwise Progress path rotation direction
isPlaying boolean false Play and pause animation
* isLinearGradient boolean false * Apples linear gradient on top of the circle. The gradient doesn’t follow the circle path. Works best with two colors.
gradientUniqueKey string Unique ID for the linearGradient element. It takes random ID if it’s not provided.
children ReactNode | function({ remainingTime: number, elapsedTime: number }): number|string|ReactNode Render function or component to customize the time/content in the center of the circle. The content is centered using flexbox.
onComplete function(totalElapsedTime: number): void | [shouldRepeat: boolean, delay: number] On complete handler. It can be used to repeat the countdown by returning an array where the first element shouldRepeat indicates if the loop should start over and second element delay specifies the delay before looping again in milliseconds. The callback receives as an argument the total elapsed time in seconds.
ariaLabel string Countdown timer Aria label for the whole component
renderAriaTime function({ remainingTime: number, elapsedTime: number }): string Render prop function to customize the text message that will be read by the screen reader during the countdown.

GitHub

Tagged : / /

React Native Toast like component works on Both IOS and Android

react-native-tiny-toast


A react native toast like component , it works on IOS and Android.

Features of React Native Tiny Toast:

  • Support iPhone X, XS, XS Max & XR.
  • Support both Android and IOS.
  • Custom icon and style and so on.
  • Use native ActivityIndicator.

Demo Screenshot

react native toast

 


How To Install?

 

npm i react-native-tiny-toast --save

OR

yarn add react-native-tiny-toast


Getting started:

import Toast from 'react-native-tiny-toast'

Toast.show('This is a default toast')

Toast.showSuccess('Pay success')

Toast.show('Custom toast',{
  position: Toast.position.center,
  containerStyle:{},
  textStyle: {},
  imgSource: require('xxx'),
  imgStyle: {},
  mask: true,
  maskStyle:{},
  ...
})

const toast = Toast.showLoading('Loading...')
setTimeout(() => {
  // Recommend
  Toast.hide(toast) 
  // or Toast.hide()
  // If you don't pass toast,it will hide the last toast by default.
 }, 3000)

Using a Component

import React, {Component} from 'react-native'
import Toast from 'react-native-tiny-toast'

class Example extends Component {
    state={
      visible: false
    }
    
    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 1000); 

        setTimeout(() => this.setState({
            visible: false
        }), 3000);
    };

    render() {
        return 
        <Toast
            visible={this.state.visible}
            position={50}
            onHidden={()=>{
              // onHidden
            }}>This is a message
        </Toast>
    }
}

 

Api


Name Default Type Description
containerStyle null ViewPropTypes.style Custom container style
duration Toast.durations.SHORT Number Toast duration(ms), won’t disappear if value is 0
delay 0 Number The delay duration before toast start appearing on screen.
animationDuration 200 Number Animation duration
visible false Boolean Show toast. (Only for Toast Component)
position Toast.position.bottom Number 0 means the middle of the screen.A negative number indicates the distance to the bottom of the screen.A positive number indicates the distance to the top of the screen.
animation true Boolean Whether to enable fade animation
shadow false Boolean Whether to enable shadow
shadowColor #000 String Shadow color (don’t support android)
showText true Boolean Whether to show text
textColor #fff String Text color
textStyle null Text.propTypes.style Text Style
mask false(true when showLoading) Boolean Whether to enable mask
maskColor rgba(0,0,0,0.3) String Mask background color
maskStyle null ViewPropTypes.style Mask style
imgSource null Image.source Image source
imgStyle null Image.propTypes.style Image Style
loading false(true when showLoading) Boolean Whether to show loading
indicatorSize large String or Number Set the ActivityIndicator size,Currently only specific values can be set on Android.
onHidden null Function Triggered when toast’s hide animation end
onMaskPress null Function Triggered when the mask is clicked
Method Type Description
show(text, options) Function Show toast
showSuccess(text, options) Function Show toast with success icon
showLoading(text, options) Function Show toast with ActivityIndicator
hide(toast) Function If you don’t pass toast,it will hide the last toast by default.

Github Link

https://github.com/shx996/react-native-tiny-toast

Tagged : / / / /