> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/customize-click-behaviors-react-native.md).

# Customize click behaviors (React Native)

The SDK provides behavior callbacks to customize click behaviors, including those for the video CTA button, product cards, and shopping CTA button.

### Customize video overlay CTA button click behavior

Set `FireworkSDK.getInstance().onCustomCTAClick` to customize video overlay CTA button click behavior. The event type is [CustomCTAClickEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/CustomCTAClickEvent.html).

<pre class="language-typescript"><code class="lang-typescript"><strong>FireworkSDK.getInstance().onCustomCTAClick = async (event) => {
</strong>  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
}
</code></pre>

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

### Customize shopping click behaviors <a href="#customize-product-card-click-behavior" id="customize-product-card-click-behavior"></a>

#### Customize product card click behavior <a href="#customize-product-card-click-behavior" id="customize-product-card-click-behavior"></a>

Set `FireworkSDK.getInstance().shopping.onCustomTapProductCard` to customize product card click behavior. The event type is [CustomTapProductCardEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/CustomTapProductCardEvent.html).

```typescript
FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize shopping CTA click behavior <a href="#customize-product-card-click-behavior" id="customize-product-card-click-behavior"></a>

We support customizing the default shopping CTA button text to "Add to cart" or "Shop now". The usage codes are:

```typescript
FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
  ctaButton: {
    text: 'shopNow', // 'addToCart' or 'shopNow'
  },
};
```

Set `FireworkSDK.getInstance().shopping.onShoppingCTA` to customize shopping CTA click behavior. And the host app can return a [ShoppingCTAResult](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/ShoppingCTAResult.html) object to tell FireworkSDK the result. The event type is [ShoppingCTAEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/ShoppingCTAEvent.html).

```typescript
FireworkSDK.getInstance().shopping.onShoppingCTA = async (event) => {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
  
  return {
    res: 'success',
  };
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize product link button click behavior

Set `FireworkSDK.getInstance().shopping.onCustomClickLinkButton` to customize product card click behavior. The event type is [CustomClickLinkButtonEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/CustomClickLinkButtonEvent.html).

```typescript
FireworkSDK.getInstance().shopping.onCustomClickLinkButton = async (event) => {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize product link button click behavior

The cart icon is hidden by default. You can show the cart icon by the following codes:

```typescript
FireworkSDK.getInstance().shopping.cartIconVisible = true;
```

Set `FireworkSDK.getInstance().shopping.onCustomClickCartIcon` to customize product card click behavior.

```typescript
FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async (event) => {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

### Customize livestream link interaction click behavior

Set `FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick` to customize livestream link interaction click behavior. The event type is [CustomLinkInteractionClickEvent](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/CustomLinkInteractionClickEvent.html).

```typescript
FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick = async (
  event
) => {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

### Navigate to the host app page

Typically, we need to navigate to the host app page when customizing click behaviors. However, the React Native navigation stack may be obscured by the Firework full-screen player. When the host app navigates to a new React Native page (for instance, using the navigate method of [React Navigation](https://reactnavigation.org/docs/getting-started)) within the React Native navigation stack when customizing click behaviors, it will be obscured by the Firework full-screen player.

**As illustrated in the following code snippets, you can invoke our API to convert the Firework full-screen player (if it exists) into a floating player or close it (if it exists) when customizing click behaviors.** This approach ensures that the new React Native page will not be obscured by the Firework full-screen player.

```typescript
FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
  // Wait for the fullscreen player is transitioned to floating player or closed
  await FireworkSDK.getInstance().navigator.tryStartFloatingOrCloseFullScreen();
  
  // Navigate to host app page within React Native navigation stack
  navigation.navigate('/host_app_page', { url: event.url });
};
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/customize-click-behaviors-react-native.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.