event-sdk-react-native
v1.0.33
Published
This React Native SDK helps with tracking events and user behaviors automatically or manually, as well as identifying users and managing their groupings. It provides features like tracking events, user identification, SDK opt-out, and reset functionalitie
Downloads
2,299
Readme
Event SDK for React Native
This React Native SDK helps with tracking events and user behaviors automatically or manually, as well as identifying users and managing their groupings. It provides features like tracking events, user identification, SDK opt-out, and reset functionalities.
Installation
To install the package:
npm install your-package-name
## Usage
Initialization
Before using any of the features, you must initialize the SDK with your API key. This is typically done in your App component's useEffect.
## REQUIRED DEPENDENCIES TO USE:
- npm install @react-native-async-storage/async-storage
- npm install react-native-device-info
- npm install @react-navigation/native
- npm install @react-navigation/stack
- npm install react-native-gesture-handler
- npm install react-native-safe-area-context
- npm install react-native-screens
import React, { useEffect, useRef } from 'react';
import EventSDK from 'your-package-name';
import { NavigationContainer } from '@react-navigation/native';
const App = () => {
const navigationRef = useRef(null);
useEffect(() => {
const apiKey = 'your-api-key';
EventSDK.initializeSDK(apiKey, { trackScreenViews: true });
if (navigationRef.current) {
EventSDK.setNavigationRef(navigationRef.current);
}
}, []);
return (
<NavigationContainer ref={navigationRef}>
{/* Your navigation setup */}
</NavigationContainer>
);
};
export default App;
## initializeSDK(apiKey, options)
Initializes the SDK with the provided API key. Options can be used to enable automatic screen tracking.
## trackEvent(eventName, eventData)
Tracks a manual event with a specific event name and additional data.
## setNavigationRef(navigationRef)
Sets the navigation reference for tracking screen views automatically.
## getAnalyticsContext()
Fetches the current analytics context.
## group(groupId, traits)
Groups users under a specific group (e.g., a team or role).
## reset()
Resets the SDK, clearing any stored data or settings.
## optOut(isOptOut)
Opts the user out of tracking, passing true for opt-out or false for opt-in.
## identify(userId, traits)
Identifies a user by their unique ID and associated traits.
## COMPLETE CODE EXAMPLE:
import React, { useState, useEffect, useRef } from 'react';
import EventSDK from 'your-package-name';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const HomeScreen = ({ navigation }) => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to Form" onPress={() => navigation.navigate('Form')} />
</View>
);
};
const FormScreen = () => {
const [userId, setUserId] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const handleIdentifyEvent = () => {
const traits = { firstName, lastName };
EventSDK.identify(userId, traits);
};
return (
<View style={{ flex: 1 }}>
{/* Form UI */}
<Button title="Identify User" onPress={handleIdentifyEvent} />
</View>
);
};
const App = () => {
const navigationRef = useRef(null);
useEffect(() => {
const apiKey = 'your-api-key';
EventSDK.initializeSDK(apiKey, { trackScreenViews: true }); // For automatic Tracking
if (navigationRef.current) { // For automatic Tracking
EventSDK.setNavigationRef(navigationRef.current);
}
}, []);
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Form" component={FormScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;