Как настроить deeplink (Custom Scheme) app:// в React Native без сторонних библиотек

В этой статье мы пошагово разберём, как настроить поддержку deeplink в React Native — без использования сторонних библиотек вроде React Navigation или polyfill.

Мы сфокусируемся на кастомных схемах app://, чтобы ваше приложение умело обрабатывать такие ссылки на iOS и Android.

Вы узнаете:

• как прописать схему в системных настройках Android и iOS;
• как в чистом React Native коде поймать и обработать входящую ссылку;
• как протестировать работу deeplink без лишних инструментов.

⚠ Важно:
В примерах ниже мы используем схему app:// для простоты,
но вам нужно придумать собственную уникальную схему, например myapp:// или superproject://.
Почему?
- Схема должна быть уникальной, чтобы не конфликтовать с другими приложениями.
- В имени схемы можно использовать только буквы (латиница, без пробелов и специальных символов).
- Например, myapp, superapp, mycompanyapp — допустимо;
my-app, my app, 123app — недопустимо.

Шаг 1. Настройка Android

Чтобы Android понимал, что ваше приложение может открывать ссылки с кастомной схемой app://, нужно прописать это в файле AndroidManifest.xml.

Что делаем:

1️⃣ Откройте файл: android/app/src/main/AndroidManifest.xml

2️⃣ Найдите внутри <activity> с MainActivity:

<activity
android:name=".MainActivity"
... >
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="app" />

• ✅ android:scheme="app" говорит системе ловить ссылки вида app://...
• ✅ VIEW + BROWSABLE позволяют открывать такие ссылки из браузеров и других приложений
• ✅ DEFAULT — для корректной регистрации интента

Шаг 2. Настройка iOS

Чтобы iOS понимала, что ваше приложение обрабатывает app:// ссылки, нужно прописать схему в Info.plist.

Откройте файл: ios/ИМЯВАШЕГОПРОЕКТА/Info.plist

Добавьте в конец (перед закрывающим </dict>), если блока ещё нет:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>app</string>
        </array>
    </dict>
</array>

• ✅ CFBundleURLSchemes регистрирует схему app, чтобы iOS знала: приложение можно вызывать через app://...

• ✅ После сборки (и установки на устройство или симулятор) система сможет передавать в приложение запущенные ссылки.

Шаг 3. Обработка deeplink в React Native

Теперь нужно настроить код приложения так, чтобы оно могло: - ✅ узнать, с какой ссылкой оно было запущено;
- ✅ слушать новые ссылки, если они приходят, пока приложение уже открыто.

Для этого используем встроенный модуль Linking из React Native.

Важно:

Этот код лучше размещать как можно ближе к началу приложения — например, в корневом компоненте App.
Это нужно, чтобы обработка deeplink сработала до того, как пользователь успеет увидеть интерфейс,
и приложение могло правильно инициализироваться (например, сразу открыть нужный экран).

Пример кода:

import React, { useEffect } from 'react';
import { View, Text, Linking } from 'react-native';

export default function App() {
  useEffect(() => {
    // Получаем URL, если приложение запущено по deeplink
    Linking.getInitialURL().then((url) => {
      if (url) {
        console.log('Приложение запущено с deeplink:', url);
        handleDeeplink(url);
      }
    });

    // Подписываемся на события, если deeplink приходит в уже запущенное приложение
    const subscription = Linking.addEventListener('url', (event) => {
      console.log('Пойман deeplink в запущенном приложении:', event.url);
      handleDeeplink(event.url);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  const handleDeeplink = (url) => {
    // Простая обработка ссылки
    if (url.startsWith('app://profile/')) {
      const id = url.replace('app://profile/', '');
      console.log('Открываем профиль с id:', id);
      // Здесь можно навигировать или обновлять state
    }
  };

  return (
    <View>
      <Text>Приложение с поддержкой deeplink (app://)</Text>
    </View>
  );
}

• ✅ getInitialURL() проверяет ссылку, с которой приложение было запущено
• ✅ Linking.addEventListener('url', ...) ловит новые ссылки, пока приложение работает
• ✅ handleDeeplink() — здесь ваша логика: например, парсинг и переход на нужный экран

Шаг 4. Тестирование deeplink

После того как вы настроили Android, iOS и React Native, нужно проверить, что всё работает.

---

✅ Тестирование на Android

Подключите устройство или откройте эмулятор.

В терминале выполните команду:

adb shell am start -W -a android.intent.action.VIEW -d "app://profile/123" имя.пакета.приложения

Если всё настроено правильно, приложение запустится (или поднимется из фона)

✅ Тестирование на iOS

На реальном устройстве или стимуляторе: 1. Откройте Safari. 2. В адресной строке введите:

app://profile/123

3. Нажмите Enter.

Если всё настроено, система предложит открыть приложение.

Шаг 5. Советы и расширения

После того как базовая настройка готова, вот несколько полезных рекомендаций, которые помогут сделать deeplink более мощным и удобным.

---

💡 Обработка сложных ссылок

Если ваши ссылки содержат параметры или query-строки, например:

app://product?id=123&ref=promo

Можно использовать стандартный парсер URL:

const urlObj = new URL(url);
console.log('Путь:', urlObj.pathname);
console.log('Параметры:', urlObj.searchParams.get('id'), urlObj.searchParams.get('ref'));

Это позволит вам легко вытаскивать нужные части.

✅ Заключение

Теперь вы умеете:

• настраивать app:// deeplink на Android и iOS;
• обрабатывать их в React Native без сторонних библиотек;
• тестировать и расширять логику.

ReactNative react-native