Replace your old phone into a Digital Clock!

Features

• Landscape and portrait mode.
• Multiple fonts.
• Multiple colors.
• Battery indicator.
• English and Spanish languages.
• AM | PM and 24h formats.
• Keep the screen awake.

Installation

Download and install the libraries:

git clone https://github.com/gchumillas/clockodoro
cd clockodoro
yarn

And run the app into the iOS or Android simulators:

yarn iOS     # run the app in the iOS simualtor [OR]
yarn Android # run the app in the Android emulator

Once the app is installed into the simulator, you can start the Expo server and reopen the app to refresh it:

yarn start

Directory Structure

android -- Android app
ios     -- iOS app
assets  -- Images, icons, etc.
src     -- Source code files
  components -- Shareable components
    app      -- App specific components [1]
  intl       -- Translations
  layouts    -- Page layouts
  libs       -- Libraries
  pages      -- Pages [2]
  providers  -- Providers [3]
  store      -- Redux store
  App.js     -- Entry point

• [1] Some components can be reused in other applications, such as text fields, radio buttons, etc. And others don't. The src/components/app folder contains the components that are "app specific".
• [2] A "page" is a special type of component used to present "pages". These components are registered in the routing system (see App.js).
• [3] A "provider" is any function that sends or gets information from an asynchronous resource, such as the System Cache or an external API.

Relevant libraries

• @expo-google-fonts: Amazing list of Google Fonts ready to use from your React Native app.
• i18next and react-i18next: Easy to use internationalization library.
• react-native-svg: Add SVG support to your React Native projects.
• redux and react-redux: Popular library to manage global state variables.
• react-router-native: Add routing capabilities to your native app.
• expo-secure-store: Manage System Cache keys.
• expo-keep-awake: Keep your screen always awake.
• expo-battery: Obtain information about the battery.

Useful command lines

# compile the project to iOS or Android
yarn ios
yarn android

# run ESLint to detect style guide inconsistencies,
# syntax errors, or problematic patterns in the source code
yarn lint 

# run Expo server to start and debug the app
yarn start

Install a new font

1. Go to Google Fonts and choose a beautiful font.
2. For example, lets install Averia Libre:

   yarn add @expo-google-fonts/averia-libre

3. Edit the App.js file and include the font:

     import React from 'react'
     import { NativeRouter, Routes, Route } from 'react-router-native'
     import { Provider } from 'react-redux'
     import { useFonts } from 'expo-font'
   + import {
   +   AveriaLibre_400Regular as averiaLibre400Regular
   + } from '@expo-google-fonts/averia-libre'
     // more import libraries ...
   
     const AppLoader = () => {
       const [fontsLoaded] = useFonts({
         shareTechMono400Regular,
         frederickaTheGreat400Regular,
         nanumBrushScript400Regular,
         specialElite400Regular,
         play700Bold,
   +     averiaLibre400Regular
       })
       // more code ...

4. Edit the constants.js file and add the font:

    // ... code ...
     export const APP_FONTS = [
       'shareTechMono400Regular',
       'play700Bold',
       'frederickaTheGreat400Regular',
       'specialElite400Regular',
       'nanumBrushScript400Regular',
   +   'averiaLibre400Regular'
     ]

5. Compile and run the app into iOS or Andrid simulators:

   yarn ios     # compile and run into iOS [OR]
   yarn android # compile and run into Android

And that's all! Your beautiful font is now available from the app.