{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Integração React Native 0.60.x","type":"basic","slug":"integração-react-native-060x-v2","excerpt":"Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em React Native.","body":"Recomendamos que você use a versão estável mais recente do React Native, definida em package.json. A Inngage SDK foi verificado pela última vez na versão 0.63.0.\n\n<br>\n**Se o seu app se encontra na versão 0.60.x siga o seguinte passo-a-passo para realizar a integração da Inngage com seu app. [Caso esteja na versão 0.59.x acesse esse link ](https://inngage.readme.io/v1.0/docs/integração-react-native)**\n\n<br>\n[ 1. Configuração do projeto no Firebase](https://inngage.readme.io/docs/configuração-firebase-e-google-dev-console)\n\n[2. Configuração no painel Inngage](https://inngage.readme.io/docs/android-configuracao-plataforma-inngage)\n\n[ 3. Configuração nativa iOS](https://inngage.readme.io/v1.0/docs/configuração-nativa-ios-react-060x)\n\n[4. Configuração nativa Android](https://inngage.readme.io/docs/configura%C3%A7%C3%A3o-nativa-android)\n\n<br>\n<br>\nApós fazer as configurações necessárias para que o seu código tenha acesso nativo às push notifications do Firebase iremos instalar a SDK da Inngage\n<br>\n[block:api-header]\n{\n  \"title\": \"1. Preparando o ambiente de produção\"\n}\n[/block]\nInstale as seguintes dependências externas que a SDK utiliza.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"yarn add 'react-native-device-info' or npm install 'react-native-device-info'\\nyarn add 'react-native-geolocation-service' or npm install 'react-native-geolocation-service'\\nyarn add 'react-native-inappbrowser-reborn' or npm install 'react-native-inappbrowser-reborn'\\nyarn add ':::at:::inngageregistry/inngage-react' or npm install '@inngageregistry/inngage-react' or npm install \\nyarn add 'react-native-community/geolocation' or npm install \\nyarn add 'react-native-localize' or npm install \\nyarn add 'react-native-snap-carousel' or npm install \\nyarn add @react-native-firebase/[email protected]\\nyarn add @react-native-firebase/[email protected]\\nyarn add react-native-community/async-storage,prop-types\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"2. Implementando a SDK\"\n}\n[/block]\nImporte 'GetPermission' do módulo da SDK.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import Inngage from '@inngageregistry/inngage-react'\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nEste método deve ser chamado para que o usuário seja informado da chegada das notificações, deve sempre chamado dentro do 'index.js'.\n\nEssa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let request = {\\n      enableAlert: true, //Caso não deseje apresentar o alert com o conteúdo do Push após clicado trocar para false\\n    }\\n    Inngage.GetPermission(request);\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"3. Registro de usuário\"\n}\n[/block]\nEsse método é responsável por realizar o registro / subscription do usuário na plataforma Inngage, e pode ser utilizado em qualquer momento desejado, como quando o usuário abre o app, no momento do login ou cadastro, entre outros.\n\nRecomendamos que esse método seja chamado a cada nova sessão do usuário, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let request = {\\n      friendlyIdentifier: 'identificador',//identificador amigável do usuário, informar null em caso de usuário sem identificador\\n  \\t\\tphoneNumer: 'telefone do usuário', // Padrão 5511999991234\\n      appToken: '{Trocar pelo App_Token do aplicativo}',\\n      PROD: true,//Sempre true\\n      customData: false,//Enviar true quando estiver mandando custom fields abaixo\\n      customFields: {\\n      }\\n    }\\n    Inngage.Subscription(request);\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"4. In App Messages\"\n}\n[/block]\nA SDK React Native da Inngage tem a capacidade de disponibilizar ao usuários In App Messages. As mensagens podem ser enviadas tanto pela plataforma e pela API, e automaticamente é apresentada de acordo com as configurações recebidas no payload do Firebase.\n\nPara apresentar importe o conteúdo a seguir em cada tela que deseja possibilitar a apresentação de uma in app message.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { Inapp } from '@inngageregistry/inngage-react';\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nA propriedade on close do componente define se as mensagens serão apagadas, ou se será mantido o registro de mensagens. Onde o parâmetro clear define que ao fechar a In App Message apaga todas as mensagens da Stack e se não for definido permanece.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Inapp onClose='clear'/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"5. Recuperando dados adicionais e outros de uma notificação\"\n}\n[/block]\nCaso queira recuperar algum Additional Data enviada pelo Firebase, implemente a seguinte função:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { firebase } from '@react-native-firebase/messaging';\\nfirebase.messaging().onMessage(async (remoteMessage) => { \\n\\t\\tconsole.log(remoteMessage)\\n}\\n\\nfirebase.messaging().setBackgroundMessageHandler(async (remoteMessage) => { \\t   \\t\\t console.log(remoteMessage) \\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Projeto Sample\",\n  \"body\": \"Disponibilizamos um projeto sample com a implementação da SDK. Você pode acessa-lo aqui:\\n[https://github.com/inngage/inngage-react-native-sample](https://github.com/inngage/inngage-react-native-sample) \"\n}\n[/block]","updates":[],"order":3,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5f897e2938dca5004ffd203b","createdAt":"2020-10-16T11:04:09.757Z","user":"5724b9982ad0bc17001227fa","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"React Native SDK","slug":"react-native-sdk","order":5,"from_sync":false,"reference":false,"_id":"5c597e8b0abe110014bf1a11","project":"57240e292887bb0e00bb9d93","version":"57240e292887bb0e00bb9d96","createdAt":"2019-02-05T12:16:11.366Z","__v":0},"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57240e292887bb0e00bb9d97","57241b7deae5090e00ee6249","57241c06eae5090e00ee624a","57242abb2ad0bc170012279b","5734d18c7b9859320047f4b1","57688cc71f818b0e00695efb","577ead2ca74eb40e00d97bca","57b66af649a12a0e007b461b","597e5f8f13505b0014251a79","59964eb2f824b4000f961fbe","5a15ab12f2643f001ee8737c","5ab1151799750500797334e0","5c597e8b0abe110014bf1a11","5e395a05470bc3002d78d886","5e42a9647515f300509a594d","5f5e716dcc85f9004a4fa193","5f6dd615c624d800180bd237","5f984feb8aed05003a0032dc","60ac0e9c4c04970016613c6c"],"_id":"57240e292887bb0e00bb9d96","createdAt":"2016-04-30T01:45:13.341Z","project":"57240e292887bb0e00bb9d93","releaseDate":"2016-04-30T01:45:13.341Z","__v":19},"project":"57240e292887bb0e00bb9d93","__v":0,"parentDoc":null}