GuidesAPI ReferenceHome

Configuração nativa iOS (React 0.59.x)

Suggest Edits

1- Crie uma aplicação no Firebase

No Cloud Messaging, encontrado no console do Firebase, crie uma aplicação IOS e tenha certeza de fazer o download indicado do arquivo 'GoogleService-Info.plist', este mesmo arquivo será colocado em ../Seuprojeto/ios/SeuProjeto.

800

Após criada, faça o download do arquivo GoogleService-Info.plist. Ele será adicionado em seu projeto React a seguir:

1280

2- Autenticação APNs

Vá até o console do Firebase (Project Settings > Cloud Messaging), nas configurações do seu projeto e inclua a chave de autenticação juntamente com o certificado.
Obs: Crie dois certificados, um de desenvolvimento e um para produção

3- Criação da chave e certificado APNs

Depois de criar uma conta no Apple Developers e ter acesso à uma AppleID e vá até a aba de certificados

800

No selector escolha IOS

800

Na aba 'App IDs' crie uma nova

800

Especifique o nome do app, Bundle ID (o mesmo usado na criação do projeto) e selecione Push Notifications

800

Clique 'Register'e depois 'Done'

800

Agora você pode ver o seu App listado em App IDs

800

Inicie o aplicativo Keychan Access no seu Mac OS X e selecione Keychain Access -> Certificate Assistant -> Request a Certificate From a Certificate Authority

800

Insira o endereço de e-mail, marque a opção "Salvo no disco" e clique em Continuar

800

4- Criação da chave e certificado APNs (Apple Developers)

Volte para a conta do desenvolvedor e selecione o aplicativo dos IDs do aplicativo e clique em Editar

800

Vá até Development SSL certificates e clique em Create Certificate

800

Clique em continue

800

Escolha um arquivo de certificado criado a partir do Keychan Access na seção anterior e clique em Continuar, depois faça o download.

Gere um certificado APNS .p12

Clique duas vezes no certificado de desenvolvimento gerado na etapa anterior para adicioná-lo ao Acesso às Chaves. Vá para Acesso às Chaves, selecione as chaves de login e Meu Certificado no menu lateral. Encontre o certificado do aplicativo e clique com o botão direito para exportá-lo

800

Digite o nome do certificado e clique em Salvar depois digite a senha e clique em OK

5 - Configurando seu projeto no Xcode

Dentro da sua pasta 'ios'digite o comando 'pod init' (CocoaPods precisa estar instalado no seu mac, isso pode ser feito digitando gem Install cocoapods).
O comando pod init vai criar um arquivo .xcworkspace e um Podfile, abra o .cxworspace no Xcode e ligue as seguintes funcionalidades

701

No seu arquivo Podfile localizado dentro da pasta ios cole os seguinte código substituindo por inteiro o anterior, no entanto substitua toda palavra sdk pelo nome do seu projeto

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'sdk' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for sdk 

  pod 'GoogleAnalytics'
	pod 'Firabe/Core'
	pod 'Firebase/Messaging'
	pod 'RNDeviceInfo', ;path => '../node_modules/react-native-device-info'
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  pod "React", :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'RCTGeolocation'
  ]

  target 'sdkTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

target 'sdk-tvOS' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for sdk-tvOS

  target 'sdk-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

Salve e na pasta iOS no terminal digite o comando : pod install

6- Conectando o Firebase

Digite os seguintes comandos no terminal

yarn add --save react-native-firebase
react-native link react-native-firebase

Aqui, você vincula o módulo de nó do firebase para plataformas nativas manualmente, sem link de react-native, já que evita confusões e bindings incompletos na maioria das vezes. Além disso, se você enfrentar quaisquer problemas após o link, você pode confirmar etapas abaixo de que tudo está incluído corretamente.

7- Configurando o AppDelegate

Substitua seu arquivo AppDelegate.m pelo seguinte

#import "AppDelegate.h"
#import <Firebase.h>
#import "RNFirebaseNotifications.h"
#import "RNFirebaseMessaging.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  
  //Add these 3 lines
  [FIRApp configure];
  [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
  [RNFirebaseNotifications configure];

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"sdk"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
  [[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {
  [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];
}

-(void) userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {
 
  [[RNFirebaseMessaging instance] didReceiveRemoteNotification:response.notification.request.content.userInfo];
  completionHandler();
}

@end

Substitua seu arquivo AppDelegate.h pelo seguinte

#import <UIKit/UIKit.h>
#import <UserNotifications/UserNotifications.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate, UNUserNotificationCenterDelegate>

@property (nonatomic, strong) UIWindow *window;

@end

OBS: Lembre de substituir sdk na linha 23 do AppDelegate.m pelo nome do seu projeto

Updated 4 months ago