Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-analog-clock with all npm packages installed. Try it out:

var reactNativeAnalogClock = require("react-native-analog-clock")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-analog-clock v0.3.1

React native analog clock as a nice alternative to traditional timepicker.

license

react-native-analog-clock

React native analog clock as a nice alternative to traditional timepicker.

This component is a bridge over native BEMAnalogClock

  • Adjust the time on the clock via touch (or disable it)
  • customizable
  • native behind

NOTE: this native bridge is an Objective-C bridge. A Swift bridge version — not published and just for technical comparison experience — is available here

preview

See this full example source here

Install

IMPORTANT: this component is build with React Native 0.30+ (not tested with lower versions of RN).

install in your project

npm i --save react-native-analog-clock

link to your project

react-native link

Use

import AnalogClock component

A minimalist (a bit ugly) example:

import AnalogClock from 'react-native-analog-clock';
// in your render()
render() {
  return (
    <AnalogClock
      style={{
        width: 150,
        height: 150
      }}
      onTimeChange={
        ({hours, minutes, seconds}) => console.log(`time is now : ${hours}:${minutes}:${seconds}`)
      }
    />    
  );
}

A super complete example:

import AnalogClock from 'react-native-analog-clock';
// in your render()
render() {
  //NOTE: state should be initialized in your constructor (I just abbreviate)
  const { demoConfigParameters } = this.state;
  const { hours, minutes, seconds } = this.state;
  const { currentHours, currentMinutes, currentSeconds } = this.state;
  const { enableShadows, realTime, militaryTime, currentTime, enableDigit, setTimeViaTouch, enableGraduations, enableHub } = this.state;
  const { borderColor, borderWidth, borderAlpha } = this.state;
  const { digitOffset, digitColor } = this.state;
  const { faceBackgroundColor, faceBackgroundAlpha } = this.state;
  const { hourHandColor, hourHandAlpha, hourHandWidth, hourHandLength, hourHandOffsideLength } = this.state;
  const { minuteHandColor, minuteHandAlpha, minuteHandWidth, minuteHandLength, minuteHandOffsideLength } = this.state;
  const { secondHandColor, secondHandAlpha, secondHandWidth, secondHandLength, secondHandOffsideLength } = this.state;
  const { hubColor, hubAlpha, hubRadius } = this.state;
  const { accentGraduationModulo, bridgeHighGraduationColor, bridgeSmallGraduationColor, highGraduationWidth, smallGraduationWidth, highGraduationLength, smallGraduationLength } = this.state;
  return (
    <AnalogClock
      ref={(ref)=>{this.analogClock = ref;}}
      style={{
        height: 140,
        width: 140,
        backgroundColor: 'transparent'}
      }
      // PROPERTIES
      hours={hours}
      minutes={minutes}
      seconds={seconds}
      enableShadows={enableShadows}
      realTime={realTime}
      militaryTime={militaryTime}
      currentTime={currentTime}
      enableDigit={enableDigit}
      setTimeViaTouch={setTimeViaTouch}
      enableGraduations={enableGraduations}
      enableHub={enableHub}
      // CLOCK'S FACE CUSTOMIZATION
      borderColor={borderColor}
      borderAlpha={borderAlpha}
      borderWidth={borderWidth}
      digitColor={digitColor}
      digitOffset={digitOffset}
      faceBackgroundColor={faceBackgroundColor}
      faceBackgroundAlpha={faceBackgroundAlpha}
      // HOURS HAND CUSTOMIZATION
      hourHandColor={hourHandColor}
      hourHandAlpha={hourHandAlpha}
      hourHandWidth={hourHandWidth}
      hourHandLength={hourHandLength}
      hourHandOffsideLength={hourHandOffsideLength}
      // MINUTES HAND CUSTOMIZATION
      minuteHandColor={minuteHandColor}
      minuteHandAlpha={minuteHandAlpha}
      minuteHandWidth={minuteHandWidth}
      minuteHandLength={minuteHandLength}
      minuteHandOffsideLength={minuteHandOffsideLength}
      // SECONDS HAND CUSTOMIZATION
      secondHandColor={secondHandColor}
      secondHandAlpha={secondHandAlpha}
      secondHandWidth={secondHandWidth}
      secondHandLength={secondHandLength}
      secondHandOffsideLength={secondHandOffsideLength}
      // HUB CUSTOMIZATION
      hubColor={hubColor}
      hubAlpha={hubAlpha}
      hubRadius={hubRadius}
      // GRADUATIONS CUSTOMIZATION
      accentGraduationModulo={accentGraduationModulo}
      highGraduationWidth={highGraduationWidth}
      smallGraduationWidth={smallGraduationWidth}
      highGraduationLength={highGraduationLength}
      smallGraduationLength={smallGraduationLength}
      // CURRENT TIME CALLBACK
      onTimeChange={
        ({hours, minutes, seconds}) => {
          this.setState({
            currentHours: hours,
            currentMinutes: minutes,
            currentSeconds: seconds
          });
        }
      }
    />
  );
}

