[Expo] Bare workflow template

nvm으로 Node.js 16 lts 설치

nvm install 16

 

Node.js 16 lts 사용 ( expo 명령어 사용시 )

// 현재 expo는 node.js 17미만의 버전만 지원한다. 
nvm use 16

 

expo 프로젝트 생성

expo init ch9_1

// 4번째 bare workflow 선택

 

 

Typescript 설정 파일 생성

tsconfig.json

 

Typescript 파일로 변경

App.js >> App.tsx

 

expo start 로, Typescript 필수 라이브러리 내려받기

expo start

 

설치 패키지 ( template 사용시 )

expo install react-native-gesture-handler react-native-paper faker@5.5.3 moment moment-with-locales-es6 react-native-localize react-native-keyboard-aware-scroll-view redux react-redux redux-thunk @react-native-async-storage/async-storage react-native-safe-area-context @react-native-masked-view/masked-view @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer

npm i -D @types/react-native-vector-icons @types/faker@5.5.3 @types/react-redux @types/redux-thunk

// react-native-community/masked-view 패키지가 이름이 바뀜

 

패키지 설치 ( 최신버전 )

// 패키지 설치
expo install react-native-gesture-handler react-native-reanimated  
expo install react-native-screens  
expo install expo-constants  
expo install expo-asset  
expo install expo-file-system  
expo install expo-updates  
expo install expo-camera  
expo install expo-contacts  
expo install expo-sensors  
expo install @react-native-async-storage/async-storage  
expo install @react-native-masked-view/masked-view  
expo install @react-navigation/native  
expo install @react-navigation/bottom-tabs  
expo install @react-navigation/stack  
expo install @react-navigation/drawer  
expo install faker@5.5.3  
expo install moment  
expo install moment-with-locales-es6  
expo install react-native-safe-area-context  
expo install react-native-keyboard-aware-scroll-view  
expo install react-native-vector-icons  
expo install react-native-localize  
expo install react-native-paper   
expo install @reduxjs/toolkit  
expo install react-redux  
expo install redux-logger  

// 타입 설치
npm i -D @types/faker@5.5.3  
npm i -D @types/react-native-vector-icons  
npm i -D @types/react-redux  
npm i -D @types/redux-logger

// mac user 패키지 링크
npx pod-install

 

react-native-reanimated 설정

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin']
  }
}

관련 링크 - https://docs.expo.dev/versions/latest/sdk/reanimated/

expo 바벨 초기화하며 실행

expo start --clear

 

---

template 미사용시 추가 설정

 

expo-camera 설정 ( android )

// build.gradle

import org.apache.tools.ant.taskdefs.condition.Os

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '31.0.0'
        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '21')
        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '31')
        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '31')
        if (findProperty('android.kotlinVersion')) {
            kotlinVersion = findProperty('android.kotlinVersion')
        }
        frescoVersion = findProperty('expo.frescoVersion') ?: '2.5.0'

        if (System.properties['os.arch'] == 'aarch64') {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = '24.0.8215888'
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = '21.4.7075529'
        }
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:7.0.4')
        classpath('com.facebook.react:react-native-gradle-plugin')
        classpath('de.undercouch:gradle-download-task:4.1.2')
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
        }
        maven {
            // Android JSC is installed from npm
            url(new File(['node', '--print', "require.resolve('jsc-android/package.json')"].execute(null, rootDir).text.trim(), '../dist'))
        }

        google()
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup 'com.facebook.react'
            }
        }
        maven { url 'https://www.jitpack.io' }
        
        // 카메라 허용
        maven {
            url "$rootDir/../node_modules/expo-camera/android/maven"
        }
    }
}

 

expo-camera 설정 ( ios )

// app.json

{
  "expo": {
    "name": "test",
    "slug": "test",
    "version": "1.0.0",
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to use the camera",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to use the microphone"
      }
    }
  }
}

관련 링크 - https://github.com/expo/expo/tree/main/packages/expo-camera