Skip to main content

CustomRendererProps

export
interface CustomRendererProps<
  T extends TNode
> {
  InternalRenderer: InternalRenderer<T>;
  TDefaultRenderer: TDefaultRenderer<T>;
  TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;
  nativeProps?: Omit<ReactNativeProps, "style">
    & {
      onPress?: () => void;
    }
    & {
      style?: StyleProp<ViewStyle>;
    };
  onPress?: (e: GestureResponderEvent) => void;
  propsFromParent?: PropsFromParent;
  renderIndex: number;
  renderLength: number;
  sharedProps: RenderHTMLAmbiantSharedProps;
  style: NativeTextStyles | NativeBlockStyles;
  textProps: TextProps;
  tnode: T;
  type: "text" | "block";
  viewProps: ViewProps;
}
Defined in packages/render-html/src/shared-types.ts

Props for custom renderers, such as provided in the renderers prop.

Type Parameters#

T#

The concrete type of ​TNode.

Fields#

InternalRenderer#

required
InternalRenderer: InternalRenderer<T>;

Internal renderer for this tagName, not to be confused with ​TDefaultRenderer, which is the fallback renderer for any ​TNode.

Remarks

For example, when rendering img tags, TDefaultRenderer and InternalRenderer won't be equal.

When there is no internal renderer for this tag, this prop will fallback to TDefaultRenderer.

TDefaultRenderer#

required
TDefaultRenderer: TDefaultRenderer<T>;

Default renderer for this ​TNode.

TNodeChildrenRenderer#

required
TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;

A component to render children of a tnode.

nativeProps#

optional
nativeProps?: Omit<ReactNativeProps, "style">
  & {
    onPress?: () => void;
  }
  & {
    style?: StyleProp<ViewStyle>;
  };

Props passed to the underlying React Native element, either Text or View. See also ​textProps and ​viewProps.

Remarks

The prop.style property will have a greater specificity than computed styles for this ​TNode. E.g. style={[computedStyle, nativeProps.style, viewProps.style]}.

onPress#

optional
onPress?: (e: GestureResponderEvent) => void;

Any default renderer should be able to handle press.

propsFromParent#

optional
propsFromParent?: PropsFromParent;

Props passed by direct parents.

renderIndex#

required
renderIndex: number;

The position of this React element relative to the parent React element, starting at 0.

Remarks

Not to be confused with ​index, which is the position of the TNode before hoisting. The latter is much closer to an intuitive understanding of the position of a DOM node in the DOM tree.

renderLength#

required
renderLength: number;

The total number of elements children of this React element parent.

sharedProps#

required
sharedProps: RenderHTMLAmbiantSharedProps;

Props shared across the whole render tree.

style#

required
style: NativeTextStyles | NativeBlockStyles;

Styles extracted with ​getNativeStyles.

textProps#

required
textProps: TextProps;

Props passed to the underlying Text element (type must be 'text'). See also ​nativeProps and ​viewProps.

Remarks

The textProps.style property will have a greater specificity than computed styles for this ​TNode. E.g. style={[computedStyle, nativeProps.style, textProps.style]}.

tnode#

required
tnode: T;

The ​TNode to render.

type#

required
type: "text" | "block";

Is the underlying component Text or View?

viewProps#

required
viewProps: ViewProps;

Props passed to the underlying View element (type must be 'view'). See also ​nativeProps and ​textProps.

Remarks

The viewProps.style property will have a greater specificity than computed styles for this ​TNode. E.g. style={[computedStyle, nativeProps.style, viewProps.style]}.