follow this complete example for more details

Properties

General Clock Properties:

Property nametypeDescription
hoursnumbermanually define hours
minutesnumbermanually define minutes
secondsnumbermanually define seconds
enableShadowsboolIf set to true, the hands will cast a shadow. Default value is true.
realTimeboolIf set to true, the clock will be updated in real time (the second hand will move every second, the minute hand every minute...). Default value is false
militaryTimeboolIf set to true, the clock time will support military time. Default value is false.
currentTimeboolIf set to true, the clock will be set to the current time on the phone. Prioritized over setting the time manually. Default value is false.
enableDigitboolIf set to true, the digits (1-12) will be displayed on the face of the clock. Default value is false.
setTimeViaTouchboolIf set to true, the clock time can be updated via touch inputs. Default value is false.
enableGraduationsboolIf set to true, the graduation on the clock will be visible. See the methods bellow to customize the graduations. Default value is true.
enableHubboolIf set to true, a circular hub will be drawn. Default value is false

Current time callback:

NameParameterParameter details
onTimeChangeobject{hours, minutes, seconds}

Clock's face customizations:

Property nametypeDescription
borderColorstringThe color of the clock's border (ex: 'blue', '#F1F1F1'...).
borderAlphanumberThe alpha of the clock's border.
borderWidthnumberThe width of the clock's border.
digitColorstringThe color of the digits appearing inside the clock (ex: 'blue', '#F1F1F1'...). WARNING: this property should be constant
digitOffsetnumberThe offset for the position of the digits on the clock's face. A value >0 will make the digits appear further away from the center of the clock. A valut <0 will make them closer to the center of the clock. Default value is 0.0.
faceBackgroundColorstringThe background color of the clock's face (ex: 'blue', '#F1F1F1'...).
faceBackgroundAlphanumberThe alpha of the clock's face.

Hours hand customizations:

Property nametypeDescription
hourHandColorstringThe color of the clock's hour hand. Default value is white.
hourHandAlphanumberThe alpha of the clock's hour hand. Default value is 1.0.
hourHandWidthnumberThe width of the clock's hour hand. Default value is 4.0.
hourHandLengthnumberThe length of the clock's hour hand. Default value is 30.
hourHandOffsideLengthnumberThe length of the offside part of the clock's hour hand. Default value is 10.

Minutes hand customizations:

Property nametypeDescription
minuteHandColorstringThe color of the clock's minute hand. Default value is white.
minuteHandAlphanumberThe alpha of the clock's minute hand. Default value is 1.0.
minuteHandWidthnumberThe width of the clock's minute hand. Default value is 3.0.
minuteHandLengthnumberThe length of the clock's minute hand. Default value is 55.
minuteHandOffsideLengthnumberThe length of the offside part of the clock's minute hand. Default value is 20.

Seconds hand customizations:

Property nametypeDescription
secondHandColorstringThe color of the clock's second hand. Default value is white.
secondHandAlphanumberThe alpha of the clock's second hand. Default value is 1.0.
secondHandWidthnumberThe width of the clock's second hand. Default value is 1.0.
secondHandLengthnumberThe length of the clock's second hand. Default value is 60.
secondHandOffsideLengthnumberThe length of the offside part of the clock's second hand. Default value is 20.

Hub customizations:

Property nametypeDescription
hubColorstringThe color of the clock's hub. Default value is white.
hubAlphanumberThe alpha of the clock's hub. Default value is 1.0.
hubRadiusnumberThe width of the clock's hub. Default value is 3.0.

Graduation customizations:

Property nametypeDescription
accentGraduationModulonumberThe index modulo to accent graduations. Default is 5 (= every 5 graduations)
highGraduationWidthnumberThe width of the accented graduations (every accentGraduationModulo graduations). Default is 2.0.
smallGraduationWidthnumberThe width of the non accented graduations (every accentGraduationModulo graduations). Default is 1.0.
highGraduationLengthnumberThe length of the accented graduations (every accentGraduationModulo graduations). Default is 10.0.
smallGraduationLengthnumberThe length of the non accented graduations (every accentGraduationModulo graduations). Default is 5.0.

Note: graduations color property is not available but shares the same value as digitColor.

Next?

to add

  • [x] add => JS side defaultProps
  • [ ] add => digit font prop bridge

License

The MIT License (MIT)

Copyright (c) 2016 Erwan DATIN

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free