config 수정

// config/config.json

{
  "mode": "development",
  "appsflyer_dev_key": "X123456",
  "store_app_id": "6743146191"
}

AppsFlyer init

// src/utils/appsflyer.ts

import {Platform} from 'react-native';
import appsFlyer from 'react-native-appsflyer';

import config from '@config';

appsFlyer.initSdk(
  {
    devKey: config.appsflyer_dev_key,
    isDebug: config.mode === 'development',
    appId: Platform.OS === 'ios' ? config.store_app_id : undefined,
    onInstallConversionDataListener: false,
    onDeepLinkListener: true, //Optional
    timeToWaitForATTUserAuthorization: 10, //for iOS 14.5
  },
  () => {
    console.log('AppsFlyer initSdk success');
  },
  error => {
    console.log('AppsFlyer initSdk error', error);
  },
);

// index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

import './src/utils/appsflyer'; // add this

AppRegistry.registerComponent(appName, () => App);

AppsFlyer hook

// src/hoos/useDeepLink.ts

import {useCallback, useEffect} from 'react';
import appsFlyer from 'react-native-appsflyer';
import {useNavigation} from '@react-navigation/native';
import {Linking} from 'react-native';

const useDeepLink = () => {
  const navigation = useNavigation();

  const navigateToDeepLink = useCallback(
    (status: 'FOUND' | 'NOT_FOUND' | 'Error', value: string) => {
      // 딥 링크 없는 경우 종료
      if (status === 'FOUND') {
        const [type, id] = value.split('/');

        switch (type) {
          case 'dl':
            navigation.navigate('DeepLink', {
              id,
            });
            break;
          default:
            break;
        }
      }
    },
    [navigation],
  );

  // 앱이 실행 중인 상태에서 딥링크를 클릭했을 때
  useEffect(() => {
    appsFlyer.onDeepLink(result => {
      navigateToDeepLink(result.deepLinkStatus, result.data.deep_link_value);
    });

    appsFlyer.startSdk();

    return (): void => {
      appsFlyer.stop(true);
    };
  }, [navigateToDeepLink]);

  // 앱이 종료된 상태에서 딥링크를 클릭했을 때
  useEffect((): void => {
    Linking.getInitialURL().then(url => {
      if (url) {
        // 딥링크 수동으로 연결 - https://dev.appsflyer.com/hc/docs/android-sdk-reference-appsflyerlib#performonappattribution
        appsFlyer.performOnAppAttribution(
          url,
          () => null,
          () => null,
        );
      }
    });
  }, []);
};

export default useDeepLink;

InApp을 따로 분리한 이유는 NavigationContainer 컴포넌트 안에 네비게이션 hook을 사용해야 하기 때문입니다.

// src/App.tsx

import useDeepLink from '@hooks/useDeepLink';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import DeepLinkScreen from '@screens/DeepLink';
import HomeScreen from '@screens/Home';
import {RootStackNavigatorTypes} from '@typings/navigation';
import {navigationLinking} from '@utils/consts';

const RootStack = createNativeStackNavigator<RootStackNavigatorTypes>();

function App() {
  return (
    <NavigationContainer linking={navigationLinking}>
      <InApp />
    </NavigationContainer>
  );
}

export default App;

function InApp() {
  useDeepLink();

  return (
    <RootStack.Navigator initialRouteName="Home">
      <RootStack.Screen name="Home" component={HomeScreen} />
      <RootStack.Screen name="DeepLink" component={DeepLinkScreen} />
    </RootStack.Navigator>
  );
}

최종코드

https://github.com/qnrjs42/appsflyer_deep_link_app

노션링크

react native appsflyer deep link 완벽 가이드 - 초기 설정 (1)
react native appsflyer deep link 완벽 가이드 - SDK 설치 (2)
react native appsflyer deep link 완벽 가이드 - OneLink (3)
react native appsflyer deep link 완벽 가이드 - 코드 (4) - 현재