Skip to main content

Usage

Integrating Viewlytics into your React Native application is straightforward. Follow these steps to start capturing and analyzing screenshots:

1. Initialize the SDK​

First, initialize the Viewlytics SDK in your app's main entry point, typically App.js or index.js. You'll need your unique SDK key for this step, you can find it on Project Settings page in the Viewlytics dashboard.

import Viewlytics from 'react-native-viewlytics';

Viewlytics.init('YOUR_SDK_KEY');

Note: Replace 'YOUR_SDK_KEY' with the actual key provided in your Viewlytics dashboard.

2. Capture Screenshots​

To capture a screenshot at specific points in your application, call the Viewlytics.captureScreen method. Provide a unique and descriptive event name to easily identify the context of the screenshot later.

Viewlytics.captureScreen('your_event_name');

This event name helps you categorize and filter screenshots within the Viewlytics dashboard.

Example Usage​

Here’s an example of how you might use captureScreen within a React component, such as a login screen:

import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import Viewlytics from 'react-native-viewlytics';

export function LoginScreen(props) {
  
    const handleLogin = () => {
        // Capture a screenshot when the login button is pressed
        Viewlytics.captureScreen('login_button_pressed');
    };

    useEffect(() => {
        // Capture a screenshot when the component mounts
        Viewlytics.captureScreen('initial_render_login_screen');
    }, []);

    return (
        <View>
            {/* Other login form elements */}
            <Button title="Login" onPress={handleLogin} />
        </View>
    );
}

Viewlytics offers a simple yet powerful way to gain visual insights into your application's usage. You can capture screenshots at any critical point, helping you track user interactions and diagnose issues more effectively.

Key Benefits​

  • Diagnose UI Bugs: Capture screenshots automatically upon specific events or errors to quickly identify and fix visual glitches.
  • Optimize User Experience (UX): Analyze screen flows by capturing screenshots at different stages to pinpoint usability issues and bottlenecks.
  • Track Custom Events: Log screenshots for any custom event relevant to your app, providing tailored insights into user behavior and feature adoption.
  • How your looks on different devices: Capture screenshots on various devices to ensure consistent UI/UX across platforms.