@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

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") | | config | WidgetConfig | No | — | Widget configuration (merged with remote config from server) | | style | StyleProp<ViewStyle> | No | — | Custom container style |

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"
      />
    </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.