🕑 React Native customisable clocks built with @shopify/react-native-skia.

Overview

React Native Clocks 🕑

React Native customisable clocks built with @shopify/react-native-skia

React Native Clocks

Installation

yarn add react-native-clocks
yarn add @shopify/react-native-skia

Usage

Analog:

import { Clock } from 'react-native-clocks';

// ...

export default function App() {
  return <Clock />;
}

Digital:

import { DigitalClock } from 'react-native-clocks';

// ...

export default function App() {
  return <DigitalClock />;
}

Take a look to the example folder where there are different examples of the clock's theming usage .

Library Under Construction 🚧

This library is still under construction, more customisable elements for the clocks are coming soon.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

You might also like...
Ziliun article reader android app built with React Native
Ziliun article reader android app built with React Native

Ziliun React Native Ziliun article reader app built with React Native Update 1.1 Pull To Refresh Parallax View Network Error handler File size trimmed

Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.

Lyrics King A React Native native app utilising Expo, React Navigation and fetching data from multiple API's (Deezer and Lyrics.OVH). UI built with Ad

A Hacker News Reader built in React Native for iOS and Android
A Hacker News Reader built in React Native for iOS and Android

HackerBuzz-ReactNative Over the past few months, I've been working on a side project to gain an understanding of the React Native workflow. I decided

An unofficial basic implementation of the BBC News app built using React Native
An unofficial basic implementation of the BBC News app built using React Native

Unofficial BBC News App in React Native A basic implementation of the BBC News app built using React Native, the project helped with understanding how

App to manage the products of the FastBuy Store (built with React Native and Redux).
App to manage the products of the FastBuy Store (built with React Native and Redux).

Click to view a video demonstration Requirements Mandatory MacOS. Xcode and Android Studio. Homebrew. Node, Watchman and React Native. Optional Atom,

📺 A news app using YouTube playlists, built with React Native
📺 A news app using YouTube playlists, built with React Native

NewsWatch-React-Native A YouTube News app for iOS, made with React-Native. Enjoy watching your daily news. Screencast: This project was bootstrapped w

 An unofficial NearbyLive app client for Android and iOS, built in React Native
An unofficial NearbyLive app client for Android and iOS, built in React Native

Basic Overview An iOS and Android client for http://wnmlive.com/ written in React Native with Redux. Screenshots Existing functionalities Authenticati

Short-term memory training game (mobile). Built with React Native and Redux.
Short-term memory training game (mobile). Built with React Native and Redux.

sequent Short-term memory training game. Remember the sequential order of numbers displaying on your screen. Free, no ads, open source. Created in Rea

A GitHub Jobs Search App built in React Native for iOS and Android
A GitHub Jobs Search App built in React Native for iOS and Android

GitHub Jobs React Native A GitHub Jobs Search App built in React Native for iOS and Android Setup Follow react native getting started guide : https://

