Skip to main content
Dittofeed’s React Native SDK allows you to send events from your React Native app to Dittofeed’s API. It also allows Dittofeed to send mobile push notifications (coming soon).

Installation

# Using Yarn
yarn add @dittofeed/sdk-react-native

# Using NPM
npm install --save @dittofeed/sdk-react-native

Usage

Dittofeed’s react native sdk can be useful for sending Dittofeed events about your application and users.
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { DittofeedSdk } from "@dittofeed/sdk-react-native";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    (async () => {
      // Initialize the sdk with a writeKey, which is used to identify your
      // workspace. This key can be found at
      // https://app.dittofeed.com/dashboard/settings
      await DittofeedSdk.init({
        writeKey: "Basic abcdefg...",
      });

      // Lets you tie a user to their actions and record traits about them. It
      // includes a unique User ID and any optional traits you know about the
      // user, like their email, name, and more.
      DittofeedSdk.identify({
        userId: "123",
        traits: {
          email: "[email protected]",
          firstName: "John"
        },
      });

      // The track call is how you record any actions your users perform, along
      // with any properties that describe the action.
      DittofeedSdk.track({
        userId: "123",
        event: "Made Purchase",
        properties: {
          itemId: "abc",
        },
      });

      // Lets you record whenever a user sees a screen, the mobile equivalent of
      // page, in your mobile app, along with any properties about the screen.
      DittofeedSdk.screen({
        userId: "123",
        name: "Recipe Screen",
        properties: {
          recipeType: "Soup",
        },
      });

      // Ensures that asynchronously submitted events are flushed synchronously
      // to Dittofeed's API.
      await DittofeedSdk.flush();
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>My App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
I