> For the complete documentation index, see [llms.txt](https://developer.tryreferd.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.tryreferd.com/installing-referd/referd-for-react/show-referd-user-profile.md).

# Initialize Referd User Profile

Showing the **Referd** widget on your mobile application is slightly different than showing it on the website. You have two options; first, if you want to design your customer interface, you will use our set of REST APIs. \
\
The other option as this section elaborates, is through using our react native SDK.

Using the SDK, you can open the **Referd** user profile from a button in your app, programmatically when someone does something, or from a persistent button that sits over your app’s UI.

When you trigger the **Referd** user profile, your player is presented with a home screen. This is configurable inside **Referd** to change how it looks and what’s presented.

From there, your user can check his progress across different **Referd** programs as per your configurations.

<figure><img src="/files/mBylAlCOJa6y8ppDF8FH" alt=""><figcaption></figcaption></figure>

To show the **Referd** user profile that contains the user details use the below steps.

```typescript
import {GameballWidget} from 'react-native-gameball';
```

There are two ways to view the widget.

### Show as standalone screen

```markup
<GameballWidget />
```

### **Show as** Modal

```markup
<GameballWidget 
  modal={true}
/>
```

and then to open the widget you need to call the **showProfile** function on the ref property of the widget

Example on running the widget as a Modal:

#### Class component

```tsx
return (
      <View style={{ flex: 1 }}>
        <Button
          title={'open widget'}
          onPress={() => this.widget.showProfile()}
        />
        <GameballWidget
          ref={(ref) => this.widget = ref}
          modal={true}
        />
      </View>
)
```

#### Functional component

```tsx
const ref = createRef();
return (
  <View>
    <Button title="Open modal" onPress={() => ref.current.showProfile()} />
    <GameballWidget modal={true} ref={ref} />
  </View>
)
```

### Advanced Techniques: Deep Links

In certain scenarios, where you offer a product as a free reward, you might want to showcase this product within the Referd widget along with a deep link. When users click on the deep link, they will be seamlessly redirected to the product page within your app, where they can obtain more information and take further action. To enable this functionality, you need to follow the steps outlined below.

1. Create a custom Referd widget that is based on the default widget and implemented as a ForwardRefRenderFunction.
2. Override the WebView's 'onShouldStartLoadWithRequest' event with a customized implementation.
   * In this implementation, detect URLs that begin with '{your\_app\_deep\_link\_prefix}://' to identify deep links specific to your app.
   * Handle these deep links using the main app's action to process and dispatch them, instead of relying on the WebView."


---

# 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://developer.tryreferd.com/installing-referd/referd-for-react/show-referd-user-profile.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.