Releases(v0.1.0)
  • v0.1.0(Sep 25, 2022)

    • docs(readme): updating demo image (831cece)
    • Merge pull request #2 from mateoguzmana/feat/clock-theming-examples (93f8a01)
    • docs(readme): adding examples folder link to readme (43af95f)
    • feat(example): adding background images to the examples (f2a9385)
    • feat(example): getting clock example title from the route params (f699145)
    • fix(clock): fixing scaling and adding pressable option properly (40159b1)
    • feat(examples): adding navigation to open clock examples full screen (6ad7b31)
    • Merge pull request #1 from mateoguzmana/feat/clock-theming (c0e4305)
    • feat(theming): adding 9 different themes (052f60a)
    • feat(examples): adding different theming examples (b7ef387)
    • feat(theming): adding theming option to the clock (3505a5c)
    • fix(digital): adding a better padding for the digital clock (bd27264)
    • fix(digital): fixing position of the digital text (78939e4)
    Source code(tar.gz)
    Source code(zip)
  • v0.0.2(Sep 18, 2022)

  • v0.0.1(Sep 18, 2022)

    • fix(clock): removing invalid prop (c80e332)
    • chore(config): removing release plugins (ba7a320)
    • feat(digital): adding extra configuration for digital clock (f95590a)
    • docs(readme): removing demo animation (7155116)
    • feat(clock): adding different clock shapes and more custom props (53e8537)
    • docs(readme): adding link to skia (63298c6)
    • docs(demo): adding demo to readme (16a5b79)
    • docs(readme): adding under construction docs (a11171e)
    • chore(readme): updating readme docs (2b0532a)
    • chore(name): renaming library (e449ca2)
    • feat(github): adding templates and workflows copied from fiesta (3080754)
    • chore(code-of-conduct): separating code of conduct to a different file (195fcd5)
    • chore(refactor): removing non-needed fragments (9f69f6f)
    • feat(digital-clock): calculating text width to define the width of canvas (d188698)
    • fix(digital): adjusting properties for the digital clock (b8a1b56)
    • chore(props): allowing passing some props to the components (223a0b7)
    • fix(clock): adjusting math for the numbers position calc (d07136e)
    • fix(clock): adjusting values for clock numbers (d5bdbd8)
    • feat(clock): adding better positon for numbers in the clock (570a5ce)
    • feat(clock): wip with numbers inside the clock (6f7b5ff)
    • fix(digital-clock): fixing digital clock not updating (66c6ac7)
    • feat(digital-clock): creating a different component for the digital clock (b3f512e)
    • feat(clock): adding font and time in font (4792552)
    • feat(clock): adding correct logic for the clock time calculation (2c6793c)
    • feat(clock): adding initial logic for the clock base and handles (80392d5)
    • chore(web): removing web folders (7b73049)
    • feat(clock): initial clock wip (6bede28)
    • chore(expo): upgrading expo sdk (e170d5b)
    • chore(deps): adding skia (a688beb)
    • chore(lib): initial library configuration (41e92c5)
    Source code(tar.gz)
    Source code(zip)
Owner
Mateo Guzmán
Mateo Guzmán
🦁 🃏 📱 An animal matching puzzle card game– built with turn-based game engine boardgame.io and React-Native + React-Native-Web

Matchimals.fun an animal matching puzzle card game ?? ?? ?? Download for iOS from the App Store ?? Download for Android from the Google Play Store ??

iGravity Studios 137 Nov 24, 2022
Anwer Solangi 18 Dec 8, 2022
A simply readable Hacker News app for iOS & Android, built with React Native. V2 now over here https://github.com/cheeaun/hackerweb-native-2

HackerWeb A simply readable Hacker News app for iOS and Android. Read about the story here: Building HackerWeb for iOS. Preview iOS Android Developmen

Lim Chee Aun 178 Nov 21, 2022
🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation.

?? Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation.

Batyr 22 Dec 14, 2022
Dribbble app built with React Native

Would you like to support me? ###Dribbble app built with React Native A Dribbble app build with React Native. ####Preview Updated version Plugins used

Catalin Miron 2k Dec 29, 2022
A simple weather app built with React Native and Realm

React Weather A simple weather app built with React Native Inspiration I wanted to learn how to make apps using React Native. Instead of inventing an

Sam Ilic 890 Nov 4, 2022
:camera: Point your camera at things to learn how to say them in a different language. Android app built with React Native.

What the Thing ? Point camera at things to learn how to say them in a different language. Native Android App built with React Native. Made it as a par

Vignesh M 535 Nov 27, 2022
An unofficial Pixiv app client for Android and iOS, built with React Native.

PxView Unofficial Pixiv app client for Android and iOS, built with React Native. Screenshots Features Bottom navigation Ranking Enjoy the latest popul

null 652 Dec 31, 2022
A developer-focused Meetup clone built with React Native

Assemblies Where Developers Connect Assemblies is an open-source mobile app built with React Native which developers can use to connect through 'assem

Build React Native 360 Dec 7, 2022
DuckDuckGo App built in React-Native (Unofficial)

DuckDuckGo Unofficial DuckDuckGo app built in React Native Note: This is not the official DuckDuckGo App but a Fan-made. I made it only for Learning p

Kuldeep 318 Nov 10, 2022