@logisticinfotech/react-native-timekeeper

    1.0.0 • Public • Published

    react-native-timekeeper

    Timekeeper is the most complete and lightweight component for React-Native that allows you to create your own animated timer.

    Features!

    • Custom colors
    • Custom borders and size
    • Light-weight: No other dependencies besides react-native
    • Enable/disable scale bounce animation (also specifies the size of the scales)
    • Progressive or regressive counting
    • Enable/disable pausable timer
    • Apply your own callbacks on pausing, on resuming, or time elapsed

    Installation

    $ yarn add react-native-timekeeper

    or

    $ npm install react-native-timekeeper --save

    Usage

    import Timer from 'react-native-timekeeper';
     
    render() {
        return(
            <Timer
              beat={true}
              seconds={120}
              radius={100}
              borderWidth={6}
              color="#C52957"
              bgColor="#DE537C"
              bgColorSecondary="#E495AC"
              bgColorThirt="#EFD6DE"
              shadowColor="#DE537C"
              textStyle={{ fontSize: 52, color: '#FFF', }}
              subTextStyle={{ fontSize: 20, color: '#FFF', }}
              onTimeElapsed={() => {console.log('Time elapsed')} }
              isPausable={true}
              onPause={() => console.log('Pause')}
              onResume={() => console.log('Resume')}
              minScale={0.9}
              maxScale={1.2}
              />
        );
    }

    Props

    Name Description Type Required Default Value
    beat ----------- ----------- ----------- -----------
    seconds ----------- ----------- ----------- -----------
    radius ----------- ----------- ----------- -----------
    borderWidth ----------- ----------- ----------- -----------
    color ----------- ----------- ----------- -----------
    bgColor ----------- ----------- ----------- -----------
    bgColorSecondary ----------- ----------- ----------- -----------
    bgColorThirt ----------- ----------- ----------- -----------
    shadowColor ----------- ----------- ----------- -----------
    textStyle ----------- ----------- ----------- -----------
    subTextStyle ----------- ----------- ----------- -----------
    onTimeElapsed ----------- ----------- ----------- -----------
    isPausable ----------- ----------- ----------- -----------
    onPause ----------- ----------- ----------- -----------
    onResume ----------- ----------- ----------- -----------
    minScale ----------- ----------- ----------- -----------
    maxScale ----------- ----------- ----------- -----------

    Author

    Yamil Diaz Aguirre

    Want to contribute? Great!

    Install

    npm i @logisticinfotech/react-native-timekeeper

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • nirav.
    • digvijay_logistic
    • chintan01
    • pankajn
    • nileshkikani