Notificaes

Usando React-Native-FCM
Este documento tem o propsito de auxiliar, qualquer developer que pertence empresa
Dev2Grow, na implementao de notificaes no seu respetivo projeto React-Native usando o
Firebase Cloud Messaging, instalando o React-Native-FCM.
Registar projeto no Firebase Console

Primeiro que tudo o projeto tem de ser registado no Firebase Console para se ter os ficheiros
GoogleService para Android e iOS.

Para registar o projeto basta ir ao site: https://console.firebase.google.com/

E clicar no boto Adicionar Projeto, de seguida aparece um popup onde tem de se pr o nome do
projeto e o pas do projeto onde se encontra a ser desenvolvido (Portugal).

<Add image add project>

<Add image input nome>

- Registo por plataforma

Depois de registar o projeto, redirecionado para a pgina do projeto na consola do firebase. A vai
precisar de adicionar o projeto s respetivas plataformas (Android e iOS). Em ambos casos
necessrio pr o package name do projeto da respetiva plataforma.

No caso de Android, aps fazer o registo do package name, pode fazer o download do ficheiro
google-services.json e pr o ficheiro na pasta android/app.

No caso de iOS, aps fazer o registo do package name, pode fazer o download do ficheiro
GoogleService-Info.plist e pr o ficheiro na pasta ios/<nome do projeto>. Mas estes de momento
no vai funcionar porque ainda falta fazer upload para a consola do firebase os certificados p12 de
desenvolvimento e produo. S quando esses certificados estiverem no projeto na consola do
firebase que a app em iOS consegue receber notificaes.

Nota: todas as instrues relevantes a cdigo a ser adicionado no projeto sero faladas aqui no
documento mais frente. Por isso pode saltar essas mesmas instrues que aparecem no site.

- Gerao dos certificados p12

Instalao do React-Native-FCM

Aps ter feito o registo da app na consola do firebase, e de ter os ficheiros google services respetivos
para cada plataforma, passamos para a fase de instalao do SDK do firebase e do componente
React-Native-FCM.

Nota: qualquer alterao que tenha sido feita no componente encontra-se registada no respetivo
github (https://github.com/evollu/react-native-fcm), e se implicar haver informao errada neste
documento, este tem de ser alterado.

Procedimentos normais de instalao:

npm install react-native-fcm save
react-native link react-native-fcm

- Android

Editar android/build.gradle
dependencies {
classpath 'com.android.tools.build:gradle:2.0.0'
+ classpath 'com.google.gms:google-services:3.0.0'

Editar android/settings.gradle
...
+ include ':react-native-fcm'
+ project(':react-native-fcm').projectDir = new
File(rootProject.projectDir, '../node_modules/react-native-
fcm/android')
include ':app'

Editar android/app/build.gradle
dependencies {
+ compile project(':react-native-fcm')
+ compile 'com.google.firebase:firebase-core:10.0.1' //this
decides your firebase SDK version
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From
node_modules
}
...

apply plugin: 'com.google.gms.google-services'

nota: de preferncia acrescentar esta linha no fim do ficheiro

Editar android/app/src/main/AndroidManifest.xml
<application
...
android:theme="@style/AppTheme">
+ <service android:name="com.evollu.react.fcm.MessagingService"
android:enabled="true" android:exported="true">
+ <intent-filter>
+ <action android:name="com.google.firebase.MESSAGING_EVENT"/>
+ </intent-filter>
+ </service>
+ <service android:name="com.evollu.react.fcm.InstanceIdService"
android:exported="false">
+ <intent-filter

+ <action
android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
+ </intent-filter>
+ </service>

Se forem s notificaes de informao, mas que no fazem nada na app (ao clique na notificao),
pode saltar para o passo de cdigo java.

Para permitir que Android responda ao clique da notificao, preciso definir o seguinte no
manifesto:
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
+ android:launchMode="singleTop"

android:configChanges="keyboard|keyboardHidden|orientation|screenSiz
e">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
+ <intent-filter>
+ <action android:name="fcm.ACTION.HELLO" />
+ <category android:name="android.intent.category.DEFAULT" />
+ </intent-filter>
</activity>

Onde launchMode=singleTop para reutilizer a MainActivity, e onde diz fcm.ACTION.HELLO para

por o nome do click_action.
Estrutura da notificao

Aps isto tudo, no esquecer na mesma verificar se o componente ficou bem linkado ao projeto.
Para isto, basta verificar o ficheiro MyApplication