mobile-sdk-react-native

An SDK to implement Symplify conversion

Installation

npm install @symplify-conversion/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/mobile-sdk-react-native";

function AppWrapper() {
  return (
    <SymplifyProvider
      siteId="5620620">
      <App />
    </SymplifyProvider>
  );
}

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

• env: The environment to use. This needs to be set to "PROD".
• siteId: This needs to match the website ID in the Symplify UI.
• userId: This is optional. If no userId is provided a userId (UUID) will be generated and used.

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 name="Symplify DEMO sst">
    <SymVariation name="Original">
      <Text>I'm the Original</Text>
    </SymVariation>

    <SymVariation name="Variant 1">
      <Text>I'm Variant 1</Text>
    </SymVariation>
</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 used/shown is randomized. If a goal is set, then an event will be pushed with the goal value. Otherwise no events will be sent.

To register a visit for a user that have been allocated a project and a variation you can use a SymAppView component. This will send an app view event to the backend.

View event

This should be implemented on all screen views. The property 'screen' is optional but populating that will enable filtering the statistics on that.

<SymAppView screen={route.name}/>

Goal event

To register a goal you need to populate the SymAppView with eventId and trigger properties. The property 'screen' is optional but populating that will enable filtering the statistics on that.

<SymAppView eventId={59442} trigger={Trigger.PRESS} screen={route.name}>
  <Text>I will send a app goal event with id 59442 on press</Text>
</SymAppView>

• eventId = The event id (Configured in your project in the Symplify UI)
• trigger = The trigger that will send the event. This can be either Trigger.PRESS (runs on press) or Trigger.VIEW (runs on render). Default is Trigger.VIEW so if you want to trigger on render there is no need to set this property.

In this case the SymAppView will send an event with eventId 59442 when the text is pressed. Please note - if you add a Pressable component inside the SymAppView, then this component might stop the events from the SymAppView to be sent.

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