Skip to main content

TDefaultRendererProps

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

Props for ​TDefaultRenderer.

Type Parameters#

T#

The concrete type of ​TNode.

Fields#

TNodeChildrenRenderer#

required
TNodeChildrenRenderer: ComponentType<TNodeChildrenRendererProps>;

A component to render children of a tnode.

children#

optional
children?: ReactNode;

When children is present, renderChildren will not be invoked.

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.

propsForChildren#

optional
propsForChildren?: Partial<PropsFromParent>;

Props passed to children nodes. Those props are accessible from children renderers as propsFromParent

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.

style#

required
style: StyleProp<TextStyle> | StyleProp<ViewStyle>;

The style for this renderer will depend on the type of ​TNode. You can check if a node is textual with props.type === 'text'.

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]}.