hooks-and-customization.md

Hooks & Customization

Hooks

import {
  useAgentKit,         // Full context access
  useAgentKitElement,  // Manually register an element
  useAgentKitRescan,   // Trigger a re-scan
  useAgentKitStatus,   // Monitor bridge status
} from 'react-native-agentkit';

Manual Element Registration

For custom components that aren't auto-discovered:

function CustomButton({ onPress, label }) {
  const ref = useRef(null);

  useAgentKitElement(
    'my-btn',
    {
      type: 'button',
      label,
      state: { disabled: false, selected: false },
      position: { x: 0, y: 0, width: 0, height: 0 },
      children: [],
      actions: ['tap'],
    },
    ref,
    { onPress }
  );

  return (
    <Pressable ref={ref} onPress={onPress}>
      <Text>{label}</Text>
    </Pressable>
  );
}

Element Discovery

Elements are discovered via:

1. testID prop — Always included, highest priority
2. Accessibility props — accessibilityLabel, accessibilityRole
3. Interactive handlers — onPress, onChangeText, onValueChange
4. Component type — Pressable, TextInput, Switch, ScrollView, etc.

💡 Tip: Use testID on key elements for reliable AI agent targeting.

Props

Prop	Type	Default	Description
port	number	8347	Server port
debug	boolean	false	Enable debug logging
scanInterval	number	1000	Element scan interval (ms)
includeNonInteractive	boolean	false	Include non-interactive elements
includeScreenState	boolean	true	Include screen state in responses
enabled	boolean	true	Enable/disable the bridge
relayUrl	string	—	Cloud relay WebSocket URL for production
channelId	string	"default"	Channel ID for relay pairing
channelSecret	string	—	Shared secret for relay authentication