# Coming soon
URL: /docs/android/coming-soon

***

title: Coming soon
description: FeatureBuddy Android SDK coming soon
-------------------------------------------------

Coming soon, stay tuned!


# Coming soon
URL: /docs/ios/coming-soon

***

title: Coming soon
description: FeatureBuddy iOS SDK coming soon
---------------------------------------------

Coming soon, stay tuned!


# Advanced
URL: /docs/flutter/advanced

***

title: Advanced
description: FeatureBuddy Flutter SDK advanced
----------------------------------------------

## Setting user data

You can set user data by calling the `setUserData` function.

This function can be called from any screen in your app, but ensure you call it after initializing FeatureBuddy with `FeatureBuddyConfig.configure`.

This function takes an object with the following properties:

* `email`: The user's email.
* `userMeta`: The user's metadata. Can be any key-value pairs.

```dart
import 'package:featurebuddy/featurebuddy.dart';

void main() {
  FeatureBuddyConfig.configure(apiKey: 'YOUR_API_KEY_GOES_HERE');
  runApp(const MyApp());
}

Future<void> _setFakeUserData() async {
  try {
    await FeatureBuddyConfig.setUserData(
      email: 'john.doe@example.com',
      userMeta: {
        'first_name': 'John',
        'last_name': 'Doe',
        'subscription_status': 'active',
      },
    );
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('User data set successfully')),
      );
    }
  } catch (e) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error setting user data: $e')),
      );
    }
  }
}
```


# Getting started
URL: /docs/flutter/getting-started

***

title: Getting started
description: FeatureBuddy Flutter SDK getting started
-----------------------------------------------------

FeatureBuddy provides an easy way to collect feedback from your users and build a better product.

## Requirements

* [FeatureBuddy](https://app.featurebuddy.com) Account
* FeatureBuddy API Key, available in [Settings > API Key](https://app.featurebuddy.com)

## Quick start

### Installing

Add `featurebuddy` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/) (and run an implicit `dart pub get`):

```yaml
dependencies:
  featurebuddy: 1.0.0
```

Alternatively run this command:

```sh
flutter pub add featurebuddy
```

### Base usage

Initialize FeatureBuddy by calling `FeatureBuddyConfig.configure(apiKey: 'YOUR_API_KEY_GOES_HERE');` in your `main.dart` file.

After that, you can use the `FeatureBuddy` widget in your app.

```dart
import 'package:featurebuddy/featurebuddy.dart'; // [!code ++]

void main() {
  FeatureBuddyConfig.configure(apiKey: 'YOUR_API_KEY_GOES_HERE'); // [!code ++]
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: FeaturesScreen()); // [!code highlight]
  }
}

// [!code ++:13]
class FeaturesScreen extends StatelessWidget {
  const FeaturesScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Features'),
      ),
      body: const FeatureBuddy(),
    );
  }
}
```


# Theming
URL: /docs/flutter/theming

***

title: Theming
description: FeatureBuddy Flutter SDK theming
---------------------------------------------

You can customize the appearance of the FeatureBuddy UI by providing a theme object to the `FeatureBuddy` component.

```dart
import 'package:featurebuddy/featurebuddy.dart';

void main() {
  FeatureBuddyConfig.configure(apiKey: 'YOUR_API_KEY_GOES_HERE');
  runApp(const MyApp());
}

class FeaturesScreen extends StatelessWidget {
  const FeaturesScreen({super.key});

  static const theme = AppTheme(
    primary: Colors.red,
    secondary: Colors.blue,
    accent: Colors.green,
    primaryBackground: Color(0xFF42A5F5),
    secondaryBackground: Colors.grey,
    accentBackground: Colors.blue,
    buttonBackground: Colors.red,
    button: Colors.white,
    error: Colors.red,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Features'),
      ),
      body: const FeatureBuddy(theme: theme),
    );
  }
}
```


# Translations
URL: /docs/flutter/translations

***

title: Translations
description: FeatureBuddy Flutter SDK translations
--------------------------------------------------

You can customize the translations of the Featurebuddy UI by providing a `Localization` object to the `FeatureBuddy` component.

```dart
import 'package:featurebuddy/featurebuddy.dart';

void main() {
  FeatureBuddyConfig.configure(apiKey: 'YOUR_API_KEY_GOES_HERE');
  runApp(const MyApp());
}

class FeaturesScreen extends StatelessWidget {
  const FeaturesScreen({super.key});

  static const localization = Localization(
    approvedStatus: 'Approved',
    inProgressStatus: 'In Progress',
    doneStatus: 'Done',
    emptyRequestsText: 'No requests',
    emptyCommentsText: 'No comments',
    commentsTitle: 'Comments',
    developersNote: 'Developer\'s note',
    addCommentPlaceholder: 'Write a comment',
    createRequestScreenTitle: 'Create Request',
    createRequestTitle: 'Title',
    createRequestTitlePlaceholder: 'Add a title for your request',
    createRequestDescription: 'Description',
    createRequestDescriptionPlaceholder: 'Please provide detailed description for your request',
    createRequestSubmit: 'Submit',
    createRequestToastSuccess: 'Thank you! Your suggestion was succesfully submited!',
    createRequestEmailPlaceholder: 'Enter your email',
    createRequestEmail: 'Email (optional)',
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Features'),
      ),
      body: const FeatureBuddy(localization: localization),
    );
  }
}
```


# Advanced Configuration
URL: /docs/react-native/advanced

***

title: Advanced Configuration
description: Setting user data and sending metadata
---------------------------------------------------

## Setting user data

You can set user data by calling the `setUserData` function. This function takes an object with the following properties:

* `email`: The user's email.
* `userMeta`: The user's metadata.

You can use the `userMeta` to store any additional information about the user, e.g. their name, subscription tier & status, etc.

```tsx
import { setUserData } from '@featurebuddy/react-native';

const apiKey = 'your-api-key';

await setUserData(apiKey, {
  email: 'john.doe@example.com',
  userMeta: { 'custom-key': 'custom-value' },
});
```

## Sending metadata with requests

You can send metadata with requests by providing a `meta` object to the `Features` component.

It can be any key-value pairs.

Here is an example of some useful metadata you can send using the `expo-application` and `expo-device` packages:

```tsx
import * as Device from 'expo-device';
import * as Application from 'expo-application';
import { Features } from '@featurebuddy/react-native';

const apiKey = 'your-api-key';

const meta = {
  appVersion: Application.nativeApplicationVersion,
  appBuild: Application.nativeBuildVersion,
  deviceBrand: Device.brand,
  deviceType: Device.deviceType ? Device.DeviceType : 'Unknown',
  deviceYearClass: Device.deviceYearClass?.toString(),
  deviceModelName: Device.modelName,
  osName: Device.osName,
  osVersion: Device.osVersion,
  platformApiLevel: Device.platformApiLevel?.toString(),
}

export const FeedbackScreen = () => {
  return <Features apiKey={apiKey} meta={meta} />;
};
```


# Getting started
URL: /docs/react-native/getting-started

***

title: Getting started
description: Installation and base usage
----------------------------------------

import { Tabs, Tab } from 'fumadocs-ui/components/tabs';

FeatureBuddy works with both bare React Native applications and Expo projects without requiring ejection or a development client.

It's built with TypeScript and has no external dependencies.

[npm](https://www.npmjs.com/package/@featurebuddy/react-native)

## Requirements

* [FeatureBuddy](https://app.featurebuddy.com) Account
* FeatureBuddy API Key, available in [Settings > API Key](https://app.featurebuddy.com)

## Quick start

### Installation

Install FeatureBuddy by running one of the following commands in your terminal:

```npm
npm i @featurebuddy/react-native --save
```

### Usage

You can easily render a component on the screen or in a modal.

```jsx
import { Features } from "@featurebuddy/react-native";

const apiKey = "your-api-key";

export const FeedbackScreen = () => {
  return <Features apiKey={apiKey} />;
};
```


# Theming
URL: /docs/react-native/theming

***

title: Theming
description: Learn how to customize the appearance
--------------------------------------------------

You can customize the appearance of the FeatureBuddy UI by providing a theme object to the `Features` component.

```jsx
import { Features } from '@featurebuddy/react-native';

const apiKey = 'your-api-key';

const theme = {
  primary: '#000000',
  secondary: '#5E5E5E',
  accent: '#FFFFFF',

  primaryBackground: '#FFFFFF',
  secondaryBackground: '#ECECEC',
  accentBackground: '#4B6FEF',
  buttonBackground: '#2B2E38',

  button: '#FFFFFF',
  error: '#DC4F4F',
};

export const FeedbackScreen = () => {
  return <Features apiKey={apiKey} theme={theme} />;
};
```


# Translations
URL: /docs/react-native/translations

***

title: Translations
description: Learn how to customize the translations
----------------------------------------------------

By default, the Featurebuddy UI is translated to English.
You can customize the translations of the Featurebuddy UI by providing a translations object to the `Features` component.

```jsx
import { Features } from '@featurebuddy/react-native';

const apiKey = 'you-api-key';

const translations = {
  title: 'Feature Requests',

  approvedStatus: 'Approved',
  inProgressStatus: 'In Progress',
  doneStatus: 'Done',

  emptyRequestsText: 'No requests',
  emptyCommentsText: 'No comments',

  commentsTitle: 'Comments',
  addCommentPlaceholder: 'Write a comment',
  addCommentSubmit: 'Send',
  addCommentError: 'Comment must be at least 8 characters',

  createRequestScreenTitle: 'Create Request',
  createRequestTitle: 'Title',
  createRequestTitlePlaceholder: 'What would you like to improve?',
  createRequestDescription: 'Description',
  createRequestDescriptionPlaceholder: 'Please provide some description for your request',
  createRequestEmail: 'Email (optional)',
  createRequestEmailPlaceholder: 'Email address',
  createRequestSubmit: 'Submit',
  createRequestToastSuccess: 'Thank you! Your suggestion was succesfully submited!',
};

export const FeedbackScreen = () => {
  return <Features apiKey={apiKey} translations={translations} />;
};
```