0.1.2 • Published 2 years ago

@mindinventory/react-native-awesome-clock v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

AwesomeClockView npm.io @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

PropsTypeDescription
minuteCircleColorstringto applying minute circle color
minuteTextColorstringto applying minute text color
gradientLinesColor1stringto applying cut clock color for gradient mixture
gradientLinesColor0stringto applying cut clock color for gradient mixture
secondCircleColorstringto applying second circle color
secondTextColorstringto applying second text color
circleSizenumberto main circle size
minuteCircleStylesViewStyleapplying for minute circle style
hourCircleStyleViewStyleapplying for hour circle style
countryZoneNamestringto specified country wise clock
countryZoneVisiblebooleanto show/hide country clock name
hourCircleBackgroundColorstringto applying background color for hour circle
hourTextColornumberto applying hour text color
clockLinesHeightWidthnumberto applying clock line height and width in number
minuteCircleStylesViewStyleto applying minute circle additional style
containerStyleViewStyleto 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