Developer Anchubby

  This writing is about how I make some logic to show the correct hint in Sudoku after watching Google AdMob rewarded ads. The project is based on expo bare project with package, react-native-google-mobile-ads. This project was based on below environment. Expo bare project ( npx expo prebuild ) with template TypeScript. expo: 54.0.23 react-native: 0.81.5 react-native-google-mobile-ads: 16.0.0 What I was trying to achieve is that in the hint modal, if I touch the WATCH AD button, it shows rewarded ads from Google AdMob. After watching it, hint modal should be closed automatically and 1 hidden sudoku number should appear in random as a reward. The first challenge that I encounter was that the reward action was not carried out at the first ads watch. From the second ads watch reward action was carried out well, but not the first one. After several trial and error I found that it was because when reward action function was called it referred old status of the function so first reward w...

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