Migration to 4.X
Overview
This guide assists developers in transitioning from Flagship 3.X to Flagship 4.X.
The primary changes include:
- FlagshipProvider props
- useFlagship hook
- useFsFlag hook
- Flagship SDK Status
For more details, see the change log
FlagshipProvider props
Below are the options that have been changed from version 3.X to 4.X:
- In version 4.X, when initializing a visitor, the hasConsented option within the visitorData props is now required. In contrast, this option was optional in version 3.X.
- The
isNewInstance
props has been replaced with shouldSaveInstance. - The
enableClientCache
props has been replaced with reuseVisitorIds - The
statusChangedCallback
has been replaced withonSdkStatusChanged
. - The
onSdkStatusChanged
is triggered with the current status of the SDK, leading to the removal of theonInitStart
andonInitDone
callbacks.
import React from "react";
import { FlagshipProvider } from "@flagship.io/react-native-sdk";
const App = () => (
<>
<FlagshipProvider
envId="YOUR_ENV_ID"
apiKey="YOUR_API_KEY"
visitorData={{
hasConsented: true, // This is now mandatory
}}
>
{/* ... */}
</FlagshipProvider>
</>
);
import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";
const App = () => (
<>
<FlagshipProvider
envId="YOUR_ENV_ID"
apiKey="YOUR_API_KEY"
visitorData={{}} // 'hasConsented' was optional
>
{/* ... */}
</FlagshipProvider>
</>
);
useFlagship hook
In version 4.X, the useFlagship hook's methods hit.send
and hit.sendMultiple
have been superseded by the method sendHits .
import React from "react";
import { useFlagship, HitType } from "@flagship.io/react-native-sdk";
export const MyReactComponent = () => {
const fs = useFlagship()
return (
<button
onClick={()=>{
fs.sendHits({
type: HitType.PAGE,
documentLocation: "https://localhost",
})
}}>
Send a hit
</button>
);
};
import React from "react";
import { useFlagship, HitType } from "@flagship.io/react-sdk";
export const MyReactComponent = () => {
const fs = useFlagship()
return (
<button
onClick={()=>{
fs.hit.send({
type: HitType.PAGE,
documentLocation: "https://localhost",
})
}}>
Send a hit
</button>
);
};
GetFlag
method update
GetFlag
method updateIn version 4.X, the approach to setting a flag's default value has been modified. The default value is no longer set using the getFlag method of useFlagship
instance. Instead, it is now set using the getValue of flag instance.
Here's how you can set the default value of a flag in versions 4.X and 3.X:
...
const fs = useFlagship()
const flag = fs.getFlag("myFlagKey");
const flagValue = flag.getValue("default-value");
...
const fs = useFlagship()
const flag = fs.getFlag("myFlagKey", "default-value");
const flagValue = flag.getValue();
useFsFlag hook
The default value is no longer set using the the second parameter of useFsFlag. Instead, it is now set using the getValue of flag instance.
Here's how you can set the default value of a flag in versions 4.X and 3.X:
...
const flag = useFsFlag("myFlagKey");
const flagValue = flag.getValue("default-value");
...
const flag = useFsFlag("myFlagKey", "default-value");
const flagValue = flag.getValue();
Flagship SDK Status
In version 4.X, the statusChangedCallback
has been replaced with onSdkStatusChanged
and the enum FlagshipStatus
has been superseded by FSSdkStatus
.
The table below matches the FlagshipStatus
enum keys from version 3.X to the corresponding FSSdkStatus
keys in version 4.X.
V4.X | V3.X |
---|---|
SDK_NOT_INITIALIZED | NOT_READY |
SDK_NOT_INITIALIZED | NOT_INITIALIZED |
SDK_INITIALIZING | STARTING |
SDK_INITIALIZING | POLLING |
SDK_PANIC | READY_PANIC_ON |
SDK_INITIALIZED | READY |
Updated 2 months ago