@crediblemind/embeddable-react-native

A customizable WebView wrapper for React Native applications, part of the CredibleMind Embeddable suite.

Installation

npm install @crediblemind/embeddable-react-native

or

yarn add @crediblemind/embeddable-react-native

Usage

Basic Usage (Home Page)

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"
      showNavigationButtons={false}
    />
  );
};

export default MyComponent;

Rendering a Specific Page with Built-In Navigation

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
      showNavigationButtons={true}
    />
  );
};

export default TopicsComponent;

Complete Example with Custom Back and Forward Buttons

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}
        showNavigationButtons={false}
      />
      <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;

This example demonstrates:

• How to use the CMEmbeddable component
• How to implement custom back and forward navigation buttons
• How to use the onNavigationStateChange callback to update the parent component's state
• How to use the ref to call goBack() and goForward() methods

Props

• clientIdentifier (string): Client identifier (default: 'benovo')
• subBrand (string, optional): Client sub-brand identifier when applicable
• env (string): Environment, determines which URL to load. Options are 'demo' or 'production' (default: 'production')
• components (string, optional): Specific page to render. If not provided, renders the home page. Example: "topics" to render the topics page.
• onNavigationStateChange (function): Callback for navigation state changes, receives an object with canGoBack and canGoForward properties
• showNavigationButtons (boolean): Show built-in navigation buttons (default: false)
• urlParams (string, optional): URL parameters to customize the loaded page. Example: "view=carousel&hideheader=true"

Methods

The component exposes the following methods via 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

License

MIT