리액트 네이티브 라이브러리 (개인)

리액트 네이티브 프로젝트 생성 + 타입스크립트

npx react-native init myApp --template react-native-template-typescript

설치시 사이드 이펙트 있음 : (설치안하는 걸로 X)
: 타입 설치 필요한 경우(리액트 타입이 기본으로 설치되지 않아서 설치했다.)

yarn add -D @types/react  

styled-components

yarn add styled-components    
yarn add -D @types/styled-components 

import styled from 'styled-components/native' error시
yarn add -D @types/styled-components-react-native

Redux-saga(앱 규모가 커질것을 대비하여 적용)

yarn add redux-saga
yarn add -D @types/redux-saga

dependencies

yarn add redux 
yarn add @types/redux

yarn add react-redux
yarn add -D  @types/react-redux

 yarn add -D @redux-devtools/core 

 yarn add -D redux-logger 

createStore deprecated

yarn add @reduxjs/toolkit
import {configureStore} from '@reduxjs/toolkit'

react navigation + peer dependencies

yarn add @react-navigation/native

yarn add react-native-screens react-native-safe-area-context 

react navigation 안드로이드 셋팅
MainActivity.java 파일에 아래 코드 추가
android/app/src/main/java/your package name/MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}
// 아래문구를 해당파일 최 상단에 추가
import android.os.Bundle;

native-stack도 설치해준다.

yarn add @react-navigation/native-stack

bottom-tabs도 설치해준다.

yarn add @react-navigation/bottom-tabs

Xcode 오류 ::
nw_socket_handle_socket_event ::Socket SO_ERROR :: 61: Connection refused

xcode menu : product  ->   Scheme   ->    Edit  Scheme   
->  Run   ->  Arguments    ->  Environment Variable  
Name :  OS_ACTIVITY_MODE    ;    Value :  disable 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'airbnb',
    'prettier/react',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    "no-console": 0,
  },
};

.prettierrc.js

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: "all",
  printWidth: 80,
  arrowParens: "avoid",
};