Segment

Getting Started

First of all, you should create your account and add a Source from the catalog React native application from your Segment Panel.

Step 1

Create the react native application
First, we are going to create a new React Native Project (segmentTutorial).

react-native init segmentTutorial

Optional: I'll be working with React native version 0.59.9
If you want to follow the exact version you can set the react native version:

react-native init segmentTutorial --version react-native@0.59.9

Then enter in your project directory:

cd segmentTutorial/

Step 2:

Install Cocoapods

If your don't already have installed pod in your computer you can follow the official documentation from React Native Docs.

Init Pods

If you already have installed cocados on your computer you can just enter in your IOS folder:

cd ios

And then init pod

pod init

Then get back to your main project directory

cd ../

Step 3:

Install the SDK

First, add the @segment/analytics-react-native dependency to your dependencies and link it using react-native-cli, like so:

yarn add @segment/analytics-react-native

Link the dependency

yarn react-native link

Step 4:

Install Pods

At this moment your Podfile should look something like this:
NOTE: If you are follow the tutorial on react-native 0.59.9 Is extremely important to add the React , Yoga , Folly. Otherwise you can run into packages collision names errors in your metro bundler.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'segmentTutorial' do
  # Comment the next line if you don't want to use dynamic frameworks
  # Pods for protoseg
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'RNAnalytics', :path => '../node_modules/@segment/analytics-react-native'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'React', :path => '../node_modules/react-native' , :subspecs => [
    'CxxBridge',
  ]
  
end

Now, let's install your pods:

Enter in your iOS folder

cd ios

And install the pods

pod install

Step 5:

Add the segment into your App.js with your App Key
You can found your write key here:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button } from 'react-native';
import analytics from '@segment/analytics-react-native'

type Props = {};
export default class App extends Component<Props> {
  state = { email: "enter your email" }
  async componentDidMount() {
    await analytics.setup('YOUR_WRITE_KEY', {
      // Record screen views automatically!
      recordScreenViews: true,
      // Record certain application events automatically!
      trackAppLifecycleEvents: true
    });
  }

You can check the full demo of App.js here.

Run demo

Run the application

react-native run-ios

If you are like me and you are running Xcode 11, you can use a new emulator:

react-native run-ios --simulator="iPhone 11"

Troubleshooting

fatal error: 'Analytics/SEGAnalytics.h' file not found #40
Github issue Make sure your library is linked, you can manual check this, by opening your solution in Xcode and check if the project solution from Segment is linked

Mixpanel

Add Destination to Source

Use your Token and Secret Key

You can find your Tokens from Mixpanel here:

Getting Started

Install package

yarn add @segment/analytics-react-native-mixpanel

Your Podfile should habe this additional line now:

pod 'RNAnalyticsIntegration-Mixpanel', :path => '../node_modules/@segment/analytics-react-native-mixpanel'

Install the Pods

pod install

Modify your App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button } from 'react-native';
import analytics from '@segment/analytics-react-native'
import Mixpanel from '@segment/analytics-react-native-mixpanel'

type Props = {};
export default class App extends Component<Props> {
  state = { email: "enter your email" }
  async componentDidMount() {
    await analytics.setup('YOUR_WRITE_KEY', {
      using: [Mixpanel],
      // Record screen views automatically!
      recordScreenViews: true,
      // Record certain application events automatically!
      trackAppLifecycleEvents: true
    });
  }

Now you can play with our 3 actions, tracked by segment and MixPanel

And we are done!
Please leave any comment, problem or feedback 🤠