Embedding

Get Started

NPM Configuration

Each Page is shipped in Tight’s React Native Component Library, which can be installed as follows:

npm install @tight-embedded/react-native@latest

Once imported, you’ll need to ensure that every Embeddable UI component is rendered in a React Tree wrapped with a <Tight> component.

MileageScreen.tsx

import { MileageDashboard, Tight } from "@tight-embedded/react-native";

function MileageScreen({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <MileageDashboard />
      </Tight>
    )
}

Tight recommends adding a single <Tight> component towards the top of your application tree for maintainability. The <Tight> component’s environment property can be "PRODUCTION" or "SANDBOX", depending on the environment you’d like to target. You can obtain an applicable accessToken via the Tight Authentication Endpoint. In addition to installing the Tight React Native Component Library, you must add the following to your package.json

package.json

{
    ...
    "react": "18.2.0",
    "react-native": "0.75.5",
    "react-redux": "~6.0.0",
    "redux": "~4.0.0",
    "@react-native-async-storage/async-storage": "~1.22.3",
    "@react-native-community/datetimepicker": "~7.6.3",
    "@react-native-community/netinfo": "~6.0.6",
    "@react-native-cookies/cookies": "6.2.1",
    "@react-native-picker/picker": "~2.7.2",
    "react-native-device-info": "~8.4.5",
    "react-native-gesture-handler": "~2.20.0",
    "react-native-reanimated": "~3.18.0",
    "react-native-localize": "github:tight-embedded/react-native-localize#v1.4.0-patch-1",
    "react-native-safe-area-context": "~4.10.0",
    "react-native-screens": "~3.33.0",
    "react-native-maps": "~1.13.2",
    "rn-fetch-blob": "github:tight-embedded/rn-fetch-blob#v0.11.2-patch-5"
    ...
}

Babel Configuration

You must also add react-native-reanimated/plugin as the last plugin in your babel.config.js

babel.config.js

module.exports = {
  ...
  plugins: [
    ...
    "react-native-reanimated/plugin"
  ],
  ...
};

iOS Configuration

The Tight SDK supports a minimum iOS deployment version of iOS 17.0. Your app must target an iOS version greater than or equal to this version in order to use the Tight SDK.

Podfile Configuration

Add the following dependencies to your Podfile:

Podfile

pod 'TightReactNative', :path => '../node_modules/@tight-embedded/react-native'
pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
pod 'GoogleMaps', '~> 7.3.0'
pod 'GooglePlaces', '~> 7.3.0'

Info.plist Configuration

In addition to installing the package with CocoaPods, you must also add the following to your app’s Info.plist file:

The provided Tight API client id

Info.plist

<key>TightClientId</key>
<string>fake_client_id</string>

A Google Maps API key

Info.plist

<key>GoogleAPIKey</key>
<string>fake_google_api_key</string>

The following permission declarations, so that your app can request the necessary permissions from the user when they turn on mileage tracking, while complying with Apple’s guidelines:

Info.plist

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>YOUR_APP_NAME uses Tight to collect and transmit location data, which is used solely for drive detection and mileage tracking.

For automatic drive detection and mileage tracking, please select "Change to Always Allow".</string>

<key>NSLocationAlwaysUsageDescription</key>
<string>YOUR_APP_NAME uses Tight to collect and transmit location data, which is used solely for drive detection and mileage tracking.

For automatic drive detection and mileage tracking, please select "Change to Always Allow".</string>

<key>NSLocationUsageDescription</key>
<string>YOUR_APP_NAME uses Tight to collect and transmit location data, which is used solely for drive detection and mileage tracking.

For automatic drive detection and mileage tracking, please select "Allow While Using App".
</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>YOUR_APP_NAME uses Tight to collect and transmit location data, which is used solely for drive detection and mileage tracking.

For automatic drive detection and mileage tracking, please select "Allow While Using App".</string>

<key>NSMotionUsageDescription</key>
<string>YOUR_APP_NAME uses Tight to collect and transmit motion data, which is used solely for drive detection and mileage tracking.

For automatic drive detection and mileage tracking, please select “Allow”.
</string>

<key>UIBackgroundModes</key>
<array>
    <string>location</string>
</array>

Android Configuration

The Tight SDK supports a minimum Android SDK version of 28. Your app must target an Android SDK version greater than or equal to this version in order to use the Tight SDK.

Gradle Configuration

Add the following to your settings.gradle.kts file:

settings.gradle.kts

pluginManagement {
    repositories {
        mavenCentral()
    }
}

Then, add the following to your ReactApplication:

MainApplication.kt

...
import com.tight.reactnative.Tight
...
class MainApplication : Application(), ReactApplication {
    ...
    override fun onCreate() {
        super.onCreate()
        Tight.initialize(this);
    }
    ...
}

Resource Configuration

In addition to the configuration above, you must also add the following to your app’s resource files:

The provided Tight API client id in res/values/strings.xml

strings.xml

    <string name="tight_client_id">fake_client_id</string>

A Google Maps API key in res/values/strings.xml

strings.xml

    <string name="google_api_key_places">fake_google_api_key</string>

Get Started

React Components

React Native Components

Plain Javascript

Full End-to-end App

Get Started

NPM Configuration

Babel Configuration

iOS Configuration

Podfile Configuration

Info.plist Configuration

Android Configuration

Gradle Configuration

Resource Configuration

​Get Started

​NPM Configuration

​Babel Configuration

​iOS Configuration

​Podfile Configuration

​Info.plist Configuration

​Android Configuration

​Gradle Configuration

​Resource Configuration

Get Started

NPM Configuration

Babel Configuration

iOS Configuration

Podfile Configuration

Info.plist Configuration

Android Configuration

Gradle Configuration

Resource Configuration