# React-native v3.3.X ### Introduction #### SDK overview > 🚧 Flagship React SDK only works with React hooks > > Our React SDK only works with react hooks, if you want to use without it, you should use our [Javascript SDK](https://docs.developers.flagship.io/docs/js-sdk) Welcome to the Flagship React Native SDK documentation! The following documentation helps you to run Flagship on your React Native environment. Flagship React Native SDK provides a ``, which makes Flagship features available to the rest of your app.\ Flagship features are accessible using Flagship hooks, have a look at the documentation for details. Feel free to [contact us](mailto:product.feedback@abtasty.com?subject=Flagship%20Developer%20Documentation) if you have any questions regarding this documentation. #### SDK features This SDK version helps you: * Set a [visitor ID](doc:glossary#visitor-id) * Update [visitor context](doc:glossary#user-context) * Assign campaigns via the [Decision API](doc:decision-api) or via the [Bucketing](doc:bucketing) * Get Flags * Manage visitor consent * Activate campaigns * Send hits to our [Universal Collect](doc:universal-collect-documentation) * Manage visitor cache #### Prerequisites * **Node.js**: version 6.0.0 or later * **Npm**: version 5.2.0 or later * **React**: version 16.8.0 or later (the SDK only supports hooks for now) #### Good to know * [Github repository](https://github.com/flagship-io/flagship-react-native-sdk) * Typescript code supported ### Getting started #### Initialization There are four steps to follow to get started with the React Flagship SDK. 1. **Install** the node module ```shell npm install @flagship.io/react-native-sdk ``` > 📘 Information > > Please ensure that you have also installed the [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@react-native-async-storage/async-storage) package. If it's not already in your project, you'll need to add it separately. 2. **Import** the Flagship React provider *In most cases, do this in your`App.js` file to wrap your entire app with the provider.* ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` 3. **Initialize** the provider *You must at least include the required props like`envId`, `apiKey`, `visitorData`.* ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdkk"; const App = () => ( <> {/* [...] */} ); ``` 4. Use a **Flagship hook** in a component *In most case, you will get the desired flags.* ```javascript import React from "react"; import { useFsFlag } from "@flagship.io/react-native-sdk"; import { View, Text } from "react-native"; export const MyReactComponent = () => { const flagBackgroundColor = useFsFlag("backgroundColor","green") return ( {"I'm a square with color=" + flagBackgroundColor.getValue()} ); }; ``` ### API Reference #### `FlagshipProvider` Here is the full list of props available to use inside the `FlagshipProvider` React component: ``` Type Default Description ``` ``` string Required Environment id provided by Flagship. apiKey string Required Api authentication key provided by Flagship. visitorData object null This is the data to identify the current visitor using your app. **[See arguments](#visitordata)** onInitStart function():void null Callback function called when the SDK starts initialization. onInitDone function():void null Callback function called when the SDK ends initialization. onUpdate function(object): void null Callback function called when the SDK is updated. For example, after a synchronize is triggered or visitor context has changed. **[See arguments](#onupdate)** onBucketingSuccess function(object): void null Define a callable in order to get callback when the first bucketing polling succeed.
[see arguments](#onbucketingsuccess) onBucketingFail function(object): void null Define a callable to get callback when the first bucketing polling failed.
[see arguments](#onbucketingfail) onBucketingUpdated function(Date): void null Define a callable to get callback each time bucketing data from Flagship has updated.
[see arguments](#onbucketingupdated) initialFlagsData Array(object) undefined This is a set of [flag data](#flag-data-shape) provided to avoid the SDK to have an empty cache during the first initialization. initialCampaigns object undefined This is an object of the data received when fetching the Flagship decision API (decisionMode="API").\ Providing this property avoid the SDK to have an empty cache during first initialization. initialBucketing object undefined This is an object of the data received when fetching bucketing endpoint.
Providing this prop will make bucketing ready to use and the first polling will immediatly check for an update. loadingComponent React.ReactNode undefined This component will be rendered when Flagship is loading at first initialization only. By default, the value is undefined. It means it will display your app and it might display default flags value for a very short moment. fetchNow boolean true `Decide to fetch automatically flags when SDK is initialized.` * \*NOTE\*\*: When `fetchNow=false` the property `loadingComponent` will be ignored. enableClientCache boolean true Indicates whether enables or disables the client cache manager. By enabling the client cache, it will allow you to keep cross sessions visitor experience. * \*Note\*\*: The client cache is useful only when you do not specify a visitor id when creating a visitor. From there, you only need to be focus on handling the visitor context and whether he is authenticated or not. That's it. * \*Note 2\*\*: Not available on server side, this setting will be ignored decisionApiUrl string [https://decision.flagship.io/v2](https://decision.flagship.io/v2) This setting can be useful if you need to simulate the API for tests such as end-to-end or if you want to move to an earlier version of the Flagship API. decisionMode `DECISION-API` \| `Bucketing` `DECISION-API` `Indicates the behavior of the SDK.` In API mode, it will get the modifications using the Flagship decision API. With Bucketing, it will load all campaigns once and compute the variation assignment of the visitor locally. [learn more](#decision-mode) pollingInterval number 1 Indicates the polling interval period in seconds when SDK is running Bucketing mode (decisionMode="Bucketing"). For example, if pollingInterval=5, a bucketing call will be\ trigger in background every 5 seconds. * \*Note 1**:**pollingInterval\*\* can't be lower than 1 second. **Note 2**: if bucketing is enabled and **pollingInterval**\ value is **0**, the polling will be done once. timeout number 2 Specify timeout in seconds for api request.
**Note:** timeout can't be lower than 0 second. logLevel number 9 Set the maximum log level to display
[see`LogLevel`](#loglevel) logManager object Defined Specify a custom implementation of LogManager in order to receive logs from the SDK. * \*Note:\*\* The object must fill Interface [`IFlagshipLogManager`](#iflagshiplogmanager) activateDeduplicationTime number 2.5 Specify delay in seconds of activate deduplication. After an activate is sent, all future sending of this activate will be blocked until the expiration of the delay. * \*Note:\*\* if 0 is given, no deduplication process will be used hitDeduplicationTime number 2.5 Specify delay in seconds of hit deduplication. After a hit is sent, all future sending of this hit will be blocked until the expiration of the delay. * \*Note:\*\* if 0 is given, no deduplication process will be used visitorCacheImplementation object Defined Define an object that implement the interface [`visitorCacheImplementation`](#visitor-cache), to handle the visitor cache. [see cache-manager](#managing-visitor-cache) hitCacheImplementation object Defined Define an object that implement the interface [`IHitCacheImplementation`](#hit-cache), to handle the visitor cache. [see cache-manager](#managing-visitor-cache) disableCache boolean false if it's set to true, hit cache and visitor cache will be disabled otherwise will be enabled. [see cache-manager](#cache-manager) statusChangedCallback function(number):void undefined Define a callable in order to get callback when the SDK status has changed.
[see arguments](#statuschangedcallback). onUserExposure `deprecated` function(object):void undefined Optional\ Define a callable to get callback each time a Flag have been exposed to a visitor (activation hit has been sent) by SDK\ [see arguments](#onuserexposure) onLog function(level: LogLevel, tag: string, message: string):void undefined **Optional**\ Define a callable to get a callback whenever the SDK needs to report a log\ [see arguments](#onlog) trackingManagerConfig object defined Define options to configure hit batching\ [trackingManagerConfig](#trackingmanagerconfig) onVisitorExposed function(object):void undefined **Optional**\ Define a callable to get callback each time a Flag has been exposed to a visitor (When a flag has been seen by your visitor) and succeeded.\ [see arguments](#onvisitorexposed) fetchThirdPartyData boolean false **Optional**\ **Bucketing mode only**\ If true, will fetch the visitor's segment from [universal data connector](https://developers.abtasty.com/docs/data/universal-data-connector) each time [fetchFlags](#fetching-flags) is called and append those segments fetchFlagsBufferingTime number 2 **Optional** You can specify a delay in seconds for fetch flags call buffering. This means that after the SDK has fetched flags, they will be buffered for the specified delay. During this delay, any subsequent fetch flags calls will return the same flags. Note: \- If a value of 0 is given, no buffering process will be used. * If visitor data has changed, the SDK bypass the buffering. disableDeveloperUsageTracking boolean false Our SDK will collect `usage` and `troubleshooting` data to help us improve our product and help you in case there is any issue in the implementation. If you set this method to `true` we won't collect data and won't be able to help you investigate in case of issues. ``` | Props | | ----- | | envId | \\ > 📘 > > When bucketing is running (`decisionMode="BUCKETING"`), the polling will restart its interval period based on the moment when one of the following props changes after first rendering : > > * envId > * apiKey > * decisionMode > 📘 > > Any change of props **`visitorData`** will [fetch flags](#useflagship-output-fetchflags) automatically. > > On SDK initialization, if the props **`visitorData`** is null, no visitor will be initialized until set \\ **visitorData** The `visitorData` object takes the following arguments: ``` Type Default Description ``` ``` string undefined **Optional**\ Unique identifier for the current visitor. This can be an ID from\ your database or a session ID.\ Learn more NOTE: The visitor id must be a string and can't be a number. NOTE 2: If you do not specify a value, the id will be either\ automatically generated or will be the visitor id from previous session\ (if enableClientCache equals true). context object \{} **Optional**\ JSON object of key-value pairs describing the visitor and device context. **[Learn more](doc:glossary#user-context)** isAuthenticated boolean false **Optional**\ Indicates if the visitor is authenticated (true) or not (false, by default). NOTE: The SDK will listen the change of this value (switching from true to false or from false to true). This attribute is used for the experience continuity.\ Learn more hasConsented boolean true Specify if visitor has consented for protected data usage. ``` | Argument | | -------- | | id | \\ **Decision Mode** **`DECISION-API`Mode** (by default) When the SDK is running in `API` mode, the campaign assignments and targeting validation will be run through our [Decision API](https://github.com/flagship-io/Gitbook/blob/main/docs/decision-api/README.md#campaigns). In this mode, each time a new Decision is required, it will create an HTTPS request to the API.\ This mode is used by default for all our SDK. **`Bucketing`Mode** When the SDK is running in `Bucketing` mode, the SDK downloads all the campaigns configurations at once in a single bucketing file so that variation assignment can be computed client-side by the SDK. This bucketing file is stored in cache and will only be downloaded again when campaign configurations are modified in the Flagship interface. [**Learn more**](https://github.com/flagship-io/Gitbook/blob/main/bucketing/README.md) `DecisionMode` is an enum defined decision type | Key | Value | Type | Description | | ------------- | --------- | ------ | ------------------------------ | | DECISION\_API | API | string | Flagship SDK mode Decision API | | BUCKETING | BUCKETING | string | Flagship SDK mode bucketing | \\ **onUpdate** The `onUpdate` object has one argument with the following shape: | Key/Property | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fsModifications | Array or null. It contains the last modifications saved in cache. When `null`, it means the SDK still not ready. You can check the SDK status with other attributes. | | config | Object. The current configuration running on the SDK. | | status | Object. Contains informations about the actual SDK status. (Details below 👇) | `status` object shape: | Key/Property | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | isLoading | Boolean. When `true`, the SDK is still not ready to render your App otherwise it'll use default modifications. | | isSdkReady | Boolean. `true` after it has fully finished initialization tasks, `false` otherwise. | | isVisitorDefined | Boolean. When `true` the flagship visitor instance is truthy, false otherwise. | | hasError | Boolean. `true` when an error occured inside the SDK, `false` otherwise. | | lastRefresh | String or null. The last update date occured on the flagship visitor instance. | | firstInitSuccess | String or null. When `null` no initialization succeed yet. When `string` contains stringified date of last successful initialization. | \\ **onBucketingSuccess** The `onBucketingSuccess` function has one argument with the following shape: | Key/Property | Description | | ------------ | ----------------------------------------------------------------- | | status | String. Returns either `200` (fresh update) or `304` (no change). | | payload | Object. The latest bucketing data received. | \\ **onBucketingFail** The onBucketingFail function has one argument | Argument | Type | Description | | -------- | ------ | -------------------------- | | error | object | Returns the error occurred | \\ **onBucketingUpdated** The onBucketingUpdated function has one argument | Argument | Type | Description | | ---------- | ---- | --------------------------------- | | lastUpdate | Date | Get the date of the latest update | \\ **statusChangedCallback** The statusChangedCallback function has one argument | Argument | Type | Description | | -------- | ------ | --------------------------------------------------------- | | status | number | Status of the SDK. [see`FlagshipStatus`](#flagshipstatus) | \\ **onUserExposure** The `onUserExposure` function has one argument with the following shape: | Argument | Type | Description | | -------- | ---------------- | -------------------------- | | param | UserExposureInfo | Get data from exposed flag | UserExposureType shape ```typescript type UserExposureInfo = { flagData: { key: string value: unknown metadata: IFlagMetadata }, visitorData: { visitorId: string anonymousId: string|null context: Record } } ``` ``` Type Description ``` ``` object * \*key\*\*: flag key * \*value\*\*: flag value * \*metadata\*\*: Campaign information metadata [see](#getting-flags-campaigns-metadata) visitorData object * \*visitorId\*\*: visitor id * \*anonomousId\*\*: anonymous id * \*context\*\*: visitor context ``` | Key/Property | | ------------ | | flagData | \\ **OnVisitorExposed** In some cases, you'll need to send information about the exposure (When a flag has been seen by your visitor), like sending visitor and flag data to third parties. To centralize it, we provide a callback in the configuration option of the SDK. The `OnVisitorExposed` function has one argument with the following shape: | Argument | Type | Description | | -------- | ---------------- | -------------------------- | | param | OnVisitorExposed | Get data from exposed flag | **OnVisitorExposed** shape ```javascript type OnVisitorExposed ={ exposedVisitor: { id: string anonymousId?:string|null context: Record }, fromFlag: { key: string value: unknown defaultValue: unknown metadata: IFlagMetadata } } ``` ``` Type Description ``` ``` object This object represent the exposed visitor fromFlag object This object represent the exposed flag.\ (The flag that has triggered the exposure) ``` | Key/Property | | -------------- | | exposedVisitor | **exposedVisitor** object shape | Key/Property | Type | Description | | ------------ | ---------------------------------------- | --------------- | | id | string | visitor id | | anonomousId | string | anonymous id | | context | Record\ | visitor context | **fromFlag** object shape | Key/Property | Type | Description | | ------------ | ------------- | ------------------------------------------------------- | | key | string | flag key | | value | unknown | flag value | | defaultValue | unknown | flag default value | | metadata | IFlagMetadata | Campaign information metadata [see](#metadata-property) | \\ Here is an example on how to use this callback: [Example with Mixpanel integration](https://docs.developers.flagship.io/docs/integrate-with-mixpanel)\ [Example with Segment integration](https://docs.developers.flagship.io/docs/integrate-with-segmentcom) Learn more about [getting flags](#getting-flags) \\ **onLog** The `onLog` function has 3 arguments | Argument | Type | Description | | -------- | ------ | ---------------------------------------------- | | level | number | Get the log level. [see `LogLevel`](#loglevel) | | tag | string | Get the function that triggered the log | | message | string | Get a description of the log | Usage : ```javascript import React from "react"; import { FlagshipProvider, LogLevel } from "@flagship.io/react-native-sdk"; const App = () => ( <> { console.log(`[${LogLevel[level]}] [${tag}] : ${message}`); }} > {/* [...] */} ); ``` \\ **FlagshipStatus** `FlagshipStatus` is an enum defining the different status of Flagship SDK | Key | Value | Type | Description | | ---------------- | ----- | ---- | ----------------------------------------------------------------------------------------------------------------------- | | NOT\_INITIALIZED | 0 | int | It is the default initial status. This status remains until the sdk has been initialized successfully. | | STARTING | 1 | int | Flagship SDK is starting. | | POLLING | 2 | int | Flagship SDK has been started successfully but is still polling campaigns. | | READY\_PANIC\_ON | 3 | int | Flagship SDK is ready but is running in Panic mode: All features are disabled except the one which refresh this status. | | READY | 4 | int | Flagship SDK is ready to use. | \\ **Flag data shape:** ```typescript type FlagDTO = { key: string; campaignId: string; variationGroupId: string; variationId: string; isReference?: boolean; campaignType?: string; slug?:string|null; value: any; } ``` | Key\Property | Type | Description | | ------------------ | ------- | ---------------------------------------- | | key | string | Flag name | | campaignId | string | Campaign ID | | campaignName | string | Campaign name | | variationGroupId | string | Variation group ID | | variationGroupName | string | Variation group name | | variationId | string | The variation ID assigned to the visitor | | variationName | string | Variation name | | isReference | boolean | Specify if its the reference variation | | slug | string | campaign slug | | value | any | Value of flag | \\ **LogLevel** LogLevel is an enum defined the level of log to receive | Key | Value | Type | Description | | --------- | ----- | ---- | ----------------------------------------- | | NONE | 0 | int | Logging will be disabled. | | EMERGENCY | 1 | int | Only emergencies will be logged | | ALERT | 2 | int | Only alerts and above will be logged. | | CRITICAL | 3 | int | Only critical and above will be logged. | | ERROR | 4 | int | Only errors and above will be logged. | | WARNING | 5 | int | Only warnings and above will be logged. | | NOTICE | 6 | int | Only notices and above will be logged. | | INFO | 7 | int | Only info logs and above will be logged. | | DEBUG | 8 | int | Only debug logs and above will be logged. | | ALL | 9 | int | Everything will be logged. | \\ **IFlagshipLogManager** The aims of this Interface is to define methods that an object must have in order to receive Flagship SDK logs ```typescript interface IFlagshipLogManager { emergency(message: string, tag: string): void; alert(message: string, tag: string): void; critical(message: string, tag: string): void; error(message: string, tag: string): void; warning(message: string, tag: string): void; notice(message: string, tag: string): void; info(message: string, tag: string): void; debug(message: string, tag: string): void; log(level: LogLevel, message: string, tag: string): void; } ``` ``` Type Description ``` ``` string Get a description of the log tag string Get the function that triggered the log level number Get the log level. * \*Note: *only for log method*\*\* [see `LogLevel`](#loglevel) ``` | Argument | | -------- | | message | Usage : ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; import * as Sentry from "@sentry/react-native"; const customLog = { emergency(message, tag) { this.log(LogLevel.EMERGENCY, message, tag); }, alert(message, tag) { this.log(LogLevel.ALERT, message, tag); }, critical(message, tag) { this.log(LogLevel.CRITICAL, message, tag); }, error(message, tag) { this.log(LogLevel.ERROR, message, tag); }, warning(message, tag) { this.log(LogLevel.WARNING, message, tag); }, notice(message, tag) { this.log(LogLevel.NOTICE, message, tag); }, info(message, tag) { this.log(LogLevel.INFO, message, tag); }, debug(message, tag) { this.log(LogLevel.DEBUG, message, tag); }, log(level, message, tag) { Sentry.captureMessage(`[${LogLevel[level]}] [${tag}] : ${message}`); }, }; const App = () => ( <> {/* [...] */} ); ``` \\ **trackingManagerConfig** The SDK allows you to send hits with a batching system, there is 3 options to configure it : `cacheStrategy`, `poolMaxSize` and `batchIntervals`. The advantage of batch processing with the TrackingManager is to use less network traffic, avoid loss of hits with cache, and catch all hits that would failed and resend them. All hits will first be added into an internal pool as they are emitted by visitors. And This pool is going to be emptied by batching all hits from the pool and then sending the batch when the `poolMaxSize` is reached or when the `batchIntervals` timer is triggered. If a batch fails, all of the hits inside the failed batch will be added back into the pool for future iteration, the cache will be updated depending on the cache strategy used. At any time, when your app is about to close or crash, you should call [`useFlagship().close()`](#useflagship) or `Flagship.close()` to batch and send all hits that are in the pool. **options:** ``` Type Default value Description ``` ``` CacheStrategy | number `CONTINUOUS_CACHING`: 0 Define the strategy that will be used for hit caching\ [see cacheStrategy](#cachestrategy) poolMaxSize number `10` Define the minimum number of hits the pool must reach to automatically batch all hits in the pool and send it * \*Note\*\*: * Must be greater than 5 otherwise default value will be used * Having a large poolMaxSize can lead to performance issues batchIntervals number `5s` Define a regular interval in seconds to trigger batch processing * \*Note\*\*: * The process will batch all hits from the pool whether poolMaxSize is reached or not * Must be between 1sec and 10800s (3hours). Otherwise default value will be applied ``` | Key | | ------------- | | cacheStrategy | \\ **CacheStrategy** `cacheStrategy` is an enum defining the different caching strategies ``` Type value Description ``` ``` number 0 When a hit is emitted, it will be first cached in database using [IHitCacheImplementation](#hit-cache) and added into the pool, then after batching and sending, it will also be flushed from database using [IHitCacheImplementation](#hit-cache). * \*Note\*\*: the SDK has a default cache implementation for React-Native using `@react-native-async-storage/async-storage` * \*Note\*\*: recommended PERIODIC\_CACHING number 1 When a hit is emitted, it will be added into the pool, then after batching and sending, all database hits will be flushed, then the entire pool will be cached using [IHitCacheImplementation](#hit-cache) for both actions. ``` | Key | | --------------------- | | CONTINUOUS\\\_CACHING | ```typescript import React from "react"; import { FlagshipProvider, CacheStrategy } from "@flagship.io/react-sdk"; const App = () => ( <> {/* [...] */} ); ``` > 📘 > > * The `CONTINUOUS_CACHING strategy` (`recommended` ) should be used when your application is running in an environment where the probability of data loss is high. > > Keep in mind that this strategy can do a lot of database I/O depending on how many hits your visitor can send. > > * The `PERIODIC_CACHING strategy` should be used when your application sends a lot of hits and the probability of data loss is low. > > In this strategy, the number of I/Os in the database is low. \ \\ #### `useFlagship` Demo: * [to get flags](#getting-flags) * [to fetch flags](#fetching-flags) * [manage consent](#managing-visitor-consent) * [experience continuity](#experience-continuity) * [to send hits tracking](#hit-tracking) This is the most used hook from the Flagship React Native SDK. It gives further functionalities such as getting current flags of your actual visitor, sending hit tracking, checking SDK status... Returns an object. *(Typescript: UseFlagshipOutput)* **`useFlagship output`** ``` Type Description ``` ``` string A unique identifier for the current visitor anonymousId string context object A dataset (object) that defines the current visitor. setConsent function(hasConsented: boolean): void Set if visitor has consented for protected data usage. hasConsented boolean Return True if the visitor has consented for private data usage, otherwise return False. updateContext function(context: Record\): void Update the visitor context values, matching the given keys, used for targeting. A new context value associated with this key will be created if there is no previous matching value. Context keys must be String, and values types must be one of the following : Number, Boolean, String.\ [See description](#useflagship-output-updatecontext). clearContext function(): void Clear the actual visitor context.\ [See description](#useflagship-output-clearcontext). getFlag function\(key: string, defaultValue: T): object Retrieve a Flag object by its key. If no flag match the given key an empty flag will be returned.\ [See description](#useflagship-output-getflag) fetchFlags function(): Promise\ In DecisionApi Mode this function calls the Flagship Decision API to run campaign assignments according to the current visitor context and retrieve applicable flags. In bucketing Mode, it checks bucketing file, validates campaigns targeting the visitor, assigns a variation and retrieve applicable flags.\ [See description](#useflagship-output-fetchflags) authenticate function(visitorId: string): void Authenticate anonymous visitor\ [See description](#useflagship-output-authenticate) unauthenticate function(): void This function change authenticated Visitor to anonymous visitor.\ [See description](#useflagship-output-unauthenticate) status object Gives you information about SDK current state. **[See description](#useflagship-output-status)** flagsData array\ An array of [flag data](#flag-data-shape)" hit object Gives you functions to send one or further hits. **[See description](#useflagship-output-hit)** close function(): Promise Most of the time you don't need to manually close the SDK, but when your application is about to terminate, you should call the close method of the Flagship class to avoid data loss. When called, it will batch and send all hits that are in the pool before the application is closed ``` | Key/Property | | ------------ | | visitorId | **`useFlagship output setConsent`** Set if visitor has consented for protected data usage. * **`setConsent(hasConsented: boolean): void;`** It has one argument : | Argument | Type | Description | | ------------ | ------- | -------------------------------------------------- | | hasConsented | boolean | True if the visitor has consented false otherwise. | \\ **`useFlagship output updateContext`** Update the visitor context values, matching the given keys, used for targeting.\ \ A new context value associated with this key will be created if there is no previous matching value. * **`updateContext(context: Record): void`** It has one argument : | Argument | Type | Description | | -------- | ------ | ---------------------- | | context | object | A Set of keys, values. | \\ **`useFlagship output clearContext`** Clear the actual visitor context * **`clearContext(): void`** \\ **`useFlagship output fetchFlags`** In DecisionApi Mode this function calls the Flagship Decision API to run campaign assignments according to the current visitor context and retrieve applicable flags. In bucketing Mode, it checks bucketing file, validates campaigns targeting the visitor, assigns a variation and retrieve applicable flags * **`fetchFlags(): Promise`** \\ **`useFlagship output getFlag`** Return a [Flag](#flag-class-api) object by its key. If no flag match the given key an empty flag will be returned. Call exists() to check if the flag has been found. * **`getFlag(key:string, defaultValue: T) : IFlag`** \\ | Argument | Type | Description | | ------------ | ------ | --------------------------- | | key | String | key associated to the flag. | | defaultValue | T | flag default value. | > 🚧 > > * Default value must be one of the following type : `string`, `number`, `boolean`, `object`, `array`. \\ **`useFlagship output authenticate`** Authenticate anonymous visitor * **`authenticate(visitorId: string): void`** | Argument | Type | Default | Description | | --------- | ------ | -------- | ------------------------------------ | | visitorId | string | required | id of the new authenticated visitor. | \\ **`useFlagship output unauthenticate`** This function change authenticated Visitor to anonymous visitor * **`unauthenticate(): void`** \\ **`useFlagship output hit`** | Key/Property | Description | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | | send | Takes an object as parameter. The object must follow a [hit shape](#hit-tracking). | | sendMultiple | Takes an array of object as parameter. Each object must follow a [hit shape](#hit-tracking). You can mix different hit shapes within the array. | **`useFlagship output status`** | Key/Property | Description | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | isLoading | If `true`, the SDK isn't ready. | | lastRefresh | Date cast string with ISO format. This is the date corresponding to the most recent moment where modifications were saved in cache. | > 🚧 > > All useFlagship hook methods will be deactivated when visitor is not initialized except getFlag \\ #### `useFsFlag` This hook returns a [Flag](#flag-class-api) object by its key. If no flag match the given key an empty flag will be returned. * **`useFsFlag(key: string, defaultValue: T) : IFlag`** \\ | Argument | Type | Description | | ------------ | ------ | --------------------------- | | key | String | key associated to the flag. | | defaultValue | T | flag default value. | \\ #### Flag class api **`getValue` function** To retrieve [flag](#flag-class-api) current value, simply call value() method of the Flag object. * **`getValue(visitorExposed:boolean):T`** function Returns the value from the assigned campaign variation or the Flag default value if the Flag does not exist, or if types are different. ``` Type Default Value Description ``` ``` Boolean true Tells Flagship the visitor have been exposed and have seen this flag. This will increment the visits for the current variation on your campaign reporting.\ If needed it is possible to set this param to false and call `visitorExposed()` afterward when the visitor sees it. ``` | Parameter | | -------------- | | visitorExposed | > 🚧 > > Will return default value when visitor is not yet initialized \\ **`metadata` property** You may need to send campaign IDs or variation IDs to a third party for reporting and/or analytics purposes. It is possible to retrieve campaigns metadata for a specific Flag. \\ * **`metadata:IFlagMetadata`** Return the campaign information metadata or an empty object if the Flag doesn't exist or if the default value type does not correspond to the Flag type in Flagship. ```typescript interface IFlagMetadata{ campaignId:string campaignName: string variationGroupId:string variationGroupName:string variationId: string variaitonName: string isReference: boolean campaignType: string } ``` | Key\Property | Type | Description | | ------------------ | ------- | ---------------------------------------- | | campaignId | string | Campaign name | | campaignName | string | Campaign name | | variationGroupId | string | Variation group ID | | variationGroupName | string | Variation group name | | variationId | string | The variation ID assigned to the visitor | | variationName | string | Variation name | | isReference | boolean | Specify if its the reference variation | \\ **`visitorExposed` function** By default when the method getValue() is called, The SDK considers that the visitor have seen the effets of your Flag, unless you pass false to getValue(). In this case you will have to call visitorExposed(). There are two ways for exposing a visitor to a flag: 1. Pass an `visitorExposed=true` parameter to the **getValue()** method. 2. Use the following **visitorExposed()** method from the Flag instance. * **`visitorExposed(): Promise`** Tells Flagship the visitor have been exposed and have seen this flag. This will increment the visits for the current variation on your campaign reporting. No visitor exposure will be sent if the Flag doesn't exist or if the default value type do not correspond to the Flag type in Flagship. * **`userExposed(): Promise`** `deprecated` Tells Flagship the visitor have been exposed and have seen this flag. This will increment the visits for the current variation on your campaign reporting. No visitor exposure will be sent if the Flag doesn't exist or if the default value type do not correspond to the Flag type in Flagship. > 🚧 > > `userExposed` is deprecated, use `visitorExposed` instead \\ **`exists` function** This method will return true if a Flag exists in Flagship * **`exists(): boolean`** \ \\ ### Getting flags #### with useFsFlag hook **Demo:** ```javascript import React from "react"; import { useFsFlag } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const flag = useFsFlag("backgroundColor","green") const flagExists = flag.exists() const flagMetadata = flag.metadata return ( ); }; ``` #### with useFlagship hook **Demo:** ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { getFlag } = useFlagship() const flag = getFlag("backgroundColor","green") const flagExists = flag.exists() const flagMetadata = flag.metadata return ( ); }; ``` ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { getFlag } = useFlagship() const flag = getFlag("backgroundColor","green") const flagExists = flag.exists() const flagMetadata = flag.metadata return ( ); }; ``` ### Fetching Flags #### with useFlagship hook **Demo:** ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { fetchFlags } = useFlagship() return ( ); }; ``` \ \\ ### Managing visitor consent With `Flagship React Native SDK`, you can manage visitor consent for data privacy usage. When False, ***campaign activation*** and ***hits*** will be disabled. There are 2 ways to set visitor consent : 1. Set `hasConsented` key to true or false in props VisitordData of FlagshipProvider 2. Use `setConsent` method of `useFlagship` hook \\ **Demo:** ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { setConsent } = useFlagship() return ( ); }; ``` > 📘 > > When a visitor sets consent to false, the data collection features (visitorExposed and sendHit) will be deactivated for them and all hits related to the visitor will be flushed from the pool and the cache. \ \\ ### Update context with predefined keys of context **Demo:** ```javascript import React from "react"; import { FlagshipProvider, DEVICE_LOCALE } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { updateContext } = useFlagship() return ( ); }; ``` [Learn more](#predefined-visitor-context-keys) about predefined keys of context \ \\ ### Experience continuity > 🚧 > > Make sure that the experience continuity option is enabled on the flagship platform before using those methods. It might happen that a visitor from your app is not yet recognized and is being authenticated (and recognized) later on... From there, we provide the ability to ensure that during such transition, your visitor will keep same experience (meaning targetting still the same campaign's variations and thus same modifications). In order to do a successful experience continuity, we will have to distinguish when the visitor is **anonymous** or **authenticated**. Let's assume basic scenario to understand how things work: **1. Your visitor arrives on your app for the first time** We need to initialize the visitor but as we don't know anything about this visitor, we'll create a random visitor id or let the SDK do it for us. You can also specify some visitor context if necessary. ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdkk"; const App = () => ( <> {/* [...] */} ); ``` Whatever how it has been set, the actual visitor id will be what we call its **anonymous id**. > 📘 > > Be aware that when you do not specify a visitor id, as `enableClientCache` is enable by default, the SDK will try to find a previous visitor experience. If so, the new visitor will have the same visitor id as it was during the previous visitor session. From there, no id will be automatically generated. 2. Your visitor is signing in. We need to set the value of `visitorData.isAuthenticated` to `true` or call the method `authenticate` of `useFlagship` hook. Moreover, the visitor id set should be an existing visitor id (that has previously seen specific campaign's flags) in order to make the experience continuity effective. ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { authenticate } = useFlagship() return ( ); }; ``` This new visitor id is what we call its **authenticated id**. The visitor is updated as authenticated, keeping the previous variations from campaigns that are still matched and thus gives you same modifications as before being logged in. > 📘 > > Keep in mind that if the visitor also has its context changed, you might still have changes on flags as your visitor might target new campaigns. 3. Your visitor decide to sign out. We need to set the value of `visitorData.isAuthenticated` back to `false`. If you want to keep the same visitor (anonymous) experience as before, depending on the value of prop `enableClientCache`, you'll have to: * `enableClientCache=true`: the sdk will put back the previous anonymous id\ automatically based on data from cache. ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` ```javascript import React from "react"; import { useFlagship } from "@flagship.io/react-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { unauthenticate } = useFlagship() return ( ); }; ``` * `enableClientCache=false`: you should specify in\ `visitorData.id\` prop, the same value as you set in step 1. ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` If you need a completly brand new visitor experience, you should put a new visitor id in `visitorData.id` prop instead: ```javascript import React from "react"; import { FlagshipProvider } from "@flagship.io/react-native-sdk"; const App = () => ( <> {/* [...] */} ); ``` ### Hit Tracking \\ This section helps you track your visitors in your application and learn how to build hits in order to feed your reports. For more information about our measurement protocol, read our [Universal Collect documentation](doc:universal-collect-documentation). There are five different types of Hits available: * Page * Screen * Transaction * Item * Event **HitType** ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` | Key | type | Value | Description | | ----------- | ------ | ----------- | ----------------------------------- | | PAGE | string | PAGEVIEW | Visitor has seen a URL. | | SCREEN | string | SCREENVIEW | Visitor has seen a screen. | | TRANSACTION | string | TRANSACTION | Visitor has made a transaction. | | ITEM | string | ITEM | Item bought in a transaction. | | EVENT | string | EVENT | Visitor has made a specific action. | \\ **They must all be built and sent with the following functions from the\`useFlagship hook** \\ ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ **`useFlagship output hit.send` function** Send Hit to Flagship servers for reporting. * **`send (hit: IHit): Promise`** | Parameter | Type | Default | Description | | --------- | ------ | -------- | ----------------------------- | | hit | object | required | Hit to send. [see Hit](#page) | \\ **`useFlagship output hit.sendMultiple` function** Send Hits to Flagship servers for reporting. * **`sendMultiple(hits: IHit[]): Promise`** | Parameter | Type | Default | Description | | --------- | -------------- | -------- | -------------------------------------- | | hit | Array\ | required | A set of Hit to send. [see Hit](#page) | \\ #### Hit common optional parameters \\ ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ | Parameter | Type | Description | | ---------------- | ------ | ----------------------------- | | userIp | String | (Optional) Visitor IP | | screenResolution | string | (Optional) Screen resolution. | | locale | String | (Optional) Visitor language | | sessionNumber | string | (Optional) Session number | \\ #### Page \\ This hit should be sent each time a visitor arrives on a new page. ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ * A hit of type `Page` has the following structure: | Key/Property | Type | Default | Description | | ---------------- | ------------------- | -------- | ------------------------------------ | | type | string (`PAGEVIEW`) | required | type of hit. [see HitType](#hittype) | | documentLocation | String | required | Valid url. | \\ #### Screen \\ This hit should be sent each time a visitor arrives on an interface on client side. ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ * A hit of type `Screen` has the following structure: | Key/Property | Type | Default | Description | | ---------------- | --------------------- | -------- | ------------------------------------ | | type | string (`SCREENVIEW`) | required | Type of hit. [see HitType](#hittype) | | documentLocation | String | required | Name of screen. | \\ #### Transaction \\ This hit should be sent when a visitor completes a Transaction. ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ A hit of type `TRANSACTION` has the following structure: | Key/Property | Type | Default | Description | | -------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | type | string (`TRANSACTION`) | required | Type of hit. [see HitType](#hittype) | | transactionId | String | required | Unique identifier for your transaction. | | affiliation | String | required | The name of the KPI that you will have inside your reporting. [**Learn more**](https://github.com/flagship-io/Gitbook/blob/main/docs/glossary/README.md#kpi) | | totalRevenue | float | optional | Specifies the total revenue associated with the transaction. This value should include any shipping and/or tax amounts. | | shippingCosts | float | optional | The total shipping cost of your transaction. | | shippingMethod | String | optional | The shipping method for your transaction. | | taxes | float | optional | Specifies the total amount of taxes in your transaction. | | currency | String | optional | Specifies the currency of your transaction. NOTE: This value should be a valid ISO 4217 currency code. | | paymentMethod | String | optional | Specifies the payment method used for your transaction. | | itemCount | int | optional | Specifies the number of items in your transaction. | | couponCode | String | optional | Specifies the coupon code used by the customer in your transaction. | \\ #### Item \\ This hit is used to link an item with a transaction. It must be sent after the corresponding transaction hit. ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ A hit of type `ITEM` has the following structure: | Key/Property | Type | Default | Description | | ------------- | --------------- | -------- | ------------------------------------------------ | | type | string (`ITEM`) | required | Type of hit. [see HitType](#hittype) | | transactionId | String | required | Unique identifier for your transaction. | | productName | String | required | Name of your item. | | productSku | String | required | Specifies the SKU or item code. | | itemCategory | String | optional | Specifies the category that the item belongs to. | | itemPrice | float | optional | Specifies the price for a single item/unit. | | itemQuantity | int | optional | Specifies the number of items purchased. | #### Event This hit can be used for any event (e.g. Add To Cart click, newsletter subscription). \\ ```javascript import React from "react"; import { useFlagship, HitType } from "@flagship.io/react-native-sdk"; import { Button } from "react-native"; export const MyReactComponent = () => { const { hit: fsHit } = useFlagship() return ( ); }; ``` \\ A hit of type `EVENT` has the following structure: | Key/Property | Type | Default | Description | | ------------ | ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | string (`EVENT`) | required | Type of hit. [see HitType](#hittype) | | category | string | required |

Specifies the category of your event. NOTE: This value must be either User Engagement or Action Tracking.

| | action | string | required | Event name that will also serve as the KPI that you will have inside your reporting. [**Learn more**](https://github.com/flagship-io/Gitbook/blob/main/docs/glossary/README.md#kpi) | | label | string | optional | Additional description of your event. | | value | integer | optional |

(optional) Can be used to evaluate visitor interactions with individual site objects or content items.
NOTE: this value must be non-negative/ non-float

| ### Managing visitor cache The aims of the cache management is the response to the following problematic: * **Re-allocation in bucketing mode :** In bucketing mode, the SDK will always keep visitor in variation where he was allocated first, in case of the customer or the dynamic allocation has changed the traffic allocation. Indeed in bucketing mode the assignation is made on local device so changing campaign allocation in the platform would make visitors to see different campaigns. * **Handle offline mode on client side :** With the cache enabled, the SDK will try to retrieve the latest visitor data (campaign assignations) from the cache, also will save all the failed hits and visitorExposed in order to resend them later. \\ By default the Flagship ReactJS SDK provide a default cache manager implementation. It is possible to use your own cache manager by implementing the intefaces `IVisitorCacheImplementation` and `IHitCacheImplementation` through visitorCacheImplementation and hitCacheImplementation props of [FlagshipProvider](#flagshipprovider). #### Visitor Cache The visitor cache is used to store the visitor data in a database through the `IVisitorCacheImplementation` interface which defines the methods that an object must implement in order to handle it. ```typescript interface IVisitorCacheImplementation { cacheVisitor: (visitorId: string, Data: VisitorCacheDTO) => void; lookupVisitor(visitorId: string): VisitorCacheDTO; flushVisitor(visitorId: string): void; } ``` \\ **`cacheVisitor` function** This method is called when the SDK needs to cache visitor information in your database. * **`public cacheVisitor(visitorId: string, Data: object):void`** It has 2 arguments : | Argument | Type | Description | | --------- | ------ | ----------------------------------------------------------------------------------------- | | visitorId | string | visitor ID | | Data | object | visitor data. The object follows the shape of type [`VisitorCacheDTO`](#visitorcachedto). | \\ **`lookupVisitor` function** This method is called when the SDK needs to get the visitor information corresponding to visitor ID from your database. It has to return an object of type `VisitorCacheDTO` which follows this shape [see](#visitorcachedto). * **`public lookupVisitor(visitorId: string): object`** It has one argument : | Argument | Type | Description | | --------- | ------ | ----------- | | visitorId | string | visitor ID | **`flushVisitor` function** This method is called when the SDK needs to erase the visitor information corresponding to visitor ID in your database. It will be called every time [`setConsent`](#setconsent-function) get false. * **`public flushVisitor(visitorId: string): void`** It has one argument : | Argument | Type | Description | | --------- | ------ | ----------- | | visitorId | string | visitor ID | \\ > 📘 > > * `flushVisitor` method will be called every time [`setConsent`](#setconsent-function) get false. \\ **VisitorCacheDTO** ```typescript type VisitorCacheDTO = { version: number; data: { visitorId: string; anonymousId: string | null; consent?: boolean; context?: Record; campaigns?: Array<{ campaignId: string; variationGroupId: string; variationId: string; isReference?: boolean; type: string; activated?: boolean; flags?: Record; }>; }; }; ``` #### Hit Cache The hit cache is used to store hits in your database depending on strategy used through the `IHitCacheImplementation` interface which defines the methods that an object must implement to handle it. ```typescript interface IHitCacheImplementation { cacheHit(hits: Record):Promise lookupHits():Promise> flushHits(hitKeys: string[]): Promise flushAllHits(): Promise } ``` \\ **`cacheHit` function** This method will be called to cache hits depending on cache strategy used. * **`public cacheHit(hits: Record):Promise`** It has 1 argument : ``` Type Description ``` ``` object It's a key/value object where the : * key is a unique ID for each hit * value is an object that follows the shape of type [`HitCacheDTO`](#hitCachedto). ``` | Argument | | -------- | | hits | \\ **`lookupHits` function** This method will be called to load all hits from your database and trying to send them again in the background. It has to return an object where the key is a unique ID for each hit and the value is an object of type `HitCacheDTO` which follows this shape [see](#hitCachedto). * **`public lookupHits():Promise>`** \\ **`flushHits` function** This method will be called to erase all hits matching the unique Hits ID from your database. **NOTE:** It will be called every time [`setConsent`](#setconsent-function) get false to erase all hits from database for visitor who set consent to false. * **`public flushHits(hitKeys: string[]): Promise`** It has one argument : | Argument | Type | Description | | -------- | -------------- | ----------------- | | hitKeys | Array\ | Unique ID of hits | \\ **`flushAllHits` function** This method will be called to erase all hits in your database without exception. * **`public flushAllHits(): Promise`** \\ **HitCacheDTO** ```typescript type HitCacheLookupDTO = { version: number; data: { visitorId: string; anonymousId: string | null; type: HitType | "ACTIVATE"; time: number; content?: Record; }; }; ``` > 📘 > > * The flushHits method will be called whenever the visitor's consent changes to false. > * Hits older than 4H will be ignored during the resending process. \ \\ ### Appendix #### Predefined visitor context keys The Flagship SDK contains predefined visitor context keys. The keys marked as **Yes** in the **Auto-set by SDK** column will be automatically set, while the ones marked as **No** need to be set by customer. You can overwrite these keys at any time. The keys-value pairs will be sent to the server in the visitor context and can be edited in the [Persona](https://github.com/flagship-io/Gitbook/blob/main/docs/glossary/README.md#persona) section of the Flagship platform. | SDK constant Name | Description | Context variable name | Type | Auto-set by SDK | Example | | -------------------- | ------------------------------------------------------ | ----------------------- | ---------- | --------------- | ------------- | | DEVICE\_LOCALE | Language of the device | sdk\_deviceLanguage | String | No | fra | | DEVICE\_TYPE | Type of the device | sdk\_deviceType | DeviceType | No | Mobile | | DEVICE\_MODEL | Model of the device | sdk\_deviceModel | String | No | samsung E1200 | | LOCATION\_CITY | City geolocation | sdk\_city | String | No | toulouse | | LOCATION\_REGION | Region geolocation | sdk\_region | String | No | occitanie | | LOCATION\_COUNTRY | Country geolocation | sdk\_country | String | No | France | | LOCATION\_LAT | Current Latitude | sdk\_lat | Double | No | 43.623647 | | LOCATION\_LONG | Current Longitude | sdk\_long | Double | No | 1.445397 | | OS\_NAME | Name of the OS | sdk\_osName | String | YES | android / ios | | OS\_VERSION\_NAME | Version name of the OS | sdk\_osVersionName | String | No | 9.0.0 | | OS\_VERSION\_CODE | Version code of the OS | sdk\_osVersionCode | String | YES | 24 | | CARRIER\_NAME | Name of the carrier or mobile virtual network operator | sdk\_carrierName | String | No | free | | INTERNET\_CONNECTION | What is the internet connection | sdk\_internetConnection | String | No | 5g | | APP\_VERSION\_NAME | Version name of the app | sdk\_versionName | String | No | 1.1.2-beta | | APP\_VERSION\_CODE | Version code of the app | sdk\_versionCode | String | No | 40 | | INTERFACE\_NAME | Name of the interface | sdk\_interfaceName | String | No | ProductPage | | FLAGSHIP\_CLIENT | Flagship SDK client (Reserved) | fs\_client | String | Yes | TS | | FLAGSHIP\_VERSION | Version of the Flagship SDK (Reserved) | fs\_version | String | Yes | 2.0.0 | | FLAGSHIP\_VISITOR | Current visitor id (Reserved) | fs\_users | String | Yes | visitor\_id | > 📘 > > To overwrite the keys, use the [`updateContext`](#update-context-with-predefined-keys-of-context) method ### License This Flagship SDK is distributed under the [Apache version 2.0](http://www.apache.org/licenses/) license. --- # 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-v3-3-x.md?ask= ``` 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.