@crediblemind/embeddable-react-native NPM

@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

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')
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"