react-native-trackflow v0.2.9

react-native-trackflow

React Native SDK for Trackflow.ai

Collaborate & Debug Your API's at Ease from your mobile application.

Prerequisites

1. A trackflow.ai account with your team members and projects.

2. Get the project API key from project detail screen of trackfow.ai.

Installation

1. Open the command line and navigate to your project root folder. Then run the following command.

npm install react-native-trackflow

2. If your react-native version is below 0.60, link the files to your iOS and Android project by running the following command.

react-native link react-native-trackflow

3. Our React Native Trackflow.ai SDK is dependent on @react-native-community/async-storage, so please make sure to link,

react-native link @react-native-community/async-storage

4. If your react-native version is above 0.60, run the following command inside your iOS directory.

5. Add the following line to root build.gradle file.

    maven {
        url "http://api.trackflow.ai:8081/repository/Synclovis/"
    }

pod install

If your pod installation is not showing react-native-trackflow, manually add the following line in your Podfile and then do a pod install.

pod ‘react-native-trackflow’, :path => ‘../node_modules/react-native-trackflow’

iOS Configuration (Mandatory)

iOS side of our library is written in Swift language. So if your project doesn’t have Bridging header file, please create it manually from your XCode.

File → New File → Swift File (Name anything)

Tap here to learn more about creating bridging headers.

Manual Linking

You can follow the steps here if you would like to integrate the SDK using manual linking.

Android

1. Append the following lines of code to your android/settings.gradle

include ‘:react-native-trackflow’ project(‘:react-native-trackflow’).projectDir=newFile(rootProject.projectDir,‘../node_modules/react-native-trackflow/android’ )

2. Add the following line of code to your module level dependencies in android/app/build.gradle

implementation project(‘:react-native-trackflow’)

3. Initialize the SDK in android/app/src/main/java/…/MainApplication.java

import com.synclovis.trackflow.TrackflowPackage;

@Override protected List getPackages() {

return Arrays. asList (

new MainReactPackage(),

new TrackflowPackage(),

…

)}

iOS (Using Cocoapods)

1. Add the following line in your ios/Podfile

2. Run the following command from your iOS directory.

pod install

Usage of Trackflow SDK

1. To start using Trackflow, import it into your index.js file. If you have separate file for android & iOS, import into index.ios.js and index.android.js file.

import Trackflow from ‘react-native-trackflow’

2. Initialise the SDK using your project level API Key.

import Trackflow from ‘react-native-trackflow’

Trackflow.startTracking("API-Key")

Above usage will enable all the services of Trackflow.

You can initialise Trackflow with specific services.

Trackflow.startTrackingServices("API-Key", Trackflow.SHAKE,Trackflow.AUTO_CAPTURE,Trackflow.PERMISSIONS, Trackflow.SCREENSHOT_WEB_REQUEST, Trackflow.NETWORKLOGS, Trackflow.ASYNCSTORAGE,Trackflow.DEVICEINFO)

Trackflow.AUTO_CAPTURE is a new feature to see the user journey by automatically capturing the screenshot in every screen change.

This feature works only with two navigation libraries,

1. react-navigation (3.x onwards)

2. react-native-router-flux (4.x)

Usage in react-navigation

For react-navigation, copy the following code based on your navigation implementation.

If you are using functional components , copy the following code to your NavigationContainer.

import Trackflow from ‘react-native-trackflow';
import { useRef } from 'react';
const navigationRef = useRef();
const routeNameRef = useRef();

<NavigationContainer
  ref="{navigationRef}"
  onStateChange="{getScreenNameNavigate}"
>
  <App />
</NavigationContainer>

async function getScreenNameNavigate(){
    const previousRouteName =
    routeNameRef.current; const currentRouteName =
    navigationRef.current.getCurrentRoute().name; if (previousRouteName !==
    currentRouteName) { setTimeout( function() { Trackflow.analyse(currentRouteName)
    } .bind(this), 2000 );
}

If you are using class components , copy the following code to your AppContainer.

import Trackflow from ‘react-native-trackflow';

function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}

<AppContainer
  onNavigationStateChange={(prevState, currentState) => {
    const prevScreen = getCurrentRouteName(prevState);
    const currentScreen = getCurrentRouteName(currentState);

    if (currentScreen !== prevScreen) {
      setTimeout(
        function () {
          Trackflow.analyse(currentScreen);
        }.bind(this),
        2000
      );
    }
  }}
/>;

See reactNavigationUsage.js for more details

Usage in react-native-router-flux

For react-native-router-flux, copy the following code to your root navigation file.

const reducerCreate = params => {const defaultReducer = new Reducer(params);

return (state, action) => {if(action.type == 'REACT_NATIVE_ROUTER_FLUX_FOCUS'){setTimeout(function() {Trackflow.analyse(action.routeName);}.bind(this),2000);}return defaultReducer(state, action);};};

Now assign the constant to createReducer prop of your Router.

<Router
    ...
    createReducer={reducerCreate}
    ...
/>

See rnrfUsage.js for more details

Licence

MIT License

Copyright (C) 2021 Trackflow

Permission is hereby granted to use this framework as is, modifications are not allowed. All rights reserved.

See Licence file for more details.