React Native : ajouter Appwin à ton app

Comment ajouter Appwin à ton app React Native avec le paquet npm.

Avant de commencer

Le paquet fait le pont vers les SDK natifs : il n'y a pas de réimplémentation JavaScript du fil - les écrans que tu vois sont les mêmes qu'en Swift et en Kotlin.

Compose ton intégration

Choisis les produits que tu veux. La liste de dépendances et le code d'initialisation suivent ton choix.

Compose ton intégration

AppwinCore est toujours là - il porte l'identité, la session et le client réseau. Choisis ce que tu ajoutes par-dessus.

AppwinCore

Utilise un prompt

Dépendances

bash
npm install @appwin/react-native@0.3.0
cd ios && pod install

Initialisation

tsx
import { AppwinCore, AppwinCommunity } from '@appwin/react-native'

export async function startAppwin() {
  await AppwinCore.configure({ projectAppId: process.env.APPWIN_APP_ID! })
  await AppwinCore.bootstrapSession()

  const community = await AppwinCommunity.initialize()

  return { community }
}
  • Chaque initialize() répond au lieu de lever une erreur. Conditionne ton propre point d'entrée à ce résultat : le SDK ne possède pas ta navigation, il ne peut pas cacher ton onglet à ta place.
  • bootstrapSession() ne prend pas d'externalId ici. Pour rattacher un utilisateur connecté, passe par le login du produit : il fait l'identify et le rejeu du bootstrap en un appel.

Affiche-le à l'écran

initialize() dit si un produit a le droit de s'ouvrir. Où le poser, c'est à toi : le SDK ne possède pas ta navigation.

ExportCe que tu poses
AppwinCommunityViewLe fil, sous forme de vue native
AppwinSupportMessengerViewLa messagerie
AppwinNotificationsPas d'UI - registerPushToken(...) au lancement
tsx
if (!ready) return null
return <AppwinCommunityView style={{ flex: 1 }} />

AppwinCommunityView est une vue native : donne-lui une vraie taille. Dans une colonne flex, flex: 1 est ce que tu veux ; sans hauteur elle se mesure à zéro et tu obtiens un écran blanc plutôt qu'une erreur.

Rattache ton utilisateur

React Native est la seule plateforme où AppwinCore.bootstrapSession() ne prend pas d'externalId. Utilise le login du produit à la place - il fait l'identify et le rejeu du bootstrap en un appel.

tsx
await AppwinCommunity.login(user.id)
// ou, si tu intègres Support :
await AppwinSupport.loginIdentifiedUser(user.id)

await AppwinCore.signOut() // à la déconnexion

Pour aller plus loin