에러상황

[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, 
which does not define modules. To opt into those targets generating module maps 
(which is necessary to import them from Swift when building as static libraries), 

you may set `use_modular_headers!` globally in your Podfile, 
or specify `:modular_headers => true` for particular dependencies.

새프로젝트에서 위 같은 에러가 발생했다.

use_frameworks를 주석처리하니

dyld: Library not loaded
...

이와 같은 실행 오류가 발생했다.

많은 시행착오를 걸쳐 발견한 해결법은 아래와 같다

해결책

0) react-native version
version >= 0.70 인 경우 < 0.7 로 변경 (ex 0.65)

1) 맥 os 기분, 아래 경로에서 프로젝트 폴더 제거

/Library/Developer/Xcode/DerivedData

2) Podfile 확인/수정

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

use_frameworks! :linkage => :static

platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false

target 'myapp' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'myappTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  # use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

3) pod 갱신

Podfile.lock 제거
Pods 폴더 제거

pod install

4) 실행 및 확인

npm run ios

Cocoapods version 1.9+ allows linking of Swift static libraries, add the following command to your Podfile:

use_frameworks! :linkage => :static

전체 코드르 확인

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

use_frameworks! :linkage => :static

platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false

target 'testApp' do
 
end

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

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

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-admob/admob 가이드 (1) - 설치 및 설정

https://honeystorage.tistory.com/335

admob 적용을 위해서는

세가지 설정이 필요하다.

1. admob 설정

2. app-ads.txt 추가

3. 기타 (admob id관련 환경설정)

하나씩 따라가보자

어려운건 없다.

1. admob 설정

https://admob.google.com/

메뉴 중

앱 > 앱 추가

를 통해 플레이스토/앱스토어에 등록된(혹은 등록중인) 앱을

추가 할 수 있다.

아직 출시 전이라도 미리 등록해둔 뒤

나중에 연동할 수 있으니 등록을 진행하자.

2. app.ads.txt

설명을 보고

무슨 가이드에 따라서 만들고 등록 하고....

벙쪘었지만 사실은 매우 간단한

작업이었다.

궁시렁 궁시렁 글이 글지만

아래의 단계를 따라보자.

1. 운영중인 홈페이지가 있다.

-> https://domain/app-ads.txt 경로에 위의 코드 스니펫 복사해서 return하게 설정

2. 운영중인 홈페이지가 없다.

-> 구글 블로그의 app-ads.txt 기능을 이용해 위의 코드 스니펫 return하도록 설정

여기서 말하는 홈페이지는

앱스토어의 "앱 버전 > 지원 URL"
플레이스토어의 "스토어 설정 > 웹사이트"

에 해당한다. 도메인이 위 두 URL과 반드시 일치해야한다.

예를들어,

내가 등록한 도메인이

https://tistory.com 이라면

https://tistory.com/app-ads.txt에 접속했을때 

복사했던 코드 스니펫이 화면에 Text로 나타나야한다.

다만, 제공된 코드 스니펫만 추가하고 끝낼경우

내보낼 광고가 없어 광고가 뜨지않는 경우가 발생할 수 있다.

미디에이션 > 미디에이션 그룹 만들기에서

미디에이션을 만들고, 광고사와 제휴에 추가적으로

코드 스니펫을 획득할 수 있다.

광고사에서는

회사명/이메일/예상 광고수 등을 수집해간다.

정보를 제공하고나면 코드 스니펫을 제공해주며,

심사를 통해 제휴를 맺게된다.

제공 받은 코드 스니펫은 app-ads.txt에 추가해주면 된다.

3. ID관련 환경설정

ios, aos 모두 ID를 셋팅해주어야한다.

간단히 코드 몇줄 추가해주면된다.

아래를 보자.

// androidManifest.xml

<application
...
>
  <!-- admob -->
  <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-???~???"/>
  
  ...
</application>

// info.plist
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-???~???</string>

각 플랫폼의 App ID는

애드몹 좌측 메뉴 목록에서

"앱 (선택) > 앱 설정 > 앱 ID"에 나타나 있다.

4. 마지막, 광고 유형 추가

각각 목적에 맞게 앱 유형을 추가해주면되는데,

애드몹 좌측 메뉴 목록에서

"앱 (선택) > 광고 단위 > 광고 단위 추가"

를 통해 진행할 수 있다.

추가하고 나면 광고 단위별 광고ID (AD-ID)를 획득할 수 있는데

이를 코드상에 추가해주어야한다.

다음 포스팅을 통해 코드를 작성해보자.

다음 포스팅

react-native-admob/admob 가이드 (3) - 코드 작성

https://honeystorage.tistory.com/337

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