Skip to main content

ListElementConfig

export
interface ListElementConfig {
  enableDynamicMarkerBoxWidth?: boolean;
  enableExperimentalRtl?: boolean;
  enableRemoveBottomMarginIfNested?: boolean;
  enableRemoveTopMarginIfNested?: boolean;
  getFallbackListStyleTypeFromNestLevel?: (nestLevel: number) => DefaultSupportedListStyleType;
  markerBoxStyle?: StyleProp<ViewStyle>;
  markerTextStyle?: TextStyle;
}
Defined in packages/render-html/src/shared-types.ts

Configuration for ol and ul.

Fields#

enableDynamicMarkerBoxWidth#

optional
enableDynamicMarkerBoxWidth?: boolean;

When true, the width of the marker box will be adapted depending on fontSize and the highest number of characters in the printed range.

If this length is superior than the left (or right in ltr mode) padding, a supplemental space will be added before every list child.

When false, the left (or right in ltr mode) padding will be invariable.

Default: false

enableExperimentalRtl#

optional
enableExperimentalRtl?: boolean;

If true and the direction is set to 'rtl' (either via dir attribute or direction CSS property):

  • lists markers will be flushed to the right when I18nManager.isRtl is false.
  • list markers prefixes and suffixes print order will be reversed.

Default: false

Remarks

Beware that left and right padding of li elements will not be switched.

enableRemoveBottomMarginIfNested#

optional
enableRemoveBottomMarginIfNested?: boolean;

Remove bottom margin if this element parent is an li element and it is its last child.

Default: true

enableRemoveTopMarginIfNested#

optional
enableRemoveTopMarginIfNested?: boolean;

Remove top margin if this element parent is an li element and it is its first child.

Default: true

getFallbackListStyleTypeFromNestLevel#

optional
getFallbackListStyleTypeFromNestLevel?: (nestLevel: number) => DefaultSupportedListStyleType;

Get default list-style-type given the number of nest level for this list.

Remarks

This function will not be used when a list element has its own list-style-type CSS property, or has inherited this property from parents.

markerBoxStyle#

optional
markerBoxStyle?: StyleProp<ViewStyle>;

Customize the marker box appearance (the View containing the marker, e.g. the symbol prefixing list elements).

Remarks

This is useful to set some right padding or a different background for example.

warning

Do not:

  • Use margin (since the width will match the <ol> / <ul> padding left)
  • Set width constraints (since the width will match the <ol> / <ul> padding left)

markerTextStyle#

optional
markerTextStyle?: TextStyle;

Customize the marker text appearance (the Text component in which the marker, e.g. the symbol prefixing list elements).

Remarks

Useful to set the color, fontFamily, fontSize of the marker. Avoid using padding here, take advantage of markerBoxStyle instead.

warning

This style must be a style object! Arrays, and Stylesheet styles will not work.