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:

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

or npm:

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

Implementation of AwesomeClockView in React Native

`javascript
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

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