@globalpoints/react-native-onboarding

Atualizado em 11/10/2023

Módulo de Onboarding para MiniApps Desenvolvido e mantido por VR Shopping

Detalhes sobre os parâmetros

Parâmetro | Nivel | Descrição | Exemplo --------- | --------- | ------------------------------------------------------------------- | ------- environment | SuperApp | Ambiente de execução | 'development' | 'production' deviceHash | SuperApp | Hash gerada para positivação do dispositivo pelo SuperApp | deviceId | SuperApp | ID do dispositivo gerenciado pelo SuperApp | jwtVR | SuperApp | JWT Token que deve ser provido pelo SuperApp | cardCode | SuperApp | Código do produto que deve ser provido pelo SuperApp | appVersion | SuperApp | Versão do SuperApp que deve ser provido pelo SuperApp | originRoute | SuperApp | Nome da rota do SuperApp que chamou o modulo | 'Home' analytics | SuperApp | Função de analytics provido pelo SuperApp | onEncryptCard | SuperApp | Função provida pelo SuperApp para encriptografar os dados do cartão | (cardData, publicKey) => Promise setUserSessionData | MiniApp | Função para setar os dados da sessão no miniApp | onLoadResources | MiniApp | Função para carregar recursos após nova sessão | Carregar dados de produtos para o modulo nextRoute | MiniApp | Nome da rota a ser chama após conclusão do onboarding |

Instalação das dependências

Use o comando abaixo para instalar o pacote em seu projeto. Lembre-se: Você precisará de uma permissão para acessar o pacote (fornecido pela Global Points)

yarn add @globalpoints/react-native-onboarding

Se certifique de estar utilizando as versões corretas para evitar qualquer conflito.

{
  "react": ">= 17.0.2",
  "react-native": ">= 0.66.0",
  "react-native-gesture-handler": ">= 2.12.1",
  "react-native-reanimated": ">= 2.14.4",
  "react-native-svg": ">= 12.1.1"
  "@react-navigation/native": ">= 6.0.8",
  "@react-navigation/native-stack": ">= 6.5.0",
  "react-native-safe-area-context": ">= 4.1.1",
  "react-native-screens": ">= 3.10.1",
  "@sentry/react-native": ">= 3.4.0",
  "react-native-mask-input": "^1.2.2",
  "react-native-localize": "^2.2.6",
  "@react-native-community/netinfo": "^9.4.1",
  "react-native-device-info": "^10.9.0"
}

• Além de instalar a versão correta do GestureHandler, siga a documentação de instalação para as etapas adicionais.
• Além de instalar a versão correta do ReactNative Reanimated, siga a documentação de instalação para as etapas adicionais.

Como utilizar

Para utilizar basta importar o modulo e renderizar em uma tela ou rota.

import React from 'react';

import { Onboarding } from '@globalpoints/react-native-onboarding';

export default function App() {
  return (
    <Onboarding />
  );
}

Premissas

Este módulo foi desenvolvido com o intuito de se encaixar dentro do Super App para que a navegação seja transparente e que não haja a impressão de serem dois aplicativos diferentes. Para tal, além de seguir o mesmo design system para elaboração das telas, também estaremos utilizando as mesmas fontes. A principal premissa neste caso é que os arquivos de fonte estejam nomeados da seguinte forma:

• Montserrat-Bold.ttf
• Montserrat-Medium.ttf
• Montserrat-Regular.ttf
• Montserrat-SemiBold.ttf

Caso haja qualquer alteração nesses arquivos ou no design system, essas alterações devem ser comunicadas com a Global Points para a devida atualização do módulo, mantendo assim a compatibilidade.

Suporte

Para qualquer problema com a instalação ou utilização deste pacote, entre em contato diretamente com a Global Points. E-mail para contato: [email protected]