MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

Overview

AwesomeClockView @mindinventory/React Native Awesome Clock Top Language @mindinventory/React Native Awesome Clock TypeScript @mindinventory/React Native Awesome Clock License IOS Android

MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects.

ezgif-5-e5f8a9e428

ezgif-5-120ce533d0

Installation

you can install the library using either yarn:

yarn add @mindinventory/react-native-awesome-clock

or npm:

npm install @mindinventory/react-native-awesome-clock

Implementation of AwesomeClockView in React Native

">
<AwesomeClockView
    circleSize={300}
    clockLinesHeightWidth={175}
    containerStyle={styles.containerStyle}
    minuteCircleStyles={styles.minuteCircleStyles}
    hourCircleStyle={styles.hourCircleStyle}
    countryZoneVisible={true}
    countryZoneName={'America/New_York'}
    hourCircleBackgroundColor="blue"
    secondCircleColor="grey"
    minuteCircleColor="blue"
    gradientLinesColor0="blue"
    gradientLinesColor1="blue"
    hourTextColor="white"
    minuteTextColor="blue"
/>

AwesomeClockView Props

Props Type Description
minuteCircleColor string to applying minute circle color
minuteTextColor string to applying minute text color
gradientLinesColor1 string to applying cut clock color for gradient mixture
gradientLinesColor0 string to applying cut clock color for gradient mixture
secondCircleColor string to applying second circle color
secondTextColor string to applying second text color
circleSize number to main circle size
minuteCircleStyles ViewStyle applying for minute circle style
hourCircleStyle ViewStyle applying for hour circle style
countryZoneName string to specified country wise clock
countryZoneVisible boolean to show/hide country clock name
hourCircleBackgroundColor string to applying background color for hour circle
hourTextColor number to applying hour text color
clockLinesHeightWidth number to applying clock line height and width in number
minuteCircleStyles ViewStyle to applying minute circle additional style
containerStyle ViewStyle to applying main container style

Guideline for contributors

To begin development, clone the project and check out the develop branch.

Create a new branch from develop for your assigned ticket with the format feature/my-ticket-#5 where my-ticket is a few words describing the feature and #5 is the Github issue number. Please make sure you have moved the ticket to the "In Progress" column in Github.

As you develop your feature, run the example app to test and debug your code.

Once your work is complete, verify that you have met all acceptance criteria on the ticket and have sufficient tests to cover the behavior. Then you may create a pull request back to the develop branch which will be reviewed and subsequently approved and merged.

Guideline to report an issue/feature request

It would be very helpful for us, if the reporter can share the below things to understand the root cause of the issue.

  • Library version.
  • Code snippet.
  • Logs if applicable.
  • Screenshot/video with steps to reproduce the issue.

LICENSE

AwesomeClockView is MIT-licensed.

Let us know

If you use our open-source libraries in your project, please make sure to credit us and Give a star to https://www.mindinventory.com

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.

app development
You might also like...
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

A light weight  and customisable content loader for react native apps, will work both on expo and init projects.
A light weight and customisable content loader for react native apps, will work both on expo and init projects.

Provide a placeholder at the place which need waiting for loading, Easy to implement and fun to use, this package is highly customizable, Please go th

Wraps SKStoreProductViewController for use in react-native projects
Wraps SKStoreProductViewController for use in react-native projects

ReactNativeStoreView Wraps SKStoreProductViewController to open items in the App Store from within react-native projects. NB: v2 and v3 require React

đŸ“ĸ A react native implementation of the package SCLAlertView-Swift
đŸ“ĸ A react native implementation of the package SCLAlertView-Swift

react-native-scl-alert A pure react native javascript implementation of the package https://github.com/vikmeup/SCLAlertView-Swift Road Map Documentati

🔎 React-Native package to decorate TextInput and get suggestions with good UX
🔎 React-Native package to decorate TextInput and get suggestions with good UX

react-native-suggester React-Native package to decorate TextInput and get suggestions with good UX How to use it ? import { SuggesterProvider, Suggest

react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList
react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

React Native TimeLine Theme Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList Get Started Inspired by react-nat

React Native Tip is a simple package inspired in MaterialUI-Tooltip
React Native Tip is a simple package inspired in MaterialUI-Tooltip

React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some important item in your app. It is useful to explain the user some funcionality.

This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard!

react-native-country-flag This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard! Install npm install

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
A react native android package to show a circle progress view

Circle progress view for react-native android A react native android module to show a circle progress view based on [Circle-Progress-View] (https://gi

null 16 Aug 7, 2019
A react native button component that can show progress.

react-native-progress-button A react native button component that can show progress. Installation $ npm install react-native-progress-button --save Us

null 17 May 13, 2021
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱

React Native <AwesomeButton /> react-native-really-awesome-button is a performant, extendable, production ready React Native component that renders an

Rafael Caferati 1.1k Sep 24, 2022
Awesome react-native cell components! From a Cell to more complex & awesome components.

RN Cell Components RN 0.60+ and up? Support for RN 0.60 is limited as the moment due to compatibility issues specially the deprecated ListView. Suppor

Jovanni Lo 174 May 17, 2022
đŸ–ŧī¸ A library to show colorful blurry placeholders while your content loads.

Blurhash ??ī¸ Give your users the loading experience they want. Install via npm: npm i react-native-blurhash npx pod-install BlurHash is a compact repr

Marc Rousavy 1.3k Sep 26, 2022
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | įŽ€äŊ“中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

null 133 Sep 20, 2022
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Sep 25, 2022
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Sep 28, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.3k Sep 21, 2022
:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

Ayoub Adib 111 Sep 2, 2022