Developer Anchubby

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

For developing mobile application like Instagram with react native and typescript,  this writing explains how to use moment package and make a basic styling. This article is continued one from previous article. 1. Preparation Make a project and install CocoaPods. $ npx @react-native-community/cli@latest init InstaTest react-native-template-typescript Install following packages. $ cd InstaTest $ npm i --save-dev @types/react-native $ npm i --save-dev @faker-js/faker $ npm i react-native-paper $ npm i react-native-safe-area-context $ npm i moment $ cd ios $ npx pod-install $ cd .. react-native-paper, react-native-safe-area-context is for MD3Colors object, which will be used for color in app. moment package is for showing time in app. npx pod-install is for linking the package to iOS. Copy the previous fake data to current project directory. $ cp -r ../FakerTest/src . 2. Making component for fake data Make Person.tsx and Person.style.ts in src/copy. This Person componen...

For developing mobile application like Instagram with react native and typescript,  this writing explains how to configure fake data for development purpose. 1. Set up for iOS and android Follow the guideline in  https://reactnative.dev/docs/set-up-your-environment 2. Create react native project and make App.tsx npx @react-native-community/cli@latest init ProjectName Template $ npx @react-native-community/cli@latest init FakerTest react-native-template-typescript During creating project you will see whether to install CocoaPods. Enter y to install. ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing dependencies ✔ Do you want to install CocoaPods now? Needed for running iOS project … yes ⠇ Installing Ruby Gems If you didn't install it, don't worry. You can install CocoaPods later as below. CocoaPods is needed for iOS development. $ cd ios $ rm -rf Pods Podfile.lock $ pod install --repo-update Make App.tsx as below. This is minimal c...