Custom screens

import { FlowPilot } from '@flowpilotjs/react-native-sdk';
import { MyNativeScreen } from './MyNativeScreen';

FlowPilot.registerCustomScreen('native_paywall_screen', {
  inputs: {
    plan: 'string',
    is_trial: 'boolean',
  },
  outputs: {
    purchased: { description: 'User purchased', payload: { product_id: 'string' } },
    skipped: { description: 'User skipped' },
  },
  component: ({ props, context }) => {
    const plan = (props.inputs.plan as string) ?? 'monthly';
    return (
      <MyNativeScreen
        plan={plan}
        onPurchased={(id) => context.emit('purchased', { product_id: id })}
        onSkip={() => context.emit('skipped')}
      />
    );
  },
});

interface CustomScreenRenderProps {
  props: {
    inputs: Record<string, VariableValue>;
  };
  context: {
    // Inherited from the custom-component context
    containerSize: { width: number; height: number };
    containerConstraints: { /* min/max width/height, supportsIntrinsicSize */ };
    emit(eventName: string, payload?: Record<string, unknown>): void;

    // Screen-specific
    screenId: string;
    setZonesVisible(visible: boolean): void; // show/hide persistent nav bar, footer, overlay
  };
}

FlowPilot.registerCustomComponent('full_screen_paywall', {
  inputs: { plan: 'string' },
  outputs: { purchased: { payload: { product_id: 'string' } }, skipped: {} },
  component: ({ props, context }) => (
    <MyNativeScreen
      plan={(props.inputs.plan as string) ?? 'monthly'}
      onPurchased={(id) => context.emit('purchased', { product_id: id })}
      onSkip={() => context.emit('skipped')}
    />
  ),
});