> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding

> Get started with Tight Embeddable UI for React Native

## Get Started

### NPM Configuration

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

<CodeGroup>
  ```bash npm theme={null}
  npm install @tight-embedded/react-native@latest
  ```
</CodeGroup>

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

```TSX MileageScreen.tsx theme={null}
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](/api-reference/authentication).

In addition to installing the Tight React Native Component Library, you must add the following to your `package.json`

```json package.json theme={null}
{
    ...
    "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`

```javascript babel.config.js theme={null}
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`:

```ruby Podfile theme={null}
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

```XML Info.plist theme={null}
<key>TightClientId</key>
<string>fake_client_id</string>
```

2. A Google Maps API key

```XML Info.plist theme={null}
<key>GoogleAPIKey</key>
<string>fake_google_api_key</string>
```

3. 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:

```XML Info.plist theme={null}
<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:

```kotlin settings.gradle.kts theme={null}
pluginManagement {
    repositories {
        mavenCentral()
    }
}
```

Then, add the following to your `ReactApplication`:

```kotlin MainApplication.kt theme={null}
...
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`

```XML strings.xml theme={null}
    <string name="tight_client_id">fake_client_id</string>
```

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

```XML strings.xml theme={null}
    <string name="google_api_key_places">fake_google_api_key</string>
```