@toyef/arise-react-native

A comprehensive React Native and Expo analytics SDK for tracking screen views, events, and user interactions in mobile applications.

Installation

npm install @toyef/arise-react-native

Peer Dependencies

Make sure you have these peer dependencies installed:

# For React Native
npm install @react-native-async-storage/async-storage react-native-device-info

# For Expo
npm install @react-native-async-storage/async-storage expo-constants expo-device

Quick Start

1. Basic Setup

import arise from '@toyef/arise-react-native';

// Initialize with your project token
arise.init('your-project-token-here');

2. Track Screen Views

// Track a screen view
arise.screen('Home Screen');

// Track with navigation
arise.screen('Product Details');

3. Track Events

// Track a simple event
arise.track('button_pressed');

// Track an event with properties
arise.track('purchase_completed', {
  product_id: 'abc123',
  price: 29.99,
  currency: 'USD',
  payment_method: 'credit_card'
});

4. Identify Users

// Set user ID
arise.setUserId('user123');

// Set user properties
arise.identify({
  email: '[email protected]',
  name: 'John Doe',
  plan: 'premium',
  signup_date: '2024-01-15'
});

React Navigation Integration

Automatic Screen Tracking

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import arise, { useTrackReactNavigation } from '@toyef/arise-react-native';

const Stack = createStackNavigator();

function App() {
  // Initialize Arise
  React.useEffect(() => {
    arise.init('your-project-token');
  }, []);

  // Set up automatic screen tracking
  const [navigationProps, navigationRef] = useTrackReactNavigation();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={navigationProps.onReady}
      onStateChange={navigationProps.onStateChange}
    >
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Manual Screen Tracking

import React from 'react';
import { useFocusEffect } from '@react-navigation/native';
import arise from '@toyef/arise-react-native';

function HomeScreen() {
  useFocusEffect(
    React.useCallback(() => {
      arise.screen('Home Screen');
    }, [])
  );

  return (
    // Your screen content
  );
}

Expo Integration

// App.js
import React, { useEffect } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import arise from '@toyef/arise-react-native';

export default function App() {
  useEffect(() => {
    // Initialize Arise
    arise.init('your-project-token');

    // Track app launch
    arise.track('app_launched');

    // Track initial screen
    arise.screen('Home');
  }, []);

  const handleButtonPress = () => {
    arise.track('button_pressed', {
      button_name: 'hello_button',
      screen: 'home'
    });
  };

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button title="Track Event" onPress={handleButtonPress} />
      <StatusBar style="auto" />
    </View>
  );
}

Advanced Usage

User Authentication Flow

import React, { useEffect } from 'react';
import arise from '@toyef/arise-react-native';

function AuthScreen() {
  const handleLogin = async (email, password) => {
    try {
      const user = await loginUser(email, password);

      // Set user ID
      arise.setUserId(user.id);

      // Identify user with properties
      arise.identify({
        email: user.email,
        name: user.name,
        plan: user.subscription_plan,
        login_method: 'email'
      });

      // Track login event
      arise.track('user_logged_in', {
        method: 'email',
        user_type: user.type
      });

    } catch (error) {
      arise.track('login_failed', {
        error: error.message,
        method: 'email'
      });
    }
  };

  const handleLogout = () => {
    arise.track('user_logged_out');
    // Clear user data if needed
  };

  return (
    // Your auth UI
  );
}

E-commerce Tracking

import arise from '@toyef/arise-react-native';

// Track product views
const trackProductView = (product) => {
  arise.track('product_viewed', {
    product_id: product.id,
    product_name: product.name,
    category: product.category,
    price: product.price,
    currency: 'USD'
  });
};

// Track add to cart
const trackAddToCart = (product, quantity) => {
  arise.track('product_added_to_cart', {
    product_id: product.id,
    product_name: product.name,
    quantity: quantity,
    price: product.price,
    total_value: product.price * quantity
  });
};

// Track purchases
const trackPurchase = (order) => {
  arise.track('purchase_completed', {
    order_id: order.id,
    total_amount: order.total,
    currency: order.currency,
    payment_method: order.payment_method,
    items_count: order.items.length,
    items: order.items.map(item => ({
      product_id: item.id,
      quantity: item.quantity,
      price: item.price
    }))
  });
};

Custom Events with Context

import arise from '@toyef/arise-react-native';

// Track with rich context
const trackVideoPlay = (video) => {
  arise.track('video_played', {
    video_id: video.id,
    video_title: video.title,
    duration: video.duration,
    quality: video.quality,
    platform: Platform.OS,
    device_type: DeviceInfo.getDeviceType(),
    connection_type: NetInfo.getConnectionInfo().type
  });
};

// Track app performance
const trackAppPerformance = (metrics) => {
  arise.track('app_performance', {
    startup_time: metrics.startupTime,
    memory_usage: metrics.memoryUsage,
    cpu_usage: metrics.cpuUsage,
    battery_level: metrics.batteryLevel
  });
};

API Reference

arise.init(token)

Initialize the Arise SDK with your project token.

Parameters:

• token (string): Your project token from Arise dashboard

arise.screen(screenName)

Track a screen view.

Parameters:

• screenName (string): Name of the screen

arise.track(eventName, properties?)

Track a custom event.

Parameters:

• eventName (string): Name of the event
• properties (object, optional): Event properties

arise.setUserId(userId)

Set the user ID for tracking.

Parameters:

• userId (string): Unique user identifier

arise.identify(userProperties)

Set user properties for identification.

Parameters:

• userProperties (object): User properties

useTrackReactNavigation(ref?)

Hook for automatic React Navigation screen tracking.

Parameters:

• ref (optional): Navigation container ref

Returns:

• [navigationProps, navigationRef]: Props and ref for NavigationContainer

Device Information

The SDK automatically collects device information including:

• Device model and brand
• Operating system and version
• App version
• Screen dimensions
• Network connectivity status

Privacy & Compliance

The SDK respects user privacy and includes features for GDPR compliance:

// The SDK automatically handles session management
// and respects app lifecycle events

// Data is stored locally using AsyncStorage
// and transmitted securely to Arise servers

TypeScript Support

The package includes full TypeScript definitions:

import arise from '@toyef/arise-react-native';

// Type-safe event tracking
arise.track('user_action', {
  action_type: 'button_press',
  element_id: 'submit_button'
});

// Type-safe user identification
arise.identify({
  email: '[email protected]',
  age: 25,
  premium_user: true
});

Troubleshooting

Common Issues

1. AsyncStorage not found: Make sure you have @react-native-async-storage/async-storage installed
2. Device info not available: Install react-native-device-info for React Native or use Expo managed workflow
3. Navigation tracking not working: Ensure you're using the latest version of React Navigation

Debug Mode

// Enable debug logging (development only)
if (__DEV__) {
  console.log('Arise tracking enabled in debug mode');
}

Platform Support

• React Native 0.60+
• Expo SDK 40+
• iOS 10+
• Android API 21+

License

MIT

Support

For issues and questions, please visit our documentation or create an issue on GitHub.