### Install and Start Sample App

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Navigate to the sample app directory, install dependencies, and start the React Native packager. This is a basic setup for running the sample application.

```shell
cd BrazeProject/
yarn install
npx react-native start
```

--------------------------------

### Run Sample App on Android

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

After installing dependencies and starting the packager, run the Android application using the provided command. Ensure your Android environment is set up correctly.

```shell
npx react-native run-android
```

--------------------------------

### Run Sample App on iOS

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

After installing dependencies and starting the packager, navigate to the ios directory to install CocoaPods and then run the iOS application. Use RCT_NEW_ARCH_ENABLED=0 pod install if the legacy architecture is required.

```shell
cd ios && pod install && cd ..
npx react-native run-ios
```

--------------------------------

### Install Dependencies

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/BrazeProject/README.md

Run this command to install project dependencies before building or running the app.

```bash
yarn install
```

--------------------------------

### Install Braze React Native SDK

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Install the Braze React Native SDK using npm or yarn.

```shell
npm install @braze/react-native-sdk
# or:
# yarn add @braze/react-native-sdk
```

--------------------------------

### Install iOS Pods

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Run this command in the `ios` directory to install the necessary Braze React Native SDK pods.

```shell
cd ios && pod install
```

--------------------------------

### Request Banner Refresh and Get Banner

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Request a refresh for specific banner placements and retrieve a banner by its ID. A native `BrazeBannerView` is also available.

```typescript
import Braze from "@braze/react-native-sdk";

Braze.requestBannersRefresh(["homepage_banner"]);
const banner = await Braze.getBanner("homepage_banner");

// Or use the native Banner view:
// <Braze.BrazeBannerView placementID="homepage_banner" />
```

--------------------------------

### Get Feature Flag Status and Refresh

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Retrieve the status of a feature flag, check its enabled state, and access its properties like rollout percentage. Refresh feature flags and log impressions.

```typescript
const flag = await Braze.getFeatureFlag("new_checkout");
if (flag?.enabled) {
  const rollout = flag.getNumberProperty("rollout_percentage") ?? 0;
}
Braze.refreshFeatureFlags();
Braze.logFeatureFlagImpression("new_checkout");
```

--------------------------------

### Run iOS App

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/BrazeProject/README.md

Execute this command to build and run the sample application on an iOS simulator or device.

```bash
yarn ios
```

--------------------------------

### Run Android App

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/BrazeProject/README.md

Execute this command to build and run the sample application on an Android emulator or device.

```bash
yarn android
```

--------------------------------

### Initialize Braze SDK and Log Event

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Initialize the Braze SDK with your API key and endpoint, then change the user and log a custom event. Call initialize early in your app lifecycle. Native configuration is applied automatically.

```typescript
import Braze from "@braze/react-native-sdk";

// Initialize the SDK — call early in your app lifecycle (e.g. in a useEffect).
// The API key and endpoint are passed from JavaScript; native configuration
// (push, logging, etc.) is applied automatically from your native setup.
Braze.initialize("<YOUR_API_KEY>", "<YOUR_SDK_ENDPOINT>");

Braze.changeUser("user-123");
Braze.logCustomEvent("button_clicked", { screen: "home" });
```

--------------------------------

### Configure iOS Braze Initialization

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Use `BrazeReactInitializer.configure` in your `AppDelegate` to register native configuration. The provided closures are stored and applied when `Braze.initialize(apiKey, endpoint)` is called from JavaScript. The `configure` closure sets SDK properties, while `postInitialization` receives the live `Braze` instance.

```swift
import BrazeKit
import braze_react_native_sdk

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  static var braze: Braze? = nil

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    // Register native configuration for when JS calls Braze.initialize().
    BrazeReactInitializer.configure {
      config.logger.level = .info
      config.push.automation = true
    } postInitialization: {
      AppDelegate.braze = braze
    }

    // ... React Native setup
    return true
  }
}
```

--------------------------------

### Manage Content Cards

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Fetch, refresh, and launch content cards. Log impressions and clicks for analytics. Listen for updates using `Braze.Events.CONTENT_CARDS_UPDATED`.

```typescript
const cards = await Braze.getContentCards();
Braze.requestContentCardsRefresh();
Braze.launchContentCards(); // default Braze UI

Braze.logContentCardImpression(cardId);
Braze.logContentCardClicked(cardId);
```

--------------------------------

### Log Custom Events and Purchases

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Log custom events with custom attributes and log purchase events including SKU, price, currency, quantity, and custom attributes. Request immediate data flush.

```typescript
Braze.logCustomEvent("purchase_completed", { sku: "sku-1" });
Braze.logPurchase("sku-1", "29.99", "USD", 1, { source: "cart" });
Braze.requestImmediateDataFlush();
```

--------------------------------

### Subscribe to In-App Messages (Custom Handling)

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Subscribe to in-app messages with `useBrazeUI: false` for custom UI rendering. Remember to log impressions and clicks manually.

```typescript
Braze.subscribeToInAppMessage(false, (event) => {
  const msg = event.inAppMessage;
  // Render your own UI from msg.message, msg.buttons, etc.
  Braze.logInAppMessageImpression(msg);
});
```

--------------------------------

### Wipe Data, Disable, and Enable SDK

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Use `wipeData()` for a full local reset (sign-out behavior, data deletion). `disableSDK()` stops data collection for opt-outs or restricted modes. `enableSDK()` re-activates the SDK.

```typescript
Braze.wipeData();
Braze.disableSDK();
Braze.enableSDK();
```

--------------------------------

### Configure Android Braze XML

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Add this XML to `res/values/braze.xml` to enable delayed initialization and configure FCM. Delayed initialization ensures the SDK waits for `Braze.initialize()` from JavaScript. Other native configurations are also applied at initialization time.

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- Enable delayed initialization so the SDK starts when
       Braze.initialize() is called from JavaScript. -->
  <bool name="com_braze_enable_delayed_initialization">true</bool>

  <!-- Additional native configuration (applied at initialization time) -->
  <bool name="com_braze_firebase_cloud_messaging_registration_enabled">true</bool>
  <string translatable="false" name="com_braze_firebase_cloud_messaging_sender_id">YOUR_SENDER_ID</string>
</resources>
```

--------------------------------

### Content Cards

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for fetching, refreshing, and launching content cards, as well as logging impressions and clicks.

```APIDOC
## Content Cards

### Description
APIs for fetching, refreshing, and launching content cards, as well as logging impressions and clicks.

### Methods
- `getContentCards(): Promise<ContentCard[]>`: Fetches the latest content cards.
- `requestContentCardsRefresh()`: Requests a refresh of content cards.
- `launchContentCards()`: Launches the default Braze UI for content cards.
- `logContentCardImpression(cardId: string)`: Logs an impression for a specific content card.
- `logContentCardClicked(cardId: string)`: Logs a click for a specific content card.
- `addListener(event: Braze.Events.CONTENT_CARDS_UPDATED, listener: () => void)`: Listens for updates to content cards.
```

--------------------------------

### Request Push Permissions and Register Token

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Request push notification permissions for alerts, badges, and sounds. Register the push token, which is typically handled natively.

```typescript
Braze.requestPushPermission({
  alert: true,
  badge: true,
  sound: true,
});
// Token registration is usually handled natively; see docs for your setup.
Braze.registerPushToken(token);
```

--------------------------------

### Data Management and SDK State

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for managing local SDK data, including wiping data, disabling, and enabling the SDK.

```APIDOC
## Data Management and SDK State

### Description
APIs for managing local SDK data, including wiping data, disabling, and enabling the SDK.

### Methods
- `wipeData()`: Clears all local Braze data for the current install. Use for sign-out, data deletion requests, or QA resets.
- `disableSDK()`: Stops the SDK from operating. Use for user opt-outs or restricted modes.
- `enableSDK()`: Re-enables the SDK after it has been disabled.

### Notes
- `changeUser` only attributes new activity; it does not clear cached SDK data.
- `wipeData` is a full local reset.
- On **iOS**, `enableSDK` may not apply until the next app launch.
```

--------------------------------

### Change User and Set Attributes

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Use these methods to identify users and set their custom attributes. SDK authentication can be passed as an argument to `changeUser` or set separately.

```typescript
import Braze from "@braze/react-native-sdk";

Braze.changeUser("user-123");
Braze.setEmail("user@example.com");
Braze.setCustomUserAttribute("plan", "premium");
Braze.addAlias("external_id", "marketing_id");
Braze.addToSubscriptionGroup("NEWSLETTER_GROUP_UUID");
```

--------------------------------

### User Management

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for managing user profiles and attributes within Braze.

```APIDOC
## User Management

### Description
APIs for managing user profiles and attributes within Braze.

### Methods
- `changeUser(userId: string, signature?: string)`: Changes the current user. Optionally accepts an SDK authentication signature.
- `setEmail(email: string)`: Sets the email address for the current user.
- `setCustomUserAttribute(attributeName: string, value: string | number | boolean)`: Sets a custom user attribute.
- `addAlias(aliasType: string, aliasId: string)`: Adds an alias to the current user.
- `addToSubscriptionGroup(groupId: string)`: Adds the current user to a subscription group.

### SDK Authentication
Optional SDK Authentication: pass a signature as the second argument to `changeUser`, or call `Braze.setSdkAuthenticationSignature(signature)` when enabled in the dashboard.
```

--------------------------------

### Subscribe to Braze SDK Events

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Use Braze.addListener to subscribe to SDK events. The returned subscription object has a .remove() method to stop listening. Ensure to manage subscriptions to prevent memory leaks.

```typescript
import Braze from "@braze/react-native-sdk";

const subscription = Braze.addListener(
  Braze.Events.CONTENT_CARDS_UPDATED,
  (update) => {
    console.log("Content cards:", update.cards);
  }
);
```

--------------------------------

### Push Notifications

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for requesting push notification permissions and registering push tokens.

```APIDOC
## Push Notifications

### Description
APIs for requesting push notification permissions and registering push tokens.

### Methods
- `requestPushPermission(options: PushPermissionOptions)`: Requests push notification permissions.
- `registerPushToken(token: string)`: Registers the push token with Braze.
- `getInitialPushPayload(): Promise<PushNotificationPayload | null>`: Retrieves the initial push payload when the app opens from a notification (requires native hooks).
- `addListener(event: Braze.Events.PUSH_NOTIFICATION_EVENT, listener: (payload: PushNotificationPayload) => void)`: Listens for push notification events (Android-only).

### Notes
- `getInitialPushPayload` is useful to avoid RN `Linking` race conditions when the app opens from a notification.
- `Braze.addListener(Braze.Events.PUSH_NOTIFICATION_EVENT, ...)` is **Android-only**.
```

--------------------------------

### Analytics and Purchases

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for logging custom events and purchases, and requesting immediate data flushing.

```APIDOC
## Analytics and Purchases

### Description
APIs for logging custom events and purchases, and requesting immediate data flushing.

### Methods
- `logCustomEvent(eventName: string, customData?: object)`: Logs a custom event with optional custom data.
- `logPurchase(sku: string, price: string, currency: string, quantity: number, customData?: object)`: Logs a purchase event. Note: `price` is a string.
- `requestImmediateDataFlush()`: Requests an immediate flush of analytics data.

### Notes
- `logPurchase` takes **price as a string**.
```

--------------------------------

### Feature Flags

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for fetching feature flags, checking their enabled status and properties, and logging impressions.

```APIDOC
## Feature Flags

### Description
APIs for fetching feature flags, checking their enabled status and properties, and logging impressions.

### Methods
- `getFeatureFlag(flagName: string): Promise<FeatureFlag | undefined>`: Retrieves a feature flag by its name.
- `refreshFeatureFlags()`: Refreshes all feature flags.
- `logFeatureFlagImpression(flagName: string)`: Logs an impression for a feature flag.

### Usage
```typescript
const flag = await Braze.getFeatureFlag("new_checkout");
if (flag?.enabled) {
  const rollout = flag.getNumberProperty("rollout_percentage") ?? 0;
}
```
```

--------------------------------

### In-App Messages

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for handling in-app messages, either with the default Braze UI or custom handling.

```APIDOC
## In-App Messages

### Description
APIs for handling in-app messages, either with the default Braze UI or custom handling.

### Methods
- `subscribeToInAppMessage(useBrazeUI: boolean, callback: (event: InAppMessageEvent) => void)`: Subscribes to in-app messages. If `useBrazeUI` is `false`, a callback is provided to handle custom rendering.
- `logInAppMessageImpression(message: InAppMessage)`: Logs an impression for a given in-app message.

### Usage
- With the **default Braze UI**, follow the [in-app message documentation](hhttps://www.braze.com/docs/developer_guide/in_app_messages?sdktab=react%20native); you typically do **not** need to call `subscribeToInAppMessage` only to show default UI.
- For **custom** handling, subscribe with `useBrazeUI: false`, then log impressions/clicks as needed.
```

--------------------------------

### Banners

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

APIs for requesting banner refreshes and retrieving banner data, including a native Banner view.

```APIDOC
## Banners

### Description
APIs for requesting banner refreshes and retrieving banner data, including a native Banner view.

### Methods
- `requestBannersRefresh(placementIds: string[])`: Requests a refresh for specified banner placements.
- `getBanner(placementId: string): Promise<Banner | undefined>`: Retrieves banner data for a given placement.

### Native View
- `<Braze.BrazeBannerView placementID="homepage_banner" />`: Use the native Banner view.
```

--------------------------------

### Remove Braze SDK Event Listener

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

Call the .remove() method on the subscription object returned by Braze.addListener to unsubscribe from events. This is crucial for preventing memory leaks, especially in React components.

```typescript
subscription.remove();
```

--------------------------------

### Manage Event Listener in React Component

Source: https://github.com/braze-inc/braze-react-native-sdk/blob/master/README.md

In React components, store the event subscription and call its .remove() method within the cleanup function of a useEffect hook. This ensures the listener is properly removed when the component unmounts.

```typescript
useEffect(() => {
  const sub = Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
    setCards(update.cards);
  });
  return () => sub.remove();
}, []);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.