@jmartins-tillster/analytics-react-native 2.21.3

package/examples/E2E-73/.bundle/config

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

package/examples/E2E-73/.detoxrc.js

@@ -0,0 +1,96 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      '$0': 'jest',
+      config: 'e2e/jest.config.js',
+      forceExit: process.env.CI ? true : undefined,
+    },
+    jest: {
+      setupTimeout: 120000
+    },
+    detached: !!process.env.CI,
+    retries: 3
+  },
+  behavior: {
+      init: {
+        reinstallApp: true,
+        exposeGlobals: false
+      },
+      launchApp: "auto",
+      cleanup: {
+        shutdownDevice: false
+      }
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/AnalyticsReactNativeE2E.app',
+      build: 'xcodebuild -workspace ios/AnalyticsReactNativeE2E.xcworkspace -scheme AnalyticsReactNativeE2E -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/AnalyticsReactNativeE2E.app',
+      build: 'xcodebuild -workspace ios/AnalyticsReactNativeE2E.xcworkspace -scheme AnalyticsReactNativeE2E -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'android.debug': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      build: 'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
+      reversePorts: [
+        8081
+      ]
+    },
+    'android.release': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      build: 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release'
+    }
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 14'
+      }
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*'
+      }
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_3a_API_32'
+      }
+    }
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug'
+    },
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release'
+    },
+    'android.att.debug': {
+      device: 'attached',
+      app: 'android.debug'
+    },
+    'android.att.release': {
+      device: 'attached',
+      app: 'android.release'
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug'
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release'
+    }
+  }
+};

package/examples/E2E-73/.eslintrc.js

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

package/examples/E2E-73/.mise.toml

@@ -0,0 +1,5 @@
+[tools]
+java = "zulu-17"
+node = "18"
+ruby = '3.3.0'
+cocoapods = "latest"

package/examples/E2E-73/.prettierrc.js

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

package/examples/E2E-73/.watchmanconfig

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

package/examples/E2E-73/App.tsx

@@ -0,0 +1,175 @@
+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 {Platform} from 'react-native';
+
+// 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: 'yup',
+  maxBatchSize: 1000,
+  trackDeepLinks: true,
+  trackAppLifecycleEvents: true,
+  autoAddSegmentDestination: true,
+  collectDeviceId: true,
+  debug: true,
+  flushPolicies: [
+    new CountFlushPolicy(5),
+    // These are disabled for E2E tests
+    // new TimerFlushPolicy(1000),
+    // new StartupFlushPolicy(),
+  ],
+  proxy: Platform.select({
+    ios: 'http://localhost:9091/events',
+    android: 'http://10.0.2.2:9091/events',
+  }),
+  cdnProxy: Platform.select({
+    ios: 'http://localhost:9091/settings',
+    android: 'http://10.0.2.2:9091/settings',
+  }),
+});
+
+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/E2E-73/Gemfile

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'

package/examples/E2E-73/Gemfile.lock

@@ -0,0 +1,99 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.6)
+      rexml
+    activesupport (7.0.8)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+    addressable (2.8.5)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.14.3)
+      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.14.3)
+      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.2.2)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    json (2.7.1)
+    minitest (5.20.0)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.7)
+    rexml (3.2.6)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.23.0)
+      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.2.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.3, < 7.1.0)
+  cocoapods (~> 1.13)
+
+RUBY VERSION
+   ruby 2.7.6p219
+
+BUNDLED WITH
+   2.1.4

package/examples/E2E-73/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/E2E-73/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;