# Quick-start

## Installation

Refer to the [installation page](doc:react-native-installation)for installation steps.

## Flagship Usage

### Initialization

**Step 1**: initialize the SDK with [`FlagshipProvider`](doc:react-native-reference#flagshipprovider) . This is usually done in your `App.js` file to ensure your entire application is wrapped with the provider. Ensure also to include the required props such as [`envId`](doc:react-native-reference#flagshipprovider) , [`apiKey`](doc:react-native-reference#flagshipprovider) , and [`visitorData`](doc:react-native-reference#visitordata) .

```jsx
import React from "react";
import { FlagshipProvider } from "@flagship.io/react-native-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{
        id: "YOUR_VISITOR_ID",
        hasConsented: true, // This is required
        context: {
          key:"value"
        },
      }}
    >
      {/* ... */}
    </FlagshipProvider>
  </>
);
```

> 👍 Good to know
>
> * When the SDK is started with all the required props, it automatically fetches flags based on [`visitorData`](doc:react-native-reference#visitordata) provided. No additional action is necessary. [For more details](doc:react-native-reference#flagshipprovider)
> * The key `hasConsented` is required in the [`visitorData`](doc:react-native-reference#visitordata) props.

\\

### Getting Flags

**Steps 2 and 3** involve retrieving your flag, and reading your flag's value.

The **React SDK** provides two ways to retrieve a [flag](doc:react-native-reference#flag-class)object. This object includes methods to retrieve the flag value, access flag metadata, expose the flag, verify the flag's existence, and get the flag status.

You have two options:

* Use the [useFsFlag](doc:react-native-reference#usefsflag-hook) hook
* or use the [useFlagship](doc:react-native-reference#useflagship-hook) hook

```jsx
import React from "react";
import { useFsFlag } from "@flagship.io/react-native-sdk";

export const MyReactComponent = () => {
	//Step 2:  Retrieves a flag named "backgroundColor"
  const flag = useFsFlag("backgroundColor")
  
  //Step 3: Returns the value of the flag or if the flag does not exist, it returns the default value "green" 
  const flagValue = flag.getValue("green")
  
  return (
    <button
      style={{
        height: "200px",
        width: "200px",
        backgroundColor: flagValue,
      }}
    >
      {"I'm a square with color=" + flagValue}
    </button>
  );
};
```

```jsx
import React from "react";
import { useFlagship } from "@flagship.io/react-native-sdk";

export const MyReactComponent = () => {
  const { getFlag } = useFlagship()
  
  /*Step 1: Retrieves a flag named "backgroundColor", 
  and if the flag does not exist, it returns the default value "green"*/
  const flag = getFlag("backgroundColor","green")
  
  //Step 3: get the flag value 
  const flagValue = flag.getValue()
  
  return (
    <button
      style={{
        height: "200px",
        width: "200px",
        backgroundColor: flagValue,
      }}
    >
      {"I'm a square with color=" + flagValue}
    </button>
  );
};
```

> 👍 Good to know
>
> * By default, the SDK assumes that the visitor has been exposed to the flag when `flag.getValue()` is called, so it sends the flag exposure hit to flagship server. However, this behavior can be changed. [Click here for more details](doc:react-native-reference##getvalue-method)
> * These hooks are designed to be used in a component that is either within the [`FlagshipProvider`](doc:react-native-reference#flagshipprovider) or a descendant of a component within [`FlagshipProvider`](doc:react-native-reference#flagshipprovider) .

\\

### Tracking hits

**Step 4**: Send hits to Flagship using the [sendHits](doc:react-native-reference#sendhits-method)method from the [useFlagship](doc:react-native-reference#useflagship-hook)hook. These hits help validate your objectives (KPIs) set up in your campaign.

```jsx
import React from "react";
import { useFlagship, HitType } from "@flagship.io/react-native-sdk";

export const MyReactComponent = () => {
  const fs = useFlagship()
  
  return (
    <button
    	onClick={()=>{
        //Step 4: Send a hit
  			fs.sendHits({
          type: HitType.EVENT, 
          category: EventCategory.USER_ENGAGEMENT,
          action: "click",
          label: "label",
          value: 100,
        })
  		}}
    >
      Send a hit
    </button>
  );
};
```


---

# Agent Instructions: 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:

```
GET https://docs.abtasty.com/server-side/sdks/react-native/archived-versions/archived-react-native-v4/archived-react-native-v4-quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.