Skip to main content

​
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:
  1. The provided Tight API client id
Info.plist
<key>TightClientId</key>
<string>fake_client_id</string>
  1. A Google Maps API key
Info.plist
<key>GoogleAPIKey</key>
<string>fake_google_api_key</string>
  1. 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:
  1. The provided Tight API client id in res/values/strings.xml
strings.xml
    <string name="tight_client_id">fake_client_id</string>
  1. A Google Maps API key in res/values/strings.xml
strings.xml
    <string name="google_api_key_places">fake_google_api_key</string>