Embedding with React Native

Overview

For React Native applications, we provide a dedicated package, @crediblemind/embeddable-react-native, which simplifies the process of embedding CredibleMind components. This package wraps the standard web-based embedding logic in a React Native WebView, providing a seamless integration experience.

This guide assumes you have a working React Native development environment.

Installation

First, add the package to your project using npm or yarn:


npm install @crediblemind/embeddable-react-native


yarn add @crediblemind/embeddable-react-native

Basic Usage

To embed a component, import CMEmbeddable and include it in your component. Here’s a basic example that renders the default homepage:


import React, { useRef } from 'react';
import CMEmbeddable from '@crediblemind/embeddable-react-native';
 
const MyComponent = () => {
  const embeddableRef = useRef(null);
 
  return (
    <CMEmbeddable
      ref={embeddableRef}
      clientIdentifier="{client identifier}"
      env="demo"
    />
  );
};
 
export default MyComponent;

Rendering a Specific Page

You can render a specific component by using the components prop. For example, to load the ‘topics’ browser:


import React, { useRef } from 'react';
import CMEmbeddable from '@crediblemind/embeddable-react-native';
 
const TopicsComponent = () => {
  const embeddableRef = useRef(null);
 
  return (
    <CMEmbeddable
      ref={embeddableRef}
      clientIdentifier="{client identifier}"
      env="demo"
      components="topics" // This will render the topics page
    />
  );
};
 
export default TopicsComponent;

The component allows for both built-in and custom navigation controls.

To use the built-in back and forward buttons, set the showNavigationButtons prop to true:


<CMEmbeddable
  clientIdentifier="{client identifier}"
  env="demo"
  components="topics"
  showNavigationButtons={true}
/>

For more control over the user experience, you can implement your own navigation buttons. This involves using a ref to call the goBack() and goForward() methods and tracking the navigation state.

Here is a complete example:


import React, { useRef, useState } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  SafeAreaView,
} from 'react-native';
import CMEmbeddable from '@crediblemind/embeddable-react-native';
 
const MyComponentWithNavigation = () => {
  const embeddableRef = useRef(null);
  const [canGoBack, setCanGoBack] = useState(false);
  const [canGoForward, setCanGoForward] = useState(false);
 
  const handleBackPress = () => {
    if (embeddableRef.current && canGoBack) {
      embeddableRef.current.goBack();
    }
  };
 
  const handleForwardPress = () => {
    if (embeddableRef.current && canGoForward) {
      embeddableRef.current.goForward();
    }
  };
 
  const handleNavigationStateChange = navState => {
    setCanGoBack(navState.canGoBack);
    setCanGoForward(navState.canGoForward);
  };
 
  return (
    <SafeAreaView style={styles.container}>
      <CMEmbeddable
        ref={embeddableRef}
        clientIdentifier="{client identifier}"
        env="demo"
        onNavigationStateChange={handleNavigationStateChange}
      />
      <View style={styles.navigationContainer}>
        <TouchableOpacity
          onPress={handleBackPress}
          style={[styles.navButton, !canGoBack && styles.disabledButton]}
          disabled={!canGoBack}
        >
          <Text style={styles.buttonText}>Back</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={handleForwardPress}
          style={[styles.navButton, !canGoForward && styles.disabledButton]}
          disabled={!canGoForward}
        >
          <Text style={styles.buttonText}>Forward</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  navigationContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    backgroundColor: '#f0f0f0',
  },
  navButton: {
    padding: 10,
    backgroundColor: '#007AFF',
    borderRadius: 5,
  },
  disabledButton: {
    backgroundColor: '#A0A0A0',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});
 
export default MyComponentWithNavigation;

Component Props

Prop	Type	Description
`clientIdentifier`	`string`	Required. Your client identifier.
`subBrand`	`string`	Optional. Client sub-brand identifier.
`env`	`string`	Environment to use (`'demo'` or `'production'`). Defaults to `'production'`.
`components`	`string`	Optional. The specific component to render (e.g., `'topics'`).
`onNavigationStateChange`	`function`	Optional. Callback that receives `{ canGoBack, canGoForward }` when navigation state changes.
`showNavigationButtons`	`boolean`	Optional. If `true`, displays built-in navigation buttons. Defaults to `false`.
`urlParams`	`string`	Optional. A query string for additional parameters (e.g., `'view=carousel&hideheader=true'`).

Methods

You can call these methods on the component ref:

goBack(): Navigate back if possible
goForward(): Navigate forward if possible
canGoBack(): Check if navigation back is possible
canGoForward(): Check if navigation forward is possible