Developer Anchubby

This writing is continued article from previous one. This  article explains how to use setInterval function and Hooks to make mobile clock application with react native. 1. setInterval function setInterval is basic function included in JavaScript. It calls call-back function at every intervals (milliseconds). setInterval function returns id value, so when it is not used anymore, clearInterval should be used to prevent unnecessary memory use. const id = setInterval(callBackFunction, interval) callBackFunction = () => {} clearInterval(id) For the app to show the real time in every second unit, code will be as below. But below example calls setInterval function whenever App is newly rendered every second. setInterval  should be called only at the first time when rendered. For this kind of issue, useEffect hook is used. export default function App() { let time = new Date () const id = setInterval(() => { time = new Date () /...

For developing clock application with react native and typescript,  this writing explains how to use Fonts and Date class, which is embedded in Javascript. 1. How to use Fonts Make project to develop mobile clock application. Install CocoaPods during making project. $ npx @react-native-community/cli@latest init ClockTest react-native-template-typescript This application would use font, Major Mono Display. This font make the clock app look digital clock. Download font in this link:  https://fonts.google.com/specimen/Major+Mono+Display Download, unzip the font file, MajorMonoDisplay-Regular.ttf Make the directory src/assets/fonts and move the font file here. $ cd ClockTest $ mkdir -p src/assets/fonts -p option here means --parents and it make parent directories when needed. If it is already existing, no error. Make react-native.config.js file in the project root directory. Root directory means where package.json file is located. $ touch react-native.config.js M...