@devtravelcode/widget-native

React Native widget for searching and booking flights and hotels. Powered by Travel-Code.com.

Prerequisites

Before installing the widget, you need to become a Travel-Code client and set up your widget:

Step 1: Register as a client

Sign up at travel-code.com and get access to the partner dashboard.

Step 2: Create and configure your widget

Go to travel-code.com/user/search-widget-options and:

• Create a new widget
• Choose which services to enable (flights, hotels)
• Customize colors, default language, and currency
• Configure commission settings

Step 3: Get your API token

After saving the widget configuration, copy the API token from the widget settings page. You will need it to initialize the widget in your app.

Installation

npm install @devtravelcode/widget-native

Peer dependencies

npx expo install react-native-gesture-handler react-native-safe-area-context \
  react-native-svg react-native-reanimated react-native-maps \
  react-native-webview @react-native-async-storage/async-storage

Google Maps API key (required for the hotel map)

The hotel map is rendered with Google Maps (react-native-maps), which needs a Google Maps API key configured in your app's native settings. Without it, the map screen opens blank. The key is per-app and is not bundled with this package — you must add your own to your project.

1. Get a key. In the Google Cloud Console, create an API key and enable Maps SDK for Android and Maps SDK for iOS.

2a. Expo (managed) — add it to app.json:

{
  "expo": {
    "ios": {
      "config": { "googleMapsApiKey": "YOUR_GOOGLE_MAPS_API_KEY" }
    },
    "android": {
      "config": { "googleMaps": { "apiKey": "YOUR_GOOGLE_MAPS_API_KEY" } }
    }
  }
}

The key is applied during the native build only. Run npx expo prebuild and rebuild (eas build, or expo run:ios / expo run:android). The map will not work in Expo Go — use a dev build or a standalone build.

2b. Bare React Native:

• Android — in android/app/src/main/AndroidManifest.xml, inside <application>:

  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_GOOGLE_MAPS_API_KEY"/>

• iOS — in ios/<AppName>/AppDelegate.swift (or .mm):

  import GoogleMaps
  // inside application(_:didFinishLaunchingWithOptions:)
  GMSServices.provideAPIKey("YOUR_GOOGLE_MAPS_API_KEY")

Usage

import { TravelCodeWidget } from '@devtravelcode/widget-native';

export default function App() {
  return (
    <TravelCodeWidget
      token="YOUR_API_TOKEN"
      lang="en"
      currency="USD"
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | token | string | Yes | — | API token from your widget settings | | lang | string | No | "en" | Language ("en", "ru") | | currency | string | No | "USD" | Currency code ("USD", "GBP", "EUR") | | nationality | string | No | — | ISO-2 country code (e.g. "GB", "PL") prefilled into the nationality field in hotel/car search forms. Overrides the default ("GB" for hotels) and IP-based detection (for cars). The user can still change it manually. | | config | WidgetConfig | No | — | Widget configuration (merged with remote config from server) | | user | WidgetUser | No | — | Host-app user identity. Appended to "Buy"/"Book" URLs as clientUserId, clientEmail, clientName query params (only fields that are set). | | showBasketButton | boolean | No | false | When true, renders a floating basket button (bottom-right). Tap opens <basket_link>/basket inside the WebView. Requires config.additional.basket_link. | | style | StyleProp<ViewStyle> | No | — | Custom container style |

WidgetUser

type WidgetUser = {
  id?: string | number;
  email?: string;
  name?: string;
};

Example

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { TravelCodeWidget } from '@devtravelcode/widget-native';

export default function App() {
  return (
    <SafeAreaProvider>
      <TravelCodeWidget
        token="your-token-here"
        lang="en"
        currency="USD"
        nationality="GB"
        user={{ id: 'u-123', email: '[email protected]', name: 'Jane Doe' }}
        showBasketButton
      />
    </SafeAreaProvider>
  );
}

In-App WebView

Booking and payment pages open inside the app in a full-screen WebView instead of redirecting to an external browser. This keeps users within your app throughout the entire booking flow (room selection, cart, payment).

The WebView screen includes:

• Back button — navigates back through WebView history, then returns to search results
• Close button — returns to search results immediately
• iOS swipe-back gesture support

This requires react-native-webview (listed as a peer dependency above).

Requirements

• React Native >= 0.72
• React >= 18
• Expo SDK 49+ (recommended)

Support

For technical support and licensing inquiries: [email protected]

For widget configuration help, visit the Travel-Code documentation.