채널톡이 그 영향력을 상당히 넓히고있다.

앱에서도 호환성이 제법 훌륭해서 회사에서도

2개 서비스 연속으로 채널톡을 쓰고있다.

이 전에는 겪지 못했지만

이번에 빌드 관련해서 이슈를 겪어 문제를 기록

ipatool failed with an exception: #<CmdSpec::NonZeroExitException: 
$ /Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/python3 
/Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/bitcode-build-tool -v -t 
/Users/user/Desktop/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin -L 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks --sdk 
/Users/user/Desktop/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS15.2.sdk -o 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront 
--generate-dsym /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront.dSYM 
--strip-swift-symbols /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-in/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront

Status: pid 32693 exit 1
Stdout:
SDK path: /Users/user/Desktop/Xcode.app/Contents/Developer/Platforms

시뮬레이터로 실행할때는 문제가 없었지만

ADHOC 빌드를 할 때 위와같은 이슈가 발생했다.

이슈를 추적한 결과

원인

아직 뚜렷한 원인이 밝혀진것은 아니나,
Xcode 12 이상의 버전을 사용하려는 경우, 특정 프레임워크와의 외부 종속성 문제로
프로젝트에서 비트코드를 비활성화하는 것 같다고 함.
따라서, 비트코드가 YES로 되어있는경우 빌드 에러가 발생.

해결책

[xcode]
Turn off Bitcode in Targets > Build Settings > Enable Bitcode.

애니메이션 뷰는 정말 다양한 상황에

유용하게 쓰인다.

구현 방법 또한

상당히 간단해서 누구든 쉽게 구현할수있다.

import React, { ReactChild, useEffect, useState } from 'react';
import { Animated } from 'react-native';

export function FadeDownView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeLeftView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeRightView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeUpView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
     Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

이런식으로 상,화,좌,우 Fade In 효과를 만들 수 있다.

사용한다면 아래와 같이 쓸수 있을것이다.

function SampleView() {
  const [fire, setFire] = useState(false);
  
  return (
    <View>
    <TouchableOpacity onPress={() => { setFire(true); }}>
      <Text>Fire!!!</Text>
    </TouchableOpacity>
    
    {
      !!fire &&
      <FadeDownView duration={300}>
        <Text>위에서 아래로</Text>
      </FadeDownView>
    }
    </View>
  )
}

* What went wrong:
Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.yqritc:android-scalablevideoview:1.0.4.
     Searched in the following locations:
       - file:/Users/user/project/lll/node_modules/react-native/android/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - file:/Users/user/project/lll/node_modules/jsc-android/dist/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://repo.maven.apache.org/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://dl.google.com/dl/android/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://www.jitpack.io/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom

react-native-video 설치 후

빌드 과정에서 위 에러가 발생했다.

먼저, 설치방법

yarn add react-native-video

cd io && pod install && cd ..

npx react-native link react-native-video

위 에러 해결을 위한 단서는

https://github.com/react-native-video/react-native-video/issues/2454

https://stackoverflow.com/questions/68835157/error-when-trying-to-run-my-react-native-app-on-android/68841906#68841906

위 링크에서 확인할 수 있었다.

// android/build.gradle
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}

새 프로젝트를 시작하려 하니

내 개발환경에서 아래와 같은 이슈로

빌드에 실패하였다.

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8." in React Native

원인을 찾아보니

간단한 방법으로 해결할 수 있었다.

당연하게도 java version을 맞춰주는것이다.

먼저, 맥 사용자라면 아래의 가이드를

아니라면 직접  jdk 11 버전을 설치하자.

brew tap homebrew/cask-versions
brew install --cask zulu11

이제, 설치한 jdk를 적용해보자

nano ~/.zshrc
# export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

이전에 있던 1.8 버전은 주석처리하고

새 sdk를 지정한다.

그리고 저장.

이렇게만 하면

pc에 변경 사항이 반영되지않는다.

source ~/.zshrc

그리고 원래 실행중이던 터미널이 있다면

터미널을 새로 열고 빌드를 재 시도하면

정상적으로 진행될것이다.

npm run android

[업데이트]

확인 결과 .mm 기준으로

.m 레퍼런스 코드를 설정해서 작업해도

문제가 없음이 확인되었다.

아래의 내용은 꼭 필요했던 사람들만 확인 후 이용하길 바람

확인한 부분

- react-native-firebase/app react-native-firebase/analysis

// bash
npm i @react-native-firebase/app @react-native-firebase/analysis

// AppDelegate.mm, add
#import <Firebase.h>

[FIRApp configure];

// bash
cd ios && pod install && cd ..
npm run ios

[이전 내용]

react-native에서 새프로젝트를 만들면

AppDelegate.mm 파일이 생성되기 시작했다.

이전에는 AppDelegate.m이었다.

.m은 Object-C 기반

.mm은 Object-C ++ 기반

이라는 차이가 존재한다.

터보 모듈을 붙여 앱 성능 향상하는 것을 목적으로

RN쪽에서 업데이트한것으로 보인다.

다만, 개발자의 입장에서는

라이브러리들을 붙여야하는데

대부분의 현재 레퍼런스는

.m 기준으로 나타나있다.

따라서, .mm을 .m으로 변환해

프로젝트를 운영하고자 했다.

작업 순서

1. 기존의 .mm파일을 지움

2. .m 베이스 파일을 추가

3. .m 파일에 약간의 코드 변경

.m 파일에 약간의 코드 변경

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif


@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"여기는 앱 이름"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

1) 앱 이름 부분을 개인 설정에 맞게 넣어줄 것

2) Bridge 파트의 변경

<기존 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"  fallbackResource:nil];

<변경 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

해당 부분의 변경을 안해주면

No visible @interface for 'RCTBundleURLProvider' declares the selector 'jsBundleURLForBundleRoot:fallbackResource:'

라는 에러를 맞이하게 된다.

이전 포스팅

react-native-admob/admob 가이드 (2) - admob 설정

https://honeystorage.tistory.com/336

애드몹 관련 코드는

매우 간단하다.

각 플랫폼별, 광고 유형별 ID를 세팅해주고

load / show만 상황에 맞게 제어해주면 된다.

바로 코드를 살펴보자.

가벼운 스테이지형 게임 앱이며

특정 스테이지에 접근하려면 광고를 보여주는 상황을 가정해보자.

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

type Stage = {
  stage: number;
  hasAd: boolean;
}
const Stages: Stage[] = [
  {
    stage: 1,
    hasAd: false,
  },
  {
    stage: 2,
    hasAd: true,
  },
  {
    stage: 3,
    hasAd: false,
  }
];

function StageScreen({ navigation }: any) {
  const onEnterStage = (stage, hasAd) => {
    // has ad
    ...
    
    // no ad
    ...
  }
  
  return(
    <>
      { Stages.map((stage) => (
        <StageButton
          key={`curren-stage-${ stage.stage }`}
          stageNumber={ stage.stage }
          onEnter={() => {
            onEnterStage(stage.stage, stage.hasAd);
          }}
        />
      ))}
    </>
  );
}

const StageButton = ({ stageNumber, onEnter }: { stageNumber: number; onEnter: () => void; }) => {
  return (
    <TouchableOpacity onPress={onEnter}>
      <Text>Stage - { stageNumber }</Text>
    </TouchableOpacity>
  )
}

export default StageScreen;

간단히 코드를 구성해보면 이렇게 될것이다.

기본 React 코드에

광고를 보여주고, 로드하고 하는 코드만 덧 붙여주면

코드가 완성될것같다.

그럼 바로 추가해보자.

import { useInterstitialAd } from '@react-native-admob/admob';

function StageScreen({ navigation }: any) {
  const PLATFORM_FULLPAGE_AD_ID = Platform.select({
    ios: '???',
    android: '???',
  }) || '';
  
  const { adLoaded, adDismissed, show, load } = useInterstitialAd(PLATFORM_FULLPAGE_AD_ID);
  
  useEffect(() => {
    const userVisitedToAd = adLoaded && adDismissed;
    if (userVisitedToAd) {
      // stage save
      navigation.push('MyStage');
      
      // load new ad for next time
      load();
    }
    
  }, [adLoaded, adDismissed]);
  
  const onEnterStage = (stage, hasAd) => {
    if (hasAd && adLoaded && !adDismissed) {
      show();    
    } else {
      // stage save
      navigation.push('MyStage');
    }
  }
}

코드를 잠깐 살펴보자

이전의 코드에서  Stage를 클릭하면

onEnterStage가 호출됨을 알수있었다.

onEnterStage는

해당 Stage가 광고를 제공해야 하며(hasAd)

+ 로드되 광고가 있고(adLoaded)

+ 광고를 보여준적이 없는 상태일 때(!adDismissed)

사용자에게 광고를 보여주고

그렇지 않으면 바로 스테이지로 진입시킨다.

광고가 종료되면 adDismissed가 true로 바뀐다.

useEffect를 통해 해당 state의 변화를 감지해

사용자의 이전 기대 액션을 그대로 흘러가게 해준다.

(스테이지로 진입하는)

이때, 다음번 스테이지 진입때 광고를 보여주기위해

load를 미리 해둔다.

stage save는 각 환경에 맞게

글로벌 state나 storage에

현재 스테이지의 정보를 저장하라는 것이다.

개인적인 생각으로는

너무 많은 광고를 보여주면

스팸성 앱이 될수있다.

storage에 이전 광고 시점을 저장하여

다음 광고 시점을 20분뒤, 30분뒤

수준으로 조정하는것을 추천한다.

react-native 앱에 광고를 붙이기 위해

아래의 라이브러리를 사용하였다.

https://www.npmjs.com/package/@react-native-admob/admob

분명히 작업할때만 해도

deprecated상태가 아니었는데... 어느새 deprecated가 되었다

그렇다곤 해도

업데이트 지원을 더이상 안하는 것이지

사용 불가한 라이브러리는 아니다

Docs도 아직 지원한다.

https://react-native-admob.github.io/admob/docs/usage/banner

새로 변경된 라이브러리는

https://www.npmjs.com/package/react-native-google-mobile-ads

이것이다

일단,

react-native-admob/admob를 설치해보자

1. react-native-admob/admob 설치

npm install @react-native-admob/admob@1.5.1
or
yarn add @react-native-admob/admob@1.5.1

cd ios && pod install && cd ..

설치는 간단하게 끝났다.

admob에서 제일 중요한건

admob <-> 앱 연동 설정과, app-ads.txt 추가이다.

다음 포스팅에서 바로 알아보자.

다음 포스팅

react-native-admob/admob 가이드 (2) - admob 설정

https://honeystorage.tistory.com/336

이전 포스팅

react-native-iap 가이드(1) - 설치 및 설정

https://honeystorage.tistory.com/331

가이드 2 - 상품 생성

코드를 작성하기에 앞서

상품을 각 스토어에 생성해주어야한다.

작업은 매우 쉽다.

다만, 동일 상품이라면

각 스토어에 아이디를 동일하게 생성해주자.

이렇게 하면 관리 측면에서 더 유리할 것으로 보인다.

1. IOS

앱 내 구입으로 들어가 보면

쉽게 상품을 추가할 수 있다.

소모품 / 비소모품 / 자동 갱신 구독 / 비자동 갱신 구독

4가지 유형의 상품이 존재한다.

원하는 상품을 생성하면 되며

생성할 때에는 검수 통과를 위해

상품 관련 내용을 매우 상세하게 작성해야한다.

(상품명, 가입 기간, 가입 기간동안 제공되는 혜택 및 서비스, 가격 (혹은 단위당 가격), 청구 방식, 자동 구독 방식인 경우 최소 24시간전에 취소 하지 않으면 자동 구독 결제됨을 표기, 구독 해지 방법 안내, 구매 관련 개인보호 방책 링크 등)

검수는 한글로 넣어도 되지만

한글을 기본으로 줄바꿈하여
번역기를 돌린 영문도 넣어주면 금상첨화

2. android

안드로이드도 크게 다르지 않다.

인앱상품 / 정기 결제에 상품을 추가해주면 된다.

ios와 달리 검수를 위한 정보를 제공할 필요도 없다.

3. 플랫폼별 ID, 앱에 정의

각 플랫폼별로 상품을 다 추가했다면

다음 포스팅의 가이드를 따라서

각 플랫폼별 상품을 skus/subs로 나누어 추가해보도락 하자.

다음 포스팅

react-native-iap (3) - 코드 작성

https://honeystorage.tistory.com/332

cannot find symbol import android.support.v4.app.ActivityCompat;

react-native-iap를 설치하고

빌드하려보니 위의 에러가 나타났다.

검색결과

npx jetify
or
yarn jetify

위 두가지 명령어를 먼저

실행한 뒤

다시 빌드를 시도하면

정상적으로 진행되는 것을

확인할 수 있었다.

text-decoration: underline solid #8e8e93;