@setpartnerstv/react-native-gpbonus-sdk

О проекте

Данный проект позволит вам встроить виджет Газпром Бонус в ваше приложение с использованием React Native (newArch поддерживатся).

Минимальные требования

• react native version 0.77.3

• react-native-webview 13.16.0

• iOS minimum version 16.0

• Android minimum version 10.0 (интеграция возможно и на более старых версиях, но стабильная работа не гарантируется)

How to

Загрузка библиотеки

Интегрировать SDK в свой проект вы можете напрямую из этого репозитория или с использованием yarn / npm.

cd my-project
npm install git+https://github.com/SetPartnerstv/reactnative-sdk.git

или

cd my-project
npm i @setpartnerstv/react-native-gpbonus-sdk
либо
yarn add @setpartnerstv/react-native-gpbonus-sdk

Если в основном проекте не используются библиотека 'react-native-webview', то для корректной работы авто линковки необходимо добавить файл react-native.config.js

module.exports = {
  dependencies: {
    'react-native-webview': {},
  },
};

Demo приложение

В данном репозитории в папке example находится пример работы с SDK в формате отдельного react native приложения. Примеры встраивания кода можете посмотреть в demo проекте.

Поддержка вариантов отображения

В demo режиме можно посмотреть 2 варианта открытия виджета: полноэкранное открытие и открытие внутри окна хост-приложения (вашего приложения).

Usage

Т.к. @setpartnerstv/react-native-gpbonus-sdk является расширением React Native webview, вы можете использовать Webview props, например :

    <RNGPBonus
        ...
        webviewDebuggingEnabled={true}
        ...
    />

1. Import react-native-gpbonus-sdk:

import import RNGPBonus from '@setpartnerstv/react-native-gpbonus-sdk';

2. Добавьте <RNGPBonus> компонент как модальное окно:

        <Modal
          transparent={true}
          animationType={'none'}
          visible={isVisible}
          onRequestClose={() => {
            onWidgetModalClose();
          }}>
          <View style={styles.centeredModalView}>
            <RNGPBonus
              ref={gpbWidgetFullRef}
              widgetUrl={url}
              token={token}
              checkExternalUrl={false}
              onWidgetClose={onWidgetModalClose}
            />
          </View>
        </Modal>

либо основной компонент обычного экрана

          <View style={styles.widgetContainerWebview}>
            <RNGPBonus
              ref={gpbWidgetRef}
              widgetUrl={url}
              token={token}
              checkExternalUrl={false}
              onWidgetClose={onWidgetClose}
            />
          </View>

3. Для Андроид поддерживается обработка BackHandler, пример использования можно посмотрить в Demo приложении (example)

4. Для корректной работы открытия внешних ссылок в Андроид, необходимо либо добавить поддержку проверки в хост-приложение,

    // Targeting Android 11 (SDK 30) requires you to update your AndroidManifest.xml and include a list of applications you're querying
    // <queries>
    //     <intent>
    //         <action android:name="android.intent.action.VIEW" />
    //         <data android:scheme="https" android:host="*" />
    //     </intent>
    // </queries>

либо отключить проверку

<RNGPBonus
    ...
    checkExternalUrl={false}
    ...
/>

Available props

| Name | Type | Default | Description | | -------------------------------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | widgetUrl | string |https://widget.gazprombonus.ru| URL виджета (опционально) | | token | string |"" | token текущего пользователя (опционально) | | checkExternalUrl | boolean |true | проверка внешнего URL перед открытием (актуально для Андроид) (опционально) | | printDebugInfo | boolean |false | вывод в консоль отладочных сообщений о событиях виджета (опционально) | | onWidgetClose | func |() => void | вызывается при закрывании виджета по внутренней ссылке (опционально) |

Замечания

• По умолчанию SDK виджета настроено на url https://widget.gazprombonus.ru

• Авторизация виджета позволяет авторизовать пользователя посредством передачи токена в url инициализации

License

Исходный код публикуется под лицензией MIT