Appearance
SDK Initialization
How to initialize the Upshot.ai React Native SDK in your application.
Overview
You should initialize the Upshot.ai every time the app is launched or app comes to foreground from background. For every initialization you will get authentication status by addListener with UpshotAuthStatus. A session is created every time the SDK is initialized.
Basic Initialization
Initialize the SDK with your app credentials:
javascript
import Upshot, { UpshotInitOptions } from "react-native-upshotsdk";
// Initialize SDK in your App.js or index.js
const initializeUpshot = () => {
const options = {
[UpshotInitOptions.AppId]: "Application Id given by Upshot.ai",
[UpshotInitOptions.OwnerId]: "Owner Id given by Upshot.ai",
[UpshotInitOptions.EnableLocation]: true,
[UpshotInitOptions.EnableCrashLog]: true,
[UpshotInitOptions.ExternalStorage]: false,
};
// Initialize SDK
Upshot.initializeUpshotUsingOptions(JSON.stringify(options));
// Add authentication status listener
Upshot.addListener("UpshotAuthStatus", handleAuthStatus);
};
const handleAuthStatus = (response) => {
// response is JSON Object
console.log("Auth Status:", response);
if (response.status) {
console.log("SDK initialized successfully");
} else {
console.error("SDK initialization failed:", response.error);
}
};
// Call in your app's entry point
initializeUpshot();typescript
import Upshot, { UpshotInitOptions } from "react-native-upshotsdk";
interface AuthResponse {
status: boolean;
error: string;
}
// Initialize SDK in your App.tsx or index.tsx
const initializeUpshot = (): void => {
const options = {
[UpshotInitOptions.AppId]: "Application Id given by Upshot.ai",
[UpshotInitOptions.OwnerId]: "Owner Id given by Upshot.ai",
[UpshotInitOptions.EnableLocation]: true,
[UpshotInitOptions.EnableCrashLog]: true,
[UpshotInitOptions.ExternalStorage]: false,
};
// Initialize SDK
Upshot.initializeUpshotUsingOptions(JSON.stringify(options));
// Add authentication status listener
Upshot.addListener("UpshotAuthStatus", handleAuthStatus);
};
const handleAuthStatus = (response: AuthResponse): void => {
// response is JSON Object
console.log("Auth Status:", response);
if (response.status) {
console.log("SDK initialized successfully");
} else {
console.error("SDK initialization failed:", response.error);
}
};
// Call in your app's entry point
initializeUpshot();Configuration Options
Available initialization options and their descriptions:
javascript
{
// Required
[UpshotInitOptions.AppId]: "Application Id given by Upshot.ai", // Application ID provided by Upshot.ai (can be viewed on dashboard)
[UpshotInitOptions.OwnerId]: "Owner Id given by Upshot.ai", // Account ID provided by Upshot.ai (can be viewed on dashboard)
// Optional
[UpshotInitOptions.EnableLocation]: true, // Enable location tracking (disabled by default)
[UpshotInitOptions.EnableCrashLog]: true, // Enable crash log capture (enabled by default)
[UpshotInitOptions.ExternalStorage]: false // Enable external storage usage
}Authentication Status Handling
Add Listener
Add a listener to handle authentication status updates:
javascript
// Add listener for authentication status
Upshot.addListener("UpshotAuthStatus", handleAuthStatus);
const handleAuthStatus = (response) => {
// response is JSON Object
console.log("Authentication Response:", response);
if (response.status) {
// Success: {"error":"","status":true}
console.log("Authentication successful");
} else {
// Error: {"error":"will get error message","status":false}
console.error("Authentication failed:", response.error);
}
};Remove Listener
Remove the authentication status listener when no longer needed:
javascript
// Remove listener
Upshot.removeListener("UpshotAuthStatus");Session Management
Session Creation
A new session is registered every time the SDK is initialized. When the app goes to the background, the session needs to be terminated.
Session Termination
javascript
// Terminate the current session
Upshot.terminate();Important Notes:
- Every successful authentication creates a new session
- Sessions are terminated only when
terminate()is called - Every time
initializeUpshotis called, the old session gets terminated and a new session starts - Avoid multiple duplicate sessions by not initializing the SDK when navigating between screens unless it's a specific business need
App Lifecycle Integration
Foreground Initialization
Initialize the SDK when the app comes to foreground:
javascript
import { AppState } from "react-native";
// Handle app state changes
const handleAppStateChange = (nextAppState) => {
if (nextAppState === "active") {
// App has come to the foreground
initializeUpshot();
} else if (nextAppState === "background") {
// App has gone to the background
Upshot.terminate();
}
};
// Add app state listener
AppState.addEventListener("change", handleAppStateChange);Component Integration
For React components, you can integrate initialization in useEffect:
javascript
import { useEffect } from "react";
const App = () => {
useEffect(() => {
// Initialize on component mount
initializeUpshot();
// Cleanup on unmount
return () => {
Upshot.removeListener("UpshotAuthStatus");
Upshot.terminate();
};
}, []);
// ... rest of your component
};Verification
Run Your Application
On Upshot.ai SDK integration success, you can see an active user on the dashboard LiveEvents Section.
Testing Integration
javascript
// Test if SDK is properly initialized
const testSDKStatus = () => {
Upshot.addListener("UpshotAuthStatus", (response) => {
if (response.status) {
console.log("✅ SDK is working correctly");
// You should see this user in the Upshot.ai dashboard
} else {
console.error("❌ SDK initialization failed:", response.error);
}
});
};Environment Configuration
Development vs. Production
Use different configurations for development and production:
javascript
// Using environment variables or constants
const getInitOptions = () => {
if (__DEV__) {
return {
[UpshotInitOptions.AppId]: "DEV_APP_ID",
[UpshotInitOptions.OwnerId]: "DEV_OWNER_ID",
[UpshotInitOptions.EnableLocation]: false, // Disable in development
[UpshotInitOptions.EnableCrashLog]: true,
[UpshotInitOptions.ExternalStorage]: false,
};
} else {
return {
[UpshotInitOptions.AppId]: "PROD_APP_ID",
[UpshotInitOptions.OwnerId]: "PROD_OWNER_ID",
[UpshotInitOptions.EnableLocation]: true,
[UpshotInitOptions.EnableCrashLog]: true,
[UpshotInitOptions.ExternalStorage]: false,
};
}
};
// Initialize with environment-specific config
Upshot.initializeUpshotUsingOptions(JSON.stringify(getInitOptions()));Best Practices
- Initialize early in app lifecycle (App.js or index.js)
- Always add authentication status listener before initialization
- Handle app state changes for proper session management
- Terminate sessions when app goes to background
- Use environment-specific configurations
- Avoid multiple initializations during app navigation
- Remove listeners when components unmount
Troubleshooting
Common initialization issues and solutions:
Invalid Credentials
- Verify App ID and Owner ID from Upshot.ai dashboard
- Check environment configuration
- Confirm account status on dashboard
Authentication Failures
- Check network connectivity
- Verify API endpoint accessibility
- Review authentication response error messages
- Ensure proper listener setup before initialization
Session Issues
- Avoid multiple simultaneous sessions
- Always terminate sessions on app background
- Check session timeout configurations
- Monitor active sessions on dashboard

