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...

   For developing mobile application like Instagram with react native and typescript,  this writing explains how to use React Native Icons. This article is continued one from previous article. 1. Install and set up for icons Refer to official document for icons:  https://github.com/oblador/react-native-vector-icons/tree/10.x?tab=readme-ov-file Install following packages and link it to CocoaPod. $ cd InstaTest $ npm i react-native-vector-icons $ npm i -D @types/react-native-vector-icons $ cd ios $ npx pod-install $ cd .. If your Metro server is running, you need to escape from it first by ctrl + c. When Metro is running, packages are locked so other package cannot be added. Set up for iOS : Edit the ios/projectName/Info.plist Below <key>UIAppFonts</key> should be added. ios/InstaTest/Info.plist ... < key > UIViewControllerBasedStatusBarAppearance < /key> < false /> < key > UIAppFonts < /key> < ...

  For developing mobile application like Instagram with react native and typescript,  this writing explains how to use Reusable component. This article is continued one from previous article. 1. Reusable component Reusable component can be used for various case and code several times again and again. When it is used again, change style a little bit depending on case. It is very useful for similar style but same pattern usage and also for code maintenance. The basic structure is as below. import type {FC, ReactNode} from 'react' ; type SomeComponentProps = { children ?: ReactNode } export const SomeComponent : FC < SomeComponentProps > = ({children}) => { return < View > {children} < /View> } ReactNode is any type which can be rendered in React. For example it can be string, JSX, array, number, null etc. children is child element in component tag. This component can be used again and again by changing this children when it i...