Instalando o react-native-fbsdk do jeito certo
Ou como adicionar funcionalidades do Facebook no seu aplicativo React Native sem sofrimento.
Já faz um tempo que adicionar o package react-native-fbsdk tem se tornado uma tarefa problemática e desestimulante. O repositório não permite criar issues e as issues abertas no repositório do React Native não ajudam a solucionar o processo de instalação desse package em nossos aplicativos. Finalmente vamos saber qual é de fato o passo a passo para adicionar corretamente esse package sem causar erros no build de nossa aplicação.
Como o React Native sofre atualizações constantes, segue as versões utilizadas nesse artigo:
react-native: 0.54.4
react: 16.3.0-alpha.1
react-native-fbsdk: 0.7.0
Vejam também meu artigo onde fiz atualização da aplicação desse artigo para a versão 0.60.5
1 — Instalando o package
Como de praxe, inicie um novo aplicativo com react-native init example e aguarde até que o processo finalize. Em seguida instale o package do Facebook:
yarn add react-native-fbsdk
react-native link react-native-fbsdk2 — Configurando o Facebook no iOS
Precisamos agora adicionar o SDK do Facebook para iOS. A documentação nos diz que precisamos baixar os arquivos do SDK para a pasta Documents de nossa máquina. Não caia nessa! A melhor forma de instalar o SDK é a seguinte:
2.1 Crie um aplicativo no Facebook.
Clique em Add a New App
Forneça os dados de seu aplicativo
2.2 Adicione a plataforma iOS ao seu aplicativo.
Clique em Configurações e escolha a opção Básico. Clique em Adicionar plataforma
Escolha iOS
2.3 Configure seu aplicativo
Coloque o bundle ID do seu aplicativo e ative a opção Login único, salvando em seguida.
2.4 Adicione o SDK do Facebook
No final, clique no botão Início rápido e na tela seguinte em Baixar SDK para fazer o download do SDK para sua máquina.
Agora no seu aplicativo, vá até o diretório ios e crie uma pasta chamada Frameworks (case sensitive).
Copie Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework e FBSDKShareKit.framework para o diretório Frameworks que você criou.
2.5 Adicione os frameworks ao seu projeto através do Xcode
Abra seu aplicativo no Xcode (clicando duas vezes no arquivo example/ios/example.xcodeproj).
No Project Navigator (lateral esquerda) do Xcode, selecione o diretório Frameworks, clique com o botão direito do mouse e escolha Add Files to "example"…
Selecione os frameworks do SDK do Facebook e pressione o botão Add
Agora basta seguir o tutorial oficial a partir da etapa 4. Rode o aplicativo com react-native run-ios para testar seu aplicativo.
Se você receber um warning com a seguinte mensagem:
RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks apenas remova o aplicativo e instale de novo e a mensagem sumirá.
3 — Configurando o Facebook no Android
3.1 Pré-configuração do aplicativo
No arquivo android/build.gradle adicione o repositório do Google (linhas 19 a 21).
Mude a versão do SDK do Android utilizado. Por padrão o React Native vem configurado para usar a API 23. Aumente para a API 26 deixando da seguinte forma:
3.2 Adicione a Plataforma Android para seu aplicativo do Facebook
Na tela de Configurações, na opção Básico, clique em Adicionar Plataforma
E no modal escolha a opção Android
3.3 Adicione configurações do seu aplicativo Android
Na próxima tela forneça o id de sua aplicação, o nome completo da sua Activity e ative o Login Único
Agora será necessário obter o key hash de suas keystores. Será necessário colocar tanto o key hash de debug como o de release.
Para obter o key hash, você vai precisar do alias de sua keystore e da senha. Para a keystore de debug, no terminal, execute o seguinte comando:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64A senha é android. Para a keystore de release, basta substituir o alias androiddebugkey e a localização de sua keystore, e depois fornecer a senha.
No terminal você dete ter uma saída parecida com essa:
~/apps/example/android: keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
Informe a senha da área de armazenamento de chaves: android
qiovt/+HyboJyKnIDiZm2YM3Y9Q=Copie a saída completa (incluindo o =) e coloque nas configurações de seu aplicativo no Facebook.
Salve as alterações. Caso apareça um alerta sobre o nome do pacote escolha a opção Usar este nome de pacote. Esse alerta aparece quando seu aplicativo ainda não está disponível no Google Play.
3.4 Finalizando a configuração do seu aplicativo
No arquivo AndroidManifest.xml, certifique-se de que seu app está com a permissão de internet
<uses-permission android:name="android.permission.INTERNET" />Dentro da tag Application, adicione o meta-data do Facebook
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="br.com.example.app"><uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
</application></manifest>
Agora no arquivo strings.xml localizado em android/app/src/main/res/values adicione o ID de seu aplicativo no Facebook.
<resources>
<string name="app_name">example</string>
<string name="facebook_app_id">207638560019186</string>
</resources>Em MainApplication.java importe o CallbackManager
import com.facebook.CallbackManager;Adicione uma propriedade estática do CallbackManager
public class MainApplication extends Application implements ReactApplication { private static CallbackManager mCallbackManager = CallbackManager.Factory.create(); protected static CallbackManager getCallbackManager() {
return mCallbackManager;
}
...
E passe essa propriedade estática como parâmetro do FBSDKPackage no método getPackages
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new FBSDKPackage(mCallbackManager)
);
}No MainActivity.java, importe o Intent
import android.content.Intent;E adicione o listener do onActivityResult
public class MainActivity extends ReactActivity { @Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
}
Pronto! Agora você está com o Facebook configurado no seu aplicativo React Native e pode usar qualquer método do FBSDK como login, share, analytics ou graph API. Segue o repositório com essa configuração feita e com botão de login no Facebook funcionando:
