Quick-start
Installation
Refer to the installation pagefor installation steps.
Flagship Usage
Initialization
Step 1: initialize the SDK with 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
, apiKey
, and visitorData
.
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
provided. No additional action is necessary. For more details- The key
hasConsented
is required in thevisitorData
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 flagobject. 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 hook
- or use the useFlagship hook
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>
);
};
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- These hooks are designed to be used in a component that is either within the
FlagshipProvider
or a descendant of a component withinFlagshipProvider
.
Tracking hits
Step 4: Send hits to Flagship using the sendHitsmethod from the useFlagshiphook. These hits help validate your objectives (KPIs) set up in your campaign.
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>
);
};
Updated 6 months ago