@jmartins-tillster/analytics-react-native 2.21.3

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package/commitlint.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'header-max-length': [2, 'always', 80],
+    // Disable all the body and footer max length rules since CommitLint cannot handle multiline text in body and footer making these rules too much of a nuisance
+    'body-max-length': [0, 'always'],
+    'body-max-line-length': [0, 'always'],
+    'footer-max-length': [0, 'always'],
+    'footer-max-line-length': [0, 'always'],
+    // Also disable this rule since it will always complain due to the multiline incompatibility
+    'footer-leading-blank': [0, 'always'],
+  },
+};

package/examples/AnalyticsReactNativeExample/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/examples/AnalyticsReactNativeExample/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

package/examples/AnalyticsReactNativeExample/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/examples/AnalyticsReactNativeExample/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/examples/AnalyticsReactNativeExample/App.tsx

@@ -0,0 +1,164 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+// import RNBootSplash from 'react-native-bootsplash';
+import {
+  NavigationContainer,
+  NavigationState,
+  PartialState,
+} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import {
+  createClient,
+  AnalyticsProvider,
+  CountFlushPolicy,
+  // @ts-ignore unused for e2e tests
+  // StartupFlushPolicy,
+  // @ts-ignore unused for e2e tests
+  // TimerFlushPolicy,
+} from '@segment/analytics-react-native';
+import Home from './Home';
+import SecondPage from './SecondPage';
+import Modal from './Modal';
+import {useState} from 'react';
+//import {Logger} from './plugins/Logger';
+
+// import {AmplitudeSessionPlugin} from '@segment/analytics-react-native-plugin-amplitude-session';
+// import { ConsentManager } from './plugins/ConsentManager';
+// import { FirebasePlugin } from '@segment/analytics-react-native-plugin-firebase';
+// import { FacebookAppEventsPlugin } from '@segment/analytics-react-native-plugin-facebook-app-events';
+// import { IdfaPlugin } from '@segment/analytics-react-native-plugin-idfa';
+// import { AdvertisingIdPlugin } from '@segment/analytics-react-native-plugin-advertising-id';
+// import { ClevertapPlugin } from '@segment/analytics-react-native-plugin-clevertap';
+// import { BrazePlugin } from '@segment/analytics-react-native-plugin-braze';
+
+const segmentClient = createClient({
+  writeKey: '<write-key>',
+  trackAppLifecycleEvents: true,
+  collectDeviceId: true,
+  debug: true,
+  trackDeepLinks: true,
+  flushPolicies: [
+    new CountFlushPolicy(5),
+    // These are disabled for E2E tests
+    // new TimerFlushPolicy(1000),
+    // new StartupFlushPolicy(),
+  ],
+});
+
+// const LoggerPlugin = new Logger();
+
+// segmentClient.add({plugin: LoggerPlugin});
+
+// To see an example Consent Manager uncomment the following
+// const ConsentManagerPlugin = new ConsentManager();
+// segmentClient.add({ plugin: ConsentManagerPlugin });
+
+// To test the Firebase plugin make sure to add your own API_KEY in example/ios/GoogleService-Info.plist
+// segmentClient.add({ plugin: new FirebasePlugin() });
+
+// To test the Facebook App Events plugin make sure to add your Facebook App Id to Info.plist
+// segmentClient.add({ plugin: new FacebookAppEventsPlugin() });
+// const idfaPlugin = new IdfaPlugin();
+// segmentClient.add({ plugin: idfaPlugin });
+
+// segmentClient.add({plugin: new AmplitudeSessionPlugin()});
+
+// segmentClient.add({ plugin: new BrazePlugin() });
+
+// segmentClient.add({ plugin: new ClevertapPlugin() });
+
+// segmentClient.add({
+//   plugin: new AdvertisingIdPlugin(),
+// });
+
+const MainStack = createStackNavigator();
+const RootStack = createStackNavigator();
+function MainStackScreen() {
+  return (
+    <MainStack.Navigator
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: '#262e4f',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: 'bold',
+        },
+      }}>
+      <MainStack.Screen
+        name="Home"
+        component={Home}
+        options={{headerShown: false}}
+      />
+      <MainStack.Screen
+        name="SecondPage"
+        component={SecondPage}
+        options={{title: 'Second Page'}}
+      />
+    </MainStack.Navigator>
+  );
+}
+
+const getActiveRouteName = (
+  state: NavigationState | PartialState<NavigationState> | undefined,
+): string => {
+  if (!state || typeof state.index !== 'number') {
+    return 'Unknown';
+  }
+
+  const route = state.routes[state.index];
+
+  if (route.state) {
+    return getActiveRouteName(route.state);
+  }
+
+  return route.name;
+};
+
+const App = () => {
+  // React.useEffect(() => {
+  //   void RNBootSplash.hide();
+  // }, []);
+
+  const [routeName, setRouteName] = useState('Unknown');
+
+  return (
+    <AnalyticsProvider client={segmentClient}>
+      <NavigationContainer
+        onStateChange={state => {
+          const newRouteName = getActiveRouteName(state);
+
+          if (routeName !== newRouteName) {
+            void segmentClient.screen(newRouteName);
+
+            setRouteName(newRouteName);
+          }
+        }}>
+        <RootStack.Navigator
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: '#262e4f',
+            },
+            headerTintColor: '#fff',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
+            presentation: 'modal',
+          }}>
+          <RootStack.Screen
+            name="Main"
+            component={MainStackScreen}
+            options={{headerShown: false}}
+          />
+          <RootStack.Screen
+            name="Modal"
+            component={Modal}
+            options={{headerBackTitle: 'Go back'}}
+          />
+        </RootStack.Navigator>
+      </NavigationContainer>
+    </AnalyticsProvider>
+  );
+};
+
+export default App;

package/examples/AnalyticsReactNativeExample/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

package/examples/AnalyticsReactNativeExample/Gemfile.lock

@@ -0,0 +1,106 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (6.1.7.10)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    claide (1.1.0)
+    cocoapods (1.15.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.15.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.3.4)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.17.0)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    json (2.7.5)
+    minitest (5.25.1)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.3.9)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.25.1)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (>= 3.3.6, < 4.0)
+    zeitwerk (2.6.18)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
+
+RUBY VERSION
+   ruby 2.6.10p210
+
+BUNDLED WITH
+   1.17.2

package/examples/AnalyticsReactNativeExample/Home.tsx

@@ -0,0 +1,206 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useMemo} from 'react';
+import {
+  View,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  SafeAreaView,
+} from 'react-native';
+import {useAnalytics} from '@segment/analytics-react-native';
+
+const screenWidth = Dimensions.get('screen').width;
+
+const Home = ({navigation}: {navigation: any}) => {
+  const {screen, track, identify, group, alias, reset, flush} = useAnalytics();
+
+  const analyticsEvents = useMemo(() => {
+    return [
+      {
+        color: colors.green,
+        name: 'Track',
+        testID: 'BUTTON_TRACK',
+        onPress: () => {
+          void track('Track pressed', {foo: 'bar'});
+        },
+      },
+      {
+        color: colors.darkGreen,
+        name: 'Screen',
+        testID: 'BUTTON_SCREEN',
+        onPress: () => {
+          void screen('Home Screen', {foo: 'bar'});
+        },
+      },
+      {
+        color: colors.purple,
+        name: 'Identify',
+        testID: 'BUTTON_IDENTIFY',
+        onPress: () => {
+          void identify('user_2', {username: 'simplyTheBest'});
+        },
+      },
+      {
+        color: colors.lightPurple,
+        name: 'Group',
+        testID: 'BUTTON_GROUP',
+        onPress: () => {
+          void group('best-group', {companyId: 'Lala'});
+        },
+      },
+      {
+        color: colors.indigo,
+        name: 'Alias',
+        testID: 'BUTTON_ALIAS',
+        onPress: () => {
+         void alias('new-id');
+        },
+      },
+    ];
+  }, []);
+
+  const clientEvents = [
+    {
+      color: colors.pink,
+      name: 'Flush',
+      testID: 'BUTTON_FLUSH',
+      onPress: () => {
+        void flush();
+      },
+    },
+    {
+      color: colors.orange,
+      name: 'Reset',
+      testID: 'BUTTON_RESET',
+      onPress: () => {
+       void reset();
+      },
+    },
+  ];
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <ScrollView style={styles.page}>
+        <Text style={styles.title}>Analytics Events</Text>
+        <View style={styles.section}>
+          {analyticsEvents.map(item => (
+            <TouchableOpacity
+              key={item.name}
+              style={[styles.button, {backgroundColor: item.color}]}
+              onPress={item.onPress}
+              testID={item.testID}>
+              <Text style={styles.text}>{item.name}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        <Text style={styles.title}>Client Events</Text>
+        <View style={styles.section}>
+          {clientEvents.map(item => (
+            <TouchableOpacity
+              key={item.name}
+              style={[styles.trackingButton, {backgroundColor: item.color}]}
+              onPress={item.onPress}
+              testID={item.testID}>
+              <Text style={styles.text}>{item.name}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        <Text style={styles.title}>Navigation</Text>
+        <View style={styles.section}>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              {backgroundColor: colors.purple, width: screenWidth / 2 - 40},
+            ]}
+            onPress={() => {
+              navigation.navigate('SecondPage');
+            }}>
+            <Text style={styles.text}>Page</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              {backgroundColor: colors.acai, width: screenWidth / 2 - 40},
+            ]}
+            onPress={() => {
+              navigation.navigate('Modal');
+            }}>
+            <Text style={styles.text}>Modal</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const colors = {
+  green: '#52bd95',
+  darkGreen: '#28a745',
+  acai: '#5c4d6b',
+  purple: '#6152bd',
+  lightPurple: '#6f42c1',
+  indigo: '#6610f2',
+  pink: '#e83e8c',
+  red: '#dc3545',
+  orange: '#fd7e14',
+  yellow: '#ffc107',
+  darkBlue: '#262e4f',
+};
+
+const styles = StyleSheet.create({
+  safeArea: {flex: 1, backgroundColor: colors.darkBlue},
+  page: {
+    flex: 1,
+    paddingTop: 30,
+  },
+  trackingButton: {
+    marginVertical: 5,
+    marginHorizontal: 5,
+    paddingHorizontal: 0,
+    paddingVertical: 16,
+    backgroundColor: colors.green,
+    borderRadius: 8,
+    width: screenWidth / 3 - 20,
+  },
+  button: {
+    marginVertical: 8,
+    marginHorizontal: 5,
+    paddingHorizontal: 12,
+    paddingVertical: 16,
+    backgroundColor: colors.green,
+    borderRadius: 8,
+    width: screenWidth / 1.5,
+  },
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 24,
+    textAlign: 'center',
+  },
+  title: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  section: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginBottom: 40,
+  },
+  mainHeading: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 24,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+});
+
+export default Home;

package/examples/AnalyticsReactNativeExample/Modal.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const Modal = () => {
+  return (
+    <View style={styles.page}>
+      <Text style={styles.text}>Hello! 👋</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#262e4f',
+  },
+  text: {
+    color: '#fff',
+    fontSize: 24,
+  },
+});
+
+export default Modal;

package/examples/AnalyticsReactNativeExample/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

package/examples/AnalyticsReactNativeExample/SecondPage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const SecondPage = () => {
+  return (
+    <View style={styles.page}>
+      <Text style={styles.text}>Hello! 👋</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#262e4f',
+  },
+  text: {
+    color: '#fff',
+    fontSize: 24,
+  },
+});
+
+export default SecondPage;