TypeScript Project 준비

 

 

react native cli

npx react-native init RealApp --tamplate react-native-template-typescript@6.12.6

 

ios의 경우

podfile -> hermes_enabled :false 로 변경 후 pod install

Android

android>app>build.gradle 에서 enabledHermes: false

 

xcode 에서 bundle identifier 셋팅 

 

Android도 

android > app > src > java > com > RealApp > MainActivity.java 에서 맨 위

package 를 vscode 전체 찾기 변경(replace)해서  ios 와 동일하게 변경

 

터미널 두개로 확인

한개는 Metro 확인용 yarn run start

다른 한개는 앱 빌드용 yarn run ios yarn run android

 

VSCODE : ESLint와 Prettier - Code formatter 익스텐션 설치

 

Firebase 설치

yarn add @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore

 

Firebase에 각 앱 등록 아래 Setup 확인 후 적용

https://rnfirebase.io/

React Native Firebase | React Native Firebase

 

Navigation 활용을 위한 셋팅

https://reactnavigation.org/docs/getting-started

React Navigation

yarn add @react-navigation/native yarn add react-native-screens react-native-safe-area-context

yarn add @react-navigation/native-stack

 

 

-------------------------

기존 자료

 

expo로 typescript 템플릿 생성

npx create-expo-app -t expo-template-blank-typescript

npm install --save @react-navigation/native @react-navigation/native-stack
npm install --save react-native-screens react-native-safe-area-context

 

 

eslint

npm install --save-dev eslint

npx eslint --init