React Native

# Using npm
npm install not-published-package-yet --save

# Using yarn
yarn add not-published-package-yet

import React, { useEffect } from 'react';
import { CUX } from 'cux-react-native';
import AppNavigator from './navigation/AppNavigator'; // Import your main navigation component

const App = () => {
  useEffect(() => {
    // Initialize CUX with your unique API Key and options
    CUX.initialize({
      token: 'YOUR_UNIQUE_API_KEY',
      enableCrashReporting: true, // Optional: enable crash reporting
    });
  }, []);

  return <AppNavigator />;
};

export default App;

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

// 1. Import the useCUXNavigation hook from the CUX package
import { useCUXNavigation } from 'cux-react-native';

// Import your screen components
import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';
import ProfileScreen from '../screens/ProfileScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {
  // 2. Call the hook to get the required props for the container
  const cuxNavProps = useCUXNavigation();

  return (
    // 3. Spread the props onto NavigationContainer
    <NavigationContainer {...cuxNavProps}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

With this implementation, CUX will automatically record every screen a user visits, without requiring any additional code in your individual screen components. The hook returns a ref, onReady, and onStateChange handler, which are all passed to the NavigationContainer.

Autocapture of Tap Events

To simplify the collection of interaction data, the CUX SDK provides a way to automatically capture tap events on specific elements. This feature automatically records the element's identifier and the coordinates of the tap.

nstead of a hook, the SDK offers a wrapper component, <CUX.Touchable>. This component functions just like a standard Pressable component but adds automatic event tracking.

When a user taps a <CUX.Touchable> component, the SDK will automatically fire an event with the following payload:

• Event Name: cux_tap

• Coordinates: The x and y position of the tap relative to the screen.

• Element ID: The testID or nativeID of the tapped element.

The component is designed to be a drop-in replacement for TouchableOpacity or Pressable and will not interfere with your existing onPress handlers.

To enable autocapture, simply replace your existing touchable component with <CUX.Touchable> and ensure you have assigned a testID.

import { Text, StyleSheet } from 'react-native';
// 1. Import the CUX.Touchable component from the SDK
import { CUX } from 'cux-react-native';

const MyButton = ({ onPress }) => (
  // 2. Replace TouchableOpacity with CUX.Touchable
  <CUX.Touchable
    style={styles.button}
    onPress={onPress} // Your original onPress handler still works perfectly
    testID="checkout-button" // The ID is now automatically captured
  >
    <Text style={styles.text}>Proceed to Checkout</Text>
  </CUX.Touchable>
);

const styles = StyleSheet.create({
  button: { padding: 10, backgroundColor: '#007bff' },
  text: { color: 'white' }
});

import { SafeAreaView, StyleSheet } from 'react-native';
// 1. Import the CUX object
import { CUX } from 'cux-react-native';

const LoginScreen = () => {
  return (
    <SafeAreaView>
      {/* 2. Use CUX.TextInput instead of the standard TextInput */}
      <CUX.TextInput
        style={styles.input}
        placeholder="Enter your email"
        keyboardType="email-address"
      />
      <CUX.TextInput
        style={styles.input}
        placeholder="Enter your password"
        secureTextEntry
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: { height: 40, borderColor: 'gray', borderWidth: 1, margin: 10, padding: 10 }
});

You may have other sensitive information in your app that is not an input field, such as user balances, names, or profile pictures. The SDK provides a <CUX.Mask> wrapper component to easily hide any element from screenshots.

You can wrap any component or group of components with <CUX.Mask>. During a screenshot, the <CUX.Mask> component will render a solid placeholder block that has the exact same dimensions as the content it wraps, effectively hiding it. Your application's UI remains unchanged for the user.

Imagine you have a View that displays a user's account balance. To mask it, simply wrap the entire view in <CUX.Mask>.

import { View, Text, StyleSheet } from 'react-native';
import { CUX } from 'cux-react-native';

const AccountBalance = ({ balance }) => {
  return (
    // Wrap the sensitive area with CUX.Mask
    <CUX.Mask>
      <View style={styles.balanceContainer}>
        <Text style={styles.label}>Your Balance</Text>
        <Text style={styles.balanceText}>${balance}</Text>
      </View>
    </CUX.Mask>
  );
};

const styles = StyleSheet.create({
  balanceContainer: { padding: 20, backgroundColor: '#f0f0f0', alignItems: 'center' },
  label: { fontSize: 16, color: '#666' },
  balanceText: { fontSize: 24, fontWeight: 'bold', color: 'black' }
});

import { CUX } from 'cux-react-native';

const handleLogin = (user) => {
  // Your login logic...

  // After a successful login, identify the user in CUX
  CUX.identifyUser(user.id, {
    email: user.email,
    name: user.fullName,
    plan: 'premium', // Example custom attribute
  });
};