Add example CustomAgentforceView and wire ViewProvider in HomeScreen (#48)

* Add example CustomAgentforceView component and wire into HomeScreen

- CustomAgentforceView: React Native component that renders in place of native SDK views
- Registered via AppRegistry in index.js for native RCTRootView/ReactRootView rendering
- HomeScreen checks enableCustomViewProvider flag and registers the delegate on mount
- Handles copilot/richText and copilot/markdown as an example

* fix: update example to use componentMap API

Use the new 1:1 componentMap format in registerViewProviderIfEnabled
instead of the old componentTypes + reactComponentName.

* feat: render nested objects/arrays as expandable key/value tables

Replace raw JSON dump with recursive ValueRenderer that breaks out
nested objects and arrays into structured tables up to 6 levels deep.
Deeper nesting progressively compacts padding and key widths to stay
usable on mobile screens.

* fix: await view provider registration before configure and update JSDoc

- Make registerViewProviderIfEnabled sequential with checkConfigurations
  to avoid a race where configure() runs before registration completes.
- Update CustomAgentforceView JSDoc to show current componentMap API.

* fix: add signpost comments to CustomAgentforceView for ViewProvider wiring

The file header now explains the 3-step wiring (AppRegistry, componentMap,
props) and a separator comment marks where the example rendering begins,
so the integration points aren't buried in the rendering machinery.

* refactor: simplify CustomAgentforceView to minimal JSON.stringify example

Move the complex recursive key/value table rendering to
ComplexAgentforceDataView.tsx. CustomAgentforceView is now a minimal
example (~90 lines) that shows the ViewProvider wiring clearly:
badge + definition + JSON.stringify(properties).

Author: asikora-sf

index.js

@@ -27,5 +27,9 @@
 import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 import App from './App';
+import CustomAgentforceView from './src/components/CustomAgentforceView';
 
 AppRegistry.registerComponent('ReactAgentforce', () => App);
+
+// Register the custom view provider component so native can render it via RCTRootView/ReactRootView
+AppRegistry.registerComponent('CustomAgentforceView', () => CustomAgentforceView);

src/components/ComplexAgentforceDataView.tsx

@@ -0,0 +1,319 @@
+/*
+ * Copyright (c) 2024-present, salesforce.com, inc. All rights reserved.
+ *
+ * A richer custom view provider component that renders nested objects and
+ * arrays as expandable key/value tables. Drop-in replacement for
+ * CustomAgentforceView when you need structured data display.
+ *
+ * Wire up the same way as CustomAgentforceView — see that file for the
+ * 3-step ViewProvider integration guide.
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import type { ViewProviderComponentData } from 'react-native-agentforce';
+
+interface ComplexAgentforceDataViewProps {
+  definition?: string;
+  name?: string;
+  properties?: Record<string, unknown>;
+  subComponents?: ViewProviderComponentData[];
+}
+
+/** Max nesting depth to prevent runaway recursion. */
+const MAX_DEPTH = 6;
+
+/** Check whether a value is a plain object (not an array). */
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+
+/** Format a leaf value as a string. */
+function formatLeaf(value: unknown): string {
+  if (value === null || value === undefined) return '—';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'boolean') return value ? 'true' : 'false';
+  return String(value);
+}
+
+/** Whether a value will render as a nested block (table or array). */
+function isNestedValue(v: unknown, depth: number): boolean {
+  if (depth >= MAX_DEPTH) return false;
+  if (isPlainObject(v)) return Object.keys(v).length > 0;
+  if (Array.isArray(v)) return v.length > 0;
+  return false;
+}
+
+/**
+ * Recursively renders a value. Plain objects become nested key/value tables,
+ * arrays render each element, and primitives render as text.
+ */
+const ValueRenderer: React.FC<{ value: unknown; depth: number }> = ({
+  value,
+  depth,
+}) => {
+  const compact = depth >= 3; // tighter padding at deeper levels
+
+  if (isPlainObject(value) && depth < MAX_DEPTH) {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return <Text style={styles.emptyText}>{'{ }'}</Text>;
+    return (
+      <View style={[styles.nestedTable, compact && styles.nestedTableCompact]}>
+        {entries.map(([k, v], i) => (
+          <PropertyRow key={k} label={k} value={v} depth={depth} isLast={i === entries.length - 1} />
+        ))}
+      </View>
+    );
+  }
+
+  if (Array.isArray(value) && depth < MAX_DEPTH) {
+    if (value.length === 0) return <Text style={styles.emptyText}>{'[ ]'}</Text>;
+    return (
+      <View style={[styles.nestedArray, compact && styles.nestedTableCompact]}>
+        {value.map((item, i) => {
+          const itemNested = isNestedValue(item, depth + 1);
+          return (
+            <View
+              key={i}
+              style={[
+                itemNested ? styles.arrayItemVertical : styles.arrayItem,
+                i < value.length - 1 && styles.arrayItemBorder,
+              ]}
+            >
+              <Text style={styles.arrayIndex}>{i}</Text>
+              <View style={itemNested ? undefined : styles.arrayValue}>
+                <ValueRenderer value={item} depth={depth + 1} />
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    );
+  }
+
+  // Leaf value (or max depth reached — fall back to JSON)
+  const text =
+    depth >= MAX_DEPTH && typeof value === 'object'
+      ? JSON.stringify(value)
+      : formatLeaf(value);
+
+  return (
+    <Text style={styles.rowValue} selectable>
+      {text}
+    </Text>
+  );
+};
+
+/**
+ * Renders a single key/value row, stacking vertically when the value is a
+ * nested object/array so it can use the full width.
+ */
+const PropertyRow: React.FC<{
+  label: string;
+  value: unknown;
+  depth: number;
+  isLast: boolean;
+}> = ({ label, value, depth, isLast }) => {
+  const nested = isNestedValue(value, depth + 1);
+  const compact = depth >= 2;
+
+  return (
+    <View
+      style={[
+        nested ? styles.rowVertical : styles.row,
+        compact && styles.rowCompact,
+        !isLast && styles.rowBorder,
+      ]}
+    >
+      <Text
+        style={[styles.rowKey, compact && styles.rowKeyCompact]}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+      <ValueRenderer value={value} depth={depth + 1} />
+    </View>
+  );
+};
+
+const ComplexAgentforceDataView: React.FC<ComplexAgentforceDataViewProps> = ({
+  definition = 'unknown',
+  properties = {},
+}) => {
+  const entries = Object.entries(properties);
+
+  // If the only meaningful property is a single text-like value, show it inline
+  const textKeys = ['text', 'value', 'content', 'label'];
+  const singleText =
+    entries.length === 1 &&
+    textKeys.includes(entries[0][0]) &&
+    typeof entries[0][1] === 'string'
+      ? (entries[0][1] as string)
+      : null;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.badge}>
+          <Text style={styles.badgeText}>Custom RN View</Text>
+        </View>
+        <Text style={styles.definitionText}>{definition}</Text>
+      </View>
+
+      {singleText ? (
+        <Text style={styles.contentText} selectable>
+          {singleText}
+        </Text>
+      ) : entries.length > 0 ? (
+        <ScrollView style={styles.contentScroll} nestedScrollEnabled>
+          <View style={styles.table}>
+            {entries.map(([key, val], idx) => (
+              <PropertyRow
+                key={key}
+                label={key}
+                value={val}
+                depth={0}
+                isLast={idx === entries.length - 1}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      ) : (
+        <Text style={styles.emptyText}>No properties</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f0f4ff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#4a90d9',
+    padding: 12,
+    margin: 4,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+    gap: 8,
+  },
+  badge: {
+    backgroundColor: '#4a90d9',
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+  },
+  badgeText: {
+    color: '#ffffff',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  definitionText: {
+    fontSize: 11,
+    color: '#6c757d',
+    fontFamily: 'monospace',
+  },
+  contentScroll: {
+    maxHeight: 400,
+  },
+  table: {
+    backgroundColor: '#ffffff',
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: '#d0d7e2',
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+  },
+  rowVertical: {
+    flexDirection: 'column',
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    gap: 4,
+  },
+  rowCompact: {
+    paddingVertical: 5,
+    paddingHorizontal: 8,
+  },
+  rowBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#d0d7e2',
+  },
+  rowKey: {
+    width: 100,
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#4a5568',
+    marginRight: 8,
+  },
+  rowKeyCompact: {
+    width: 80,
+    fontSize: 11,
+  },
+  rowValue: {
+    flex: 1,
+    fontSize: 13,
+    color: '#212529',
+    lineHeight: 18,
+  },
+  nestedTable: {
+    backgroundColor: '#f8f9fb',
+    borderRadius: 4,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#d0d7e2',
+    overflow: 'hidden',
+  },
+  nestedTableCompact: {
+    borderRadius: 3,
+  },
+  nestedArray: {
+    backgroundColor: '#f8f9fb',
+    borderRadius: 4,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#d0d7e2',
+    overflow: 'hidden',
+  },
+  arrayItem: {
+    flexDirection: 'row',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  arrayItemVertical: {
+    flexDirection: 'column',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  arrayItemBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#d0d7e2',
+  },
+  arrayIndex: {
+    width: 24,
+    fontSize: 11,
+    fontWeight: '600',
+    color: '#9ca3af',
+    marginRight: 4,
+  },
+  arrayValue: {
+    flex: 1,
+  },
+  contentText: {
+    fontSize: 14,
+    color: '#212529',
+    lineHeight: 20,
+  },
+  emptyText: {
+    fontSize: 12,
+    color: '#9ca3af',
+    fontStyle: 'italic',
+  },
+});
+
+export default ComplexAgentforceDataView;