Embed using React Native mobile SDK

npm install @thoughtspot/react-native-embed-sdk

 // NPM
 import { LiveboardEmbed, AuthType, init } from '@thoughtspot/react-native-embed-sdk';

init({
  thoughtSpotHost: 'ts-host-url',  // Replace with your ThoughtSpot host URL
  authType: AuthType.TrustedAuthTokenCookieless,
  getAuthToken: async () => "full-auth-token"
});

const TsApp = () => {
  return (
    <View style={styles.container}>
    <LiveboardEmbed
        liveboardId="liveboard-id" // Replace it with your Liveboard ID
    />
    </View>
  );
};

//Add the menu actions to show in the embed view. Removes all actions if the array is empty
visibleActions: [Action.AddFilter,Action.Share,Action.DrillDown,Action.AxisMenuFilter,Action.AxisMenuTimeBucket],
//disable actions
disabledActions: [Action.DrillDown, Action.Edit],
//specify the reason for disabling menu actions
disabledActionReason: "Contact your administrator to enable this feature",
//hiddenActions: [], /* Do not use if `visibleActions` is enabled */

//hide specific actions
hiddenActions: [Action.AddFilters],
//disable actions
disabledActions: [Action.DrillDown],
//specify the reason for disabling menu action
disabledActionReason: "Contact your administrator to enable this feature",
//visibleActions: [], /* Do not use if `hiddenActions` is enabled */

// Define a component that embeds a Liveboard and handles initial authentication state
const LiveboardEmbedView = () => {
  // Declare a loading state to control the loading UI
  const [loading, setLoading] = useState(true);

  // Create a ref to interact with the LiveboardEmbed component programmatically
  const webViewRef = useRef<any>(null);

  // Function to handle the AuthInit event from the LiveboardEmbed
  const handleAuthInit = () => {
    alert("Auth Init EmbedEvent"); // Show a simple alert when auth is initialized
    setLoading(false);  // Set loading to false once authentication is complete
  }

  return (
    <>
      {loading && <Text>Loading...</Text>}
      <LiveboardEmbed
        ref={webViewRef}
        liveboardId={liveboardId} // Pass the Liveboard ID
        onAuthInit={() => {handleAuthInit()}} // Callback when the AuthInit event is fired by the embed
      />
    </>
  );
};

// Define a component for embedding and interacting with a Liveboard
const LiveboardEmbedView = () => {
  // Create a reference to the LiveboardEmbed instance
  const webViewRef = useRef<any>(null);

  // Function to reload the embedded Liveboard
  const reloadView = () => {
    Alert.alert("Reloading") // Show an alert to inform the user
    if(webViewRef?.current) {
      // Trigger the Reload event on the Liveboard
      webViewRef?.current?.trigger(HostEvent.Reload)
    }
  }

  // Function to open the Share dialog for the Liveboard
  const shareView = () => {
    if(webViewRef?.current) {
      // Trigger the Share event on the Liveboard
      webViewRef.current.trigger(HostEvent.Share)
    }
  }

  // Render buttons for "Reload" and "Share", and the LiveboardEmbed component
  return (
    <>
      <View>
        <TouchableOpacity onPress={reloadView}>
          <Text>Reload</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={shareView}>
          <Text>Share</Text>
        </TouchableOpacity>
      </View>
      <LiveboardEmbed
        ref={webViewRef}  // Assign the ref to control this component
        liveboardId={liveboardId} // Pass the Liveboard ID
      />
    </>
  );
};

init({
    // Other attributes such as the host URL, authentication type and so on.
    customizations: {
        content: {
            strings: {
                // Custom label for the Filter menu action
                "Filter": "Select column",
            }
        },
        style: {
            customCSS: {
                variables: {
                    // Background color of the application
                    "--ts-var-root-background": "#fef4dd",
                    // Text color
                    "--ts-var-root-color": "#4a4a4a",
                    // Visualization title color
                    "--ts-var-viz-title-color": "#8e6b23",
                    // Font family for visualization title
                    "--ts-var-viz-title-font-family": "'Roboto', 'Helvetica', sans-serif",
                    // Title text capitalization
                    "--ts-var-viz-title-text-transform": "capitalize",
                    // Visualization description text color
                    "--ts-var-viz-description-color": "#6b705c",
                    // Font family for description text
                    "--ts-var-viz-description-font-family": "'Roboto', 'Helvetica', sans-serif",
                }
            }
        }
    }
});