React Native: add Appwin to your app
Learn how to add Appwin to your React Native app with the npm package.
Before you start
- An app created in the dashboard
- Your App ID
- React Native 0.73+
The package bridges the native SDKs, so there is no JavaScript reimplementation of the feed - the screens you see are the same Swift and Kotlin ones.
Build your integration
Pick the products you want. The dependency list and the initialisation code follow your choice.
Build your integration
AppwinCore is always in - it carries the identity, the session and the network client. Pick what you add on top.
Use a prompt
Dependencies
npm install @appwin/react-native@0.3.0
cd ios && pod install
Initialisation
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 }
}
- Each initialize() answers rather than throwing. Gate your own entry point on the result - the SDK does not own your navigation, so it cannot hide your tab for you.
- bootstrapSession() takes no externalId here. To attach a signed-in user, call the product's login instead - it does the identify and the re-bootstrap in one go.
Put it on screen
initialize() says whether a product may open. Where it goes is yours - the
SDK does not own your navigation.
| Export | What you place |
|---|---|
AppwinCommunityView | The feed, as a native view |
AppwinSupportMessengerView | The messenger |
AppwinNotifications | No UI - registerPushToken(...) at launch |
if (!ready) return null
return <AppwinCommunityView style={{ flex: 1 }} />
AppwinCommunityView is a native view: give it a real size. Inside a flex
column, flex: 1 is what you want; without a height it measures zero and you
get a blank screen rather than an error.
Attach your user
React Native is the one platform where AppwinCore.bootstrapSession() takes no
externalId. Use the product's login instead - it does the identify and the
re-bootstrap in one call.
await AppwinCommunity.login(user.id)
// or, if you integrate Support:
await AppwinSupport.loginIdentifiedUser(user.id)
await AppwinCore.signOut() // on sign-out