mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-22 02:55:04 -05:00
Johannes
128 lines
2.9 KiB
Plaintext
128 lines
2.9 KiB
Plaintext
import { MdxImage } from "@/components/MdxImage";
|
|
|
|
export const metadata = {
|
|
title: "React Native: Formbricks App SDK",
|
|
description:
|
|
"Integrate Formbricks App Surveys into your React Native apps with the Formbricks React Native SDK.",
|
|
};
|
|
|
|
#### Developer Docs
|
|
|
|
# React Native: In App Surveys
|
|
|
|
### Overview
|
|
|
|
The Formbricks React Native SDK can be used for seamlessly integrating App Surveys into your React Native Apps. Here, w'll explore how to leverage the SDK for in app surveys. The SDK is [available on npm.](https://www.npmjs.com/package/@formbricks/react-native)
|
|
|
|
### Install
|
|
|
|
<Col>
|
|
<CodeGroup title="npm">
|
|
|
|
```js {{ title: 'npm' }}
|
|
npm install @formbricks/react-native
|
|
```
|
|
|
|
```js {{ title: 'yarn' }}
|
|
yarn add @formbricks/react-native
|
|
```
|
|
|
|
```js {{ title: 'pnpm' }}
|
|
pnpm add @formbricks/react-native
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|
|
|
|
## Methods
|
|
|
|
### Initialize Formbricks
|
|
|
|
In your React Native app, initialize the Formbricks React Native Client for app surveys where you pass the userId (creates a user if not existing in Formbricks) to attribute & target the user based on their actions.
|
|
|
|
<Col>
|
|
<CodeGroup title="Initialize Formbricks">
|
|
|
|
```javascript
|
|
// other imports
|
|
import Formbricks from "@formbricks/react-native";
|
|
|
|
const config = {
|
|
environmentId: "<environment-id>",
|
|
apiHost: "<api-host>",
|
|
userId: "<user-id>",
|
|
};
|
|
|
|
export default function App() {
|
|
return (
|
|
<>
|
|
{/* Your app content */}
|
|
<Formbricks initConfig={config} />
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|
|
|
|
The moment you initialise Formbricks, your user will start seeing surveys that get triggered on simpler actions such as on New Session.
|
|
|
|
### Set Attribute
|
|
|
|
You can set custom attributes for the identified user. This can be helpful for segmenting users based on specific characteristics or properties. To learn how to set custom user attributes, please check out our [User Attributes Guide](/app-surveys/user-identification).
|
|
|
|
<Col>
|
|
<CodeGroup>
|
|
|
|
```js
|
|
formbricks.setAttribute("Plan", "Paid");
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|
|
|
|
### Track Action
|
|
|
|
Track user actions to trigger surveys based on user interactions, such as button clicks or scrolling:
|
|
|
|
<Col>
|
|
<CodeGroup>
|
|
|
|
```js
|
|
formbricks.track("Clicked on Claim");
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|
|
|
|
### Logout
|
|
|
|
To log out and deinitialize Formbricks, use the formbricks.logout() function. This action clears the current initialization configuration and erases stored frontend information, such as the surveys a user has viewed or completed. It's an important step when a user logs out of your application or when you want to reset Formbricks.
|
|
|
|
<Col>
|
|
<CodeGroup>
|
|
|
|
```js
|
|
formbricks.logout();
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|
|
|
|
After calling formbricks.logout(), you'll need to reinitialize Formbricks before using any of its features again. Ensure that you properly reinitialize Formbricks to avoid unexpected errors or behavior in your application.
|
|
|
|
### Reset
|
|
|
|
Reset the current instance and fetch the latest surveys and state again:
|
|
|
|
<Col>
|
|
<CodeGroup>
|
|
|
|
```js
|
|
formbricks.reset();
|
|
```
|
|
|
|
</CodeGroup>
|
|
</Col>
|