평생 공부만 해야할듯

React Native에서 gif 로딩 이미지를 사용하려고 합니다.

iOS에서는 별다른 설정없이 Image 컴포넌트를 사용하여 gif 파일을 로드할 수 있는데요.

Android에서는 기본적으로 gif 파일을 지원하지 않기 때문에 별도의 모듈을 추가 해야 합니다.

# 소개

Fresco는 Android를 위해 이미지를 표시하는 강력한 시스템입니다.

메모리와 로컬 저장소를 사용하여 캐쉬처리를 하는것 외에도 많은 기능을 포함하고 있습니다.

https://fresco.recrack.com/

# 모듈 적용

공식 홈페이지에서 아래와 같은 선택적 모듈을 지원하고 있습니다.

https://reactnative.dev/docs/image#gif-and-webp-support-on-android

Android OS 4.0 (API Level 14) 이하 버전을 지원하는것과, WebP 지원여부에 따라 모듈을 추가하면 됩니다.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

제가 사용하는 프로젝트는 단순 gif를 로드하기 때문에 [implementation 'com.facebook.fresco:animated-gif:2.5.0']를 추가했습니다.

구글에서 search하여 다양한 글들이 나와있지만 fresco를 따로 추가한다거나 잘못된 방식이 많았습니다.

위와같이 한줄만 추가하여도 아래와같은 모듈들이 추가되어있으니 참고하면 됩니다.

이렇게 모듈을 추가하면 Android 업데이트를 해야하니 프로젝트 생성시 추가해주는것을 추천합니다.

ReactNative 환경에서 타사 라이브러리를 붙이려면 NativeModule로 작성해야 합니다.

타사에서 jni .so 라이브러리를 제공해서 load하는데 계속 아래와 같은 오류가 발생했습니다.

A/libc: Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 28002 (mqt_native_modu), pid 27506 (nativexxx)

이유를 알아본다면 Native Module이 javascript thread에서 실행되는곳이 문제가 되고 있는건데요.

ReactNative 0.55 Version부터 mgt_접두사가 붙인 MessageQueueThread를 사용하는데 0.55 이하버전에서 .so파일을 불러오는것은 문제가 되지 않지만 이상의 버전이라면 hermes를 사용하여야 합니다.

공식 홈페이지를 참고하여 hermes를 활성화 하면 정상적으로 so파일 load가 됩니다.

https://reactnative.dev/docs/hermes

React Native하면서 이런 이슈들이 많네요.

Flutter보다 이런 설정문제가 많다보니 유저들이 많이 떠나고 있는것 같습니다..

- 참고 -

https://stackoverflow.com/questions/49216063/what-is-mqt-native-modules-and-what-to-do-about-its-crashes

https://stackoverflow.com/questions/65418985/react-native-crashedthread-sigsegv-libjsc-so

이전 글에서는 Code Push 다중 배포 중 Android 설정에 대해서 알아보았습니다.

https://gigas-blog.tistory.com/276?category=1037450 

이번 글에서는 iOS 설정에 대해서 알아보겠습니다.

* React Native 0.60 이상을 기준으로 작성하였습니다. *

# iOS 설정

xcode 프로젝트를 열고 프로젝트 탐색기에서 Project를 선택합니다.

'Info' 탭에서 'Configurations' 항목의 '+'버튼을 클릭합니다.

'Duplicate "Release" Configuration' 을 선택하여 Staging(원하는)이름으로 변경해줍니다.

Staging 을 추가하였으니 Build Settings 탭으로 이동합니다.

'+' 버튼을 클릭하고 Add User-Defined Setting 을 선택합니다.

MULTI_DEPLOYMENT_CONFIG 항목을 생성하고 Release에는 '$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)', Staging에는 '$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)' 값을 넣어줍니다.

다시 '+' 버튼을 클릭하고 Add User-Defined Setting 을 선택합니다.

이번에는 CODEPUSH_KEY 항목을 추가하고 Release에는 Production DeploymentKey를, Staging에는 Staging DeploymentKey 값을 넣어줍니다.

마지막으로 info.plist파일을 열고 기존에 작성했던 CodePushDeploymentKey 항목의 값을 '$(CODEPUSH_KEY)' 로 변경하여 줍니다.

기존에 CodePush 설정이 되어있지 않았다면 해당 항목은 없으니 새로 추가하면 됩니다.

이제 Scheme 설정에서 원하는 모드로 빌드를 진행할 수 있습니다.

기본 debug 모드에서는 배포키가 없으며, 배포시 release, staging모드로 각 모드에 맞는 배포키로  빌드할 수 있습니다.

Release, Staging 말고도 원하는대로 커스텀이 가능하며, 용도에 맞는 모드로 배포해보세요.

이전 글에 CodePush 설정을하여 실시간 배포를 진행해봤습니다.

https://gigas-blog.tistory.com/270?category=1037450 

하지만 테스터에게 제공할 때에도 실시간 배포가 되야하는데요.

Production 이나 Staging 하나로 배포 키가 고정되어 있다면 매번 앱을 다시 빌드해야할겁니다.

AppCenter에서는 Staging으로 테스터에게 배포하고 문제가 없다면 Production으로 배포하는걸 권장하고 있죠.

이번 글에서 위의 상황에 맞게 배포할 수 있도록 다중 배포 키를 등록하도록 하겠습니다.

* React Native 0.60 이상을 기준으로 작성하였습니다. *

# Android 설정

app 수준의 build.gradle 파일을 열어줍니다.

android { buildTypes {} } 위치를 찾아 빌드 유형에 대한 항목을 정의합니다.

resValue에 각 항목에 맞는 배포 키를 넣어줍니다.

Staging은 명명규칙때문에 releaseStaging으로 작성해줍니다.

그냥 staging으로 작성한다면 Bundle 생성시 buildTypes에서 보여지지 않습니다.

android {
    ...
    buildTypes {
        debug {
            ...
            // Note: CodePush updates shouldn't be tested in Debug mode as they're overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            resValue "string", "CodePushDeploymentKey", '""'
            ...
        }
        releaseStaging {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'
            // Note: It's a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues
            // Add the following line if not already there
            matchingFallbacks = ['release']
            ...
        }
        release {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}

# Android 에서 hermes를 사용하고 있다면 staging빌드시 충돌로 앱이 종료됩니다 #

# 아래처럼 releaseStagingImplementation 라인을 추가해줘야 정상적으로 앱이 실행됩니다. #

if (enableHermes) {
    ...
    releaseStagingImplementation files(hermesPath + "hermes-release.aar")
} else {
    implementation jscFlavor
}

기존에 작성했던 strings.xml에서 작성했던 'CodePushDeploymentKey' 항목은 제거해줍니다.

기존에 CodePush 설정이 되어있지 않았다면 해당 항목은 없으니 패스해도 됩니다.

잘 따라 오셨다면 build.gradle에서 'Sync Now'를 클릭해 줍니다.

정상적으로 Sync가 되었다면 상단 메뉴 'Build'항목에서 'Generate Signed Bundle / APK...'메뉴를 클릭합니다.

서명을 하고 다음으로 넘어가면 정상적으로 releaseStaging 타입이 생긴것을 확인할 수 있습니다.

기본 debug 모드에서는 배포키가 없으며, 배포시 release, staging모드로 각 모드에 맞는 배포키로  빌드할 수 있습니다.

Release, Staging 말고도 원하는대로 커스텀이 가능하며, 용도에 맞는 모드로 배포해보세요.

공식 홈페이지 입니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-get-started

CodePush 를 사용하기 위해 아래의 명령어를 입력하여 의존성을 추가합니다.

ReactNative 루트 경로에서 아래와 같은 명령어를 입력합니다.

npm install --save react-native-code-push

1. settings.gradle 설정

android/settings.gradle 파일에 다음과 같이 추가 합니다.

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

아래의 위치에 추가를 진행합니다.

2. build.gradle 설정

android/app/build.gradle 파일에 다음과 같이 추가 합니다.

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

아래의 위치에 추가를 진행합니다.

3. MainApplication.java 설정

ReactNativeHost getJSBundleFile 메서드를 Override하여 아래처럼 작성해줍니다.

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4. strings.xml 설정

CodePushDeploymentKey 값을 추가하여 배포 키를 추가 합니다.

Staging, Production 키를 넣으면 됩니다.

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

AppCenter의 Analytics와 Crashes를 사용하면 아래처럼 추가하면 됩니다.

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

이와같은 설정으로 CodePush를 사용할 수 있는 기본적인 설정이 되었습니다.