sym-mobile-sdk-react-native

An SDK to implement Symplify conversion

Installation

npm install @symplify-conversion/sym-mobile-sdk-react-native

Usage

Add the base component SymplifyProvider to your app. This will provide the context for the SDK and you will be able to use the Symplify components. Here's how you can use it:

import {SymplifyProvider} from "@symplify-conversion/sym-mobile-sdk-react-native";

function AppWrapper() {
  return (
    <SymplifyProvider
      env="UAT"
      siteId="5620620"
      userId="optional-username">
      <App />
    </SymplifyProvider>
  );
}

Some properties are required, some are optional. The required properties are:

• env: The environment to use. This can be either "UAT" or "PROD".
• siteId: The siteId for the site you want to use.
• userId: The userId for the user you want to track. This is optional. If no userId is provided a userId will be generated.

Components

SymProject encapsulates the SymVariants. In this way you can have several projects in the app. If no SymProject is used to wrap the SymVariants, the default project is used. This means that there can only be one project, otherwise an exceptions will be thrown.

<SymProject project="1">
    <SymVariant goal="61" name="variant 1">
        <Text id="a press me variantcomponent">
            <Text>Press me, I'm variant 1</Text>
        </Text>
    </SymVariant>

    <SymVariant goal="62" name="original">
        <Text id="a press me original component">
            <Text>Press me, Im the original</Text>
        </Text>
    </SymVariant>
</SymProject>

Here we use a SymProject, which means if we have more then one project we'll specify which project to use. We place two variants in the project. Which variant that will be shown is decided by the config file. If goal is set, then an event will be pushed with the goal value. Otherwise no events will be sent.

You can also wrap objects with a SymAppView. This will send events to the backend. If there is a SymVariant in the SymAppView this will have the SymAppView property also. This way we can filter that an object has been pressed and disregard the SymAppView event.

<SymAppView goal="59">
    <SymVariant goal="61">
        <Text id="a press me component">
            <Text>Press me</Text>
        </Text>
    </SymVariant>
</SymAppView>

In this case the SymAppView will send an event with goal 59. The SymVariant will send an event with goal 61. The SymVariant will also have a parent goal value 59. So two events will be pushed, but we can disregard the SymAppView event. The SymVariant event will also have the component id value "a press me component".

<SymAppView goal="59">
    <Text id="a press me component">
        <Text>Press me</Text>
    </Text>
</SymAppView>

In this case the SymAppView will send an event with goal 59. Please note - if you add a Pressable component inside the SymAppView, then this component might stop the events from the SymAppView to be sent.

Hooks

If you'd prefer to set a goal event or a variation in a hook, you can use the following hooks:

useGoal("Symplify DEMO sst", 9999999)

The parameters are the goal name and the goal value. This will send an event when called.

or

useVariation("Symplify DEMO sst", {})

The parameters are is the project name. Which will return the variation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library