react-native-flix-inpage

A React Native bridge for the FlixMedia SDK, allowing retailers and internal teams to load FlixMedia product HTML inside a React Native application.

Overview

react-native-flix-inpage provides a simple way to integrate the FlixMedia Inpage SDK into React Native projects. It exposes a native bridge and a reusable InpageHtmlView component for rendering dynamic product content based on product parameters.

Features

• Native bridge to the FlixMedia Inpage SDK
• Render dynamic product HTML using InpageHtmlView
• Simple SDK initialization with credentials
• Supports React Native 0.73+
• Compatible with Expo projects using prebuild / development builds
• Callback support for load success and error handling

Installation

Install the package from npm:

npm install react-native-flix-inpage

Or, for Expo projects:

npx expo install react-native-flix-inpage

Requirements

• React Native 0.73+
• iOS and Android native build environment
• Expo projects must use prebuild / development build
• Valid FlixMedia SDK credentials

Getting Started

Import the package into your React Native screen or component:

import { InpageHtmlView, initialize } from 'react-native-flix-inpage';

Initialize the SDK using your FlixMedia username and password:

await initialize('username', 'password');

Important: The username and password must be issued by the FlixMedia service team. Please connect via flixmedia.com and the team will provide the correct credentials, distributor IDs, and other required product attributes needed to syndicate the content correctly.

After initialization, add InpageHtmlView inside your layout, typically within a ScrollView, and provide the required product data:

<ScrollView>
  <InpageHtmlView
    productParams={{
      mpn: '',
      ean: '',
      distributorId: 0,
      isoCode: '',
      flIsoCode: '',
      brand: '',
      title: '',
      price: '',
      currency: '',
    }}
    baseUrl="https://www.example.com"
    style={{ backgroundColor: 'white' }}
    onError={(err) => console.warn('Inpage error:', err)}
    onLoadedHtml={(html) => console.log('Inpage loaded, length:', html.length)}
  />
</ScrollView>

Usage Guide

1. Initialize the SDK

Call initialize() before rendering the InpageHtmlView component.

await initialize('username', 'password');

It is recommended to do this during app startup or before loading the product detail page.

2. Credentials and product setup

To ensure correct content syndication:

• The FlixMedia service team must issue the SDK credentials
• The correct distributorId must be provided by FlixMedia
• Other product and locale attributes should be confirmed with the FlixMedia team
• For onboarding and support, please connect via flixmedia.com

3. Render product content

Use the InpageHtmlView component and pass product-specific parameters through productParams.

4. Handle callbacks

You can optionally use:

• onError to capture rendering or SDK-related issues
• onLoadedHtml to inspect or react to the loaded HTML content

Example

import React, { useEffect } from 'react';
import { ScrollView } from 'react-native';
import { InpageHtmlView, initialize } from 'react-native-flix-inpage';

export default function ProductScreen() {
  useEffect(() => {
    const setup = async () => {
      try {
        await initialize('username', 'password');
      } catch (error) {
        console.warn('Failed to initialize FlixMedia SDK:', error);
      }
    };

    setup();
  }, []);

  return (
    <ScrollView>
      <InpageHtmlView
        productParams={{
          mpn: '123456',
          ean: '1234567890123',
          distributorId: 1000,
          isoCode: 'GB',
          flIsoCode: 'en-GB',
          brand: 'Example Brand',
          title: 'Example Product',
          price: '199.99',
          currency: 'GBP',
        }}
        baseUrl="https://www.example.com"
        style={{ backgroundColor: 'white' }}
        onError={(err) => console.warn('Inpage error:', err)}
        onLoadedHtml={(html) =>
          console.log('Inpage loaded, length:', html.length)
        }
      />
    </ScrollView>
  );
}

Props

InpageHtmlView

| Prop | Type | Required | Description | |------|------|----------|-------------| | productParams | object | Yes | Product metadata used to retrieve and render FlixMedia HTML | | baseUrl | string | Yes | Base retailer URL associated with the rendered content | | style | object | No | Optional styling for the view container | | onError | function | No | Callback triggered if an error occurs | | onLoadedHtml | function | No | Callback triggered when HTML content loads successfully |

productParams

| Field | Type | Required | Description | |------|------|----------|-------------| | mpn | string | No* | Manufacturer part number | | ean | string | No* | European Article Number | | distributorId | number | Yes | Distributor identifier issued/confirmed by FlixMedia | | isoCode | string | Yes | Country ISO code | | flIsoCode | string | No | Flix locale ISO code | | brand | string | No | Product brand | | title | string | No | Product title | | price | string | No | Product price | | currency | string | No | Currency code |

* Depending on your FlixMedia data setup, at least one product identifier such as mpn or ean may be required.

Expo Support

This library contains native iOS and Android code. For Expo projects, use a development build instead of Expo Go.

Typical setup:

npx expo prebuild
npx expo run:ios
npx expo run:android

If iOS dependencies need to be installed:

npx pod-install

Notes

• Ensure initialize() is called before attempting to render InpageHtmlView
• Use valid FlixMedia credentials issued by the FlixMedia service team
• Make sure the supplied productParams match the product data configured in FlixMedia
• Confirm distributor IDs and syndication attributes with FlixMedia before production integration
• Native rebuild may be required after installing or upgrading the package

Troubleshooting

SDK not rendering content

• Confirm initialize() has completed successfully
• Verify the username and password are correct
• Check that productParams contain valid identifiers and locale values
• Confirm the distributorId and product attributes were issued correctly by FlixMedia

iOS build issues

Run:

npx pod-install

Then rebuild the iOS app.

Expo Go does not work

This package includes native modules and requires an Expo development build or a bare/prebuilt workflow.

Support

For SDK credentials, distributor IDs, onboarding, and syndication-related configuration, please connect with the FlixMedia service team via flixmedia.com.

License

© FlixMedia. All rights reserved.