React Native V2.0.X

npm install @flagship.io/react-native-sdk

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

const App = () => (
  <>
    <FlagshipProvider>{/* [...] */}</FlagshipProvider>
  </>
);

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

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY" // <= Required in next major release
      visitorData={{
        id: "YOUR_VISITOR_ID",
        context: {
          // some context
        },
      }}
      enableConsoleLogs={true}
    >
      {/* [...] */}
    </FlagshipProvider>
  </>
);

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

export const MyReactComponent = () => {
  const fsModifications = useFsModifications([
    {
      key: "backgroundColor",
      defaultValue: "green",
      activate: false,
    },
  ]);
  return (
    <View
      style={[
        {
          height: "200px",
          width: "200px",
          backgroundColor: fsModifications.backgroundColor,
        },
      ]}
    >
      {"I'm a square with color=" + fsModifications.backgroundColor}
    </View>
  );
};

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

const fsParams = {
  modifications: {
    requested: [
      {
        key: "btnColor",
        defaultValue: "green",
        activate: false,
      },
    ],
  },
};

const {
  modifications: fsModifications,
  status: fsStatus,
  hit: fsHit,
} = useFlagship(fsParams);

import { useFsModifications } from "@flagship.io/react-native-sdk";

const fsModifications = useFsModifications([
  {
    key: "btnColor",
    defaultValue: "green",
    activate: false,
  },
]);

import { useFlagship } from "@flagship.io/react-sdk";

const { synchronizeModifications } = useFlagship();

return (
  <>
    <Button
      onClick={() => {
        synchronizeModifications(activateAllModifications)
          .then((statusCode) => {
            if (statusCode < 300) {
              // Notify success...
            } else {
              // Notify failure...
            }
          })
          .catch((error) => {
            // Notify error...
          });
      }}
    >
      Trigger a synchronize
    </Button>
  </>
);

import { useFsActivate } from "@flagship.io/react-native-sdk";

const [toggle, setToggle] = React.useState(false);

useFsActivate(["btnColor", "otherKey1", "otherKey2"], [toggle]); // trigger an activate when "toggle" value change.

// insider render function:

<Button onClick={() => setToggle(!toggle)}>Trigger activate</Button>;

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

const { hit: fsHit } = useFlagship();

// insider render function:

<Button
  onClick={() => {
    const mockHit = {
      type: "Transaction",
      data: {
        transactionId: "12451342423",
        affiliation: "myAffiliation",
        totalRevenue: 999,
        shippingCost: 888,
        shippingMethod: "DHL",
        currency: "USD",
        taxes: 1234444,
        paymentMethod: "creditCard",
        itemCount: 2,
        couponCode: "myCOUPON",
        documentLocation:
          "http%3A%2F%2Fabtastylab.com%2F60511af14f5e48764b83d36ddb8ece5a%2F",
        pageTitle: "myScreen",
      },
    };
    fsHit.send(mockHit);
  }}
>
  Send a transaction hit
</Button>;

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

const { hit: fsHit } = useFlagship();

<Button
  onClick={() => {
    const mockHit = {
      type: "Screen",
      data: {
        documentLocation:
          "http%3A%2F%2Fabtastylab.com%2F60511af14f5e48764b83d36ddb8ece5a%2F",
        pageTitle: "testScreen",
      },
    };
    fsHit.send(mockHit);
  }}
>
  Send a screen hit
</Button>;

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

const { hit: fsHit } = useFlagship();

<Button
  onClick={() => {
    const mockHit = {
      type: "Transaction",
      data: {
        transactionId: "12451342423",
        affiliation: "myAffiliation",
        totalRevenue: 999,
        shippingCost: 888,
        shippingMethod: "DHL",
        currency: "USD",
        taxes: 1234444,
        paymentMethod: "creditCard",
        itemCount: 2,
        couponCode: "myCOUPON",
        documentLocation:
          "http%3A%2F%2Fabtastylab.com%2F60511af14f5e48764b83d36ddb8ece5a%2F",
        pageTitle: "myScreen",
      },
    };
    fsHit.send(mockHit);
  }}
>
  Send a transaction hit
</Button>;

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

const { hit: fsHit } = useFlagship();

<Button
  onClick={() => {
    const mockHit = {
      type: "Item",
      data: {
        transactionId: "0987654321",
        name: "testItem",
        price: 999,
        code: "testCode",
        category: "testCategory",
        quantity: 123,
        documentLocation:
          "http%3A%2F%2Fabtastylab.com%2F60511af14f5e48764b83d36ddb8ece5a%2F",
        pageTitle: "testItem",
      },
    };
    fsHit.send(mockHit);
  }}
>
  Send a item hit
</Button>;

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

const { hit: fsHit } = useFlagship();

<Button
  onClick={() => {
    const mockHit = {
      type: "Event",
      data: {
        category: "User Engagement",
        action: "signOff",
        label: "Hello world",
        value: 123,
        documentLocation:
          "http%3A%2F%2Fabtastylab.com%2F60511af14f5e48764b83d36ddb8ece5a%2F",
        pageTitle: "testEvent",
      },
    };
    fsHit.send(mockHit);
  }}
>
  Send a event hit
</Button>;