Mobile Apps

import { AppState } from 'react-native';
import UserBoost from '@userboost/react-native';

class App extends Component {
  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  handleAppStateChange = (nextAppState) => {
    if (nextAppState === 'active') {
      UserBoost.event('app_opened', {
        user: { id: this.getCurrentUserId() },
        properties: {
          session_start: new Date().toISOString()
        }
      });
    } else if (nextAppState === 'background') {
      UserBoost.event('app_backgrounded', {
        user: { id: this.getCurrentUserId() },
        properties: {
          session_duration: this.getSessionDuration()
        }
      });
    }
  };
}

// With React Navigation
import { NavigationContainer } from '@react-navigation/native';

function App() {
  const routeNameRef = useRef();
  const navigationRef = useNavigationContainerRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          UserBoost.event('screen_viewed', {
            user: { id: getCurrentUserId() },
            properties: {
              screen_name: currentRouteName,
              previous_screen: previousRouteName,
              timestamp: new Date().toISOString()
            }
          });
        }

        routeNameRef.current = currentRouteName;
      }}
    >
      {/* Your navigation stack */}
    </NavigationContainer>
  );
}

// Button taps
const handleButtonPress = (buttonName) => {
  UserBoost.event('button_tapped', {
    user: { id: getCurrentUserId() },
    properties: {
      button_name: buttonName,
      screen: getCurrentScreen(),
      timestamp: new Date().toISOString()
    }
  });
};

// Form submissions
const handleFormSubmit = (formData) => {
  UserBoost.event('form_submitted', {
    user: { id: getCurrentUserId() },
    properties: {
      form_type: 'profile_update',
      fields_completed: Object.keys(formData).length,
      screen: 'profile_edit'
    }
  });
};

// Events are automatically queued offline
UserBoost.event('offline_action', {
  user: { id: 'user_123' },
  properties: { action: 'create_draft' }
});

// Check queue status
UserBoost.getQueueLength().then(count => {
  console.log(`${count} events queued`);
});

// Force flush when back online
UserBoost.flush();

// Track notification received
UserBoost.event('push_notification_received', {
  user: { id: getCurrentUserId() },
  properties: {
    campaign_id: notification.campaignId,
    message: notification.message,
    received_at: new Date().toISOString()
  }
});

// Track notification tapped
UserBoost.event('push_notification_tapped', {
  user: { id: getCurrentUserId() },
  properties: {
    campaign_id: notification.campaignId,
    action: 'open_app'
  }
});

// config/index.js
const config = {
  development: {
    USERBOOST_API_KEY: 'ub_live_your_dev_key_here',
  },
  production: {
    USERBOOST_API_KEY: 'ub_live_your_prod_key_here',
  }
};

export default config[process.env.NODE_ENV || 'development'];

// App.js
import config from './config';
import UserBoost from '@userboost/react-native';

UserBoost.init({
  apiKey: config.USERBOOST_API_KEY,
  debug: __DEV__,
});

UserBoost.init({
  apiKey: 'your_key',
  debug: true, // or __DEV__
});

// Enable verbose logging
UserBoost.setLogLevel('verbose');

// Send test event
UserBoost.event('mobile_integration_test', {
  user: { id: `test_user_${Date.now()}` },
  properties: {
    test: true,
    platform: Platform.OS,
    timestamp: new Date().toISOString()
  }
});