# Migration to v4.X

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](https://github.com/flagship-io/flagship-react-native-sdk/releases)

## 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](doc:react-native-reference#visitordata) option within the [visitorData](doc:react-native-reference#visitordata) props is now required. In contrast, this option was optional in version 3.X.
* The `isNewInstance` props has been replaced with [shouldSaveInstance](doc:javascript-reference#newvisitor-method).
* The `enableClientCache`props has been replaced with [reuseVisitorIds](doc:javascript-reference#sdk-configuration)
* The `statusChangedCallback` has been replaced with [`onSdkStatusChanged`](doc:javascript-reference#onsdkstatuschanged).
* The [`onSdkStatusChanged`](doc:javascript-reference#onsdkstatuschanged) is triggered with the current [status](doc:react-native-reference#fssdkstatus) of the SDK, leading to the removal of the `onInitStart` and `onInitDone` callbacks.

```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={{
        hasConsented: true, // This is now mandatory
      }}
    >
      {/* ... */}
    </FlagshipProvider>
  </>
);
```

```jsx
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](doc:react-native-reference#useflagship-hook) hook's methods `hit.send` and `hit.sendMultiple` have been superseded by the method [sendHits](doc:react-native-reference#sendhits-method) .

```jsx
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>
  );
};
```

```jsx
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

In 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](doc:react-native-reference#getflag-method) method of `useFlagship` instance. Instead, it is now set using the [getValue](doc:react-native-reference#getvalue-method) of [flag](doc:react-native-reference#ifsflag-interface) instance.

Here's how you can set the default value of a flag in versions 4.X and 3.X:

```typescript

...
const fs = useFlagship()
const flag = fs.getFlag("myFlagKey");
const flagValue = flag.getValue("default-value");
```

```typescript

...
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](doc:react-native-reference#usefsflag-hook). Instead, it is now set using the [getValue](doc:react-native-reference#getvalue-method) of [flag](doc:react-native-reference#ifsflag-interface) instance.

Here's how you can set the default value of a flag in versions 4.X and 3.X:

```typescript

...
const flag = useFsFlag("myFlagKey");
const flagValue = flag.getValue("default-value");
```

```typescript

...
const flag = useFsFlag("myFlagKey", "default-value");
const flagValue = flag.getValue();
```

## Flagship SDK Status

In version 4.X, the `statusChangedCallback` has been replaced with [`onSdkStatusChanged`](doc:react-native-reference#onsdkstatuschanged) and the enum `FlagshipStatus` has been superseded by [`FSSdkStatus`](doc:react-native-reference#fssdkstatus).

The table below matches the `FlagshipStatus` enum keys from version 3.X to the corresponding [`FSSdkStatus`](doc:react-native-reference#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            |