diff --git a/packages/react-native-li/src/MarkedListItem.tsx b/packages/react-native-li/src/MarkedListItem.tsx index 93a6bf6..4b63c00 100644 --- a/packages/react-native-li/src/MarkedListItem.tsx +++ b/packages/react-native-li/src/MarkedListItem.tsx @@ -12,7 +12,8 @@ export type MarkedListItemProps = Required< MarkedListProps, | 'counterRenderer' | 'renderMarker' - | 'markerStyle' + | 'markerTextStyle' + | 'markerBoxStyle' | 'rtlLineReversed' | 'startIndex' > @@ -36,7 +37,8 @@ export default function MarkedListItem({ index, startIndex, rtlLineReversed, - markerStyle, + markerTextStyle, + markerBoxStyle, maxNumOfCodepoints, style, renderMarker, @@ -51,7 +53,9 @@ export default function MarkedListItem({ {renderMarker({ markerString, maxNumOfCodepoints, - style: markerStyle + style: markerBoxStyle, + markerTextStyle, + markerTextWidth })} {children} diff --git a/packages/react-native-li/src/MarkerBox.tsx b/packages/react-native-li/src/MarkerBox.tsx index f3660e1..d349ae7 100644 --- a/packages/react-native-li/src/MarkerBox.tsx +++ b/packages/react-native-li/src/MarkerBox.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from 'react-native'; +import { Text, View } from 'react-native'; import { MarkerBoxProps } from './shared-types'; /** @@ -9,10 +9,20 @@ import { MarkerBoxProps } from './shared-types'; * * @public */ -export default function MarkerBox({ style, markerString }: MarkerBoxProps) { +export default function MarkerBox({ + style, + counterRenderer, + counterIndex, + markerTextStyle, + markerTextWidth +}: MarkerBoxProps) { return ( - - {markerString} - + + + {counterRenderer.renderMarker(counterIndex)} + + ); } diff --git a/packages/react-native-li/src/shared-types.ts b/packages/react-native-li/src/shared-types.ts index 3f3900c..2b93b76 100644 --- a/packages/react-native-li/src/shared-types.ts +++ b/packages/react-native-li/src/shared-types.ts @@ -61,9 +61,20 @@ export interface MarkedListProps { */ lineStyle?: StyleProp; /** - * A plain-object text style for the marker. + * A plain JavaScript object text style for the marker string. It is + * advised to pass the same `fontSize` and `lineHeight` as the list content + * for perfect horizontal alignment. + * + * @remarks It should not contain CSS box model properties and it should be a + * plain JavaScript object. **Do not** use StyleSheet or array styles. + */ + markerTextStyle?: TextStyle; + /** + * Style for the marker box container. It is discouraged to set + * `(min,max)width` that way. Use + * {@link MarkedListProps.computeMarkerBoxWidth} instead. */ - markerStyle?: TextStyle; + markerBoxStyle?: StyleProp; /** * A function to compute marker box width depending on the maximum length of * the marker string in range. diff --git a/packages/react-native-li/src/useMarkedList.ts b/packages/react-native-li/src/useMarkedList.ts index da8da76..6a07128 100644 --- a/packages/react-native-li/src/useMarkedList.ts +++ b/packages/react-native-li/src/useMarkedList.ts @@ -12,6 +12,8 @@ const defaultComputeMarkerBoxWidth: NonNullable< MarkedListProps['computeMarkerBoxWidth'] > = (maxNumOfCodepoints, fontSize) => maxNumOfCodepoints * fontSize * 0.6; +const DEFAULT_FONT_SIZE = 14; + /** * A hook to reuse MarkedList logic to render custom lists components in * combination with {@link MarkedListItem}. @@ -24,7 +26,8 @@ export default function useMarkedList({ lineStyle, rtlLineReversed = false, rtlMarkerReversed = false, - markerStyle, + markerTextStyle, + markerBoxStyle, length = 0, renderMarker = defaultRenderMarker, computeMarkerBoxWidth = defaultComputeMarkerBoxWidth @@ -35,10 +38,13 @@ export default function useMarkedList({ [counterRenderer, length, startIndex] ); const syntheticRtlLineReversed = !I18nManager.isRTL && rtlLineReversed; - const markerWidth = useMemo( + const markerTextWidth = useMemo( () => - computeMarkerBoxWidth(maxNumOfCodepoints, markerStyle?.fontSize ?? 14), - [computeMarkerBoxWidth, markerStyle?.fontSize, maxNumOfCodepoints] + computeMarkerBoxWidth( + maxNumOfCodepoints, + markerTextStyle?.fontSize ?? DEFAULT_FONT_SIZE + ), + [computeMarkerBoxWidth, markerTextStyle?.fontSize, maxNumOfCodepoints] ); const renderer = useMemo( () => @@ -49,18 +55,23 @@ export default function useMarkedList({ : counterRenderer, [counterRenderer, rtlMarkerReversed] ); - const syntheticMarkerStyle = { - flexGrow: 0, - flexShrink: 0, - width: markerWidth, - fontSize: 14, - textAlign: syntheticRtlLineReversed ? 'left' : 'right', - ...markerStyle - } as const; + const syntheticMarkerTextStyle = useMemo( + () => + ({ + flexGrow: 0, + flexShrink: 0, + fontSize: DEFAULT_FONT_SIZE, + textAlign: syntheticRtlLineReversed ? 'left' : 'right', + ...markerTextStyle + } as const), + [markerTextStyle, syntheticRtlLineReversed] + ); return { maxNumOfCodepoints, rtlLineReversed: syntheticRtlLineReversed, - markerStyle: syntheticMarkerStyle, + markerTextStyle: syntheticMarkerTextStyle, + markerTextWidth, + markerBoxStyle: markerBoxStyle as any, renderMarker, counterRenderer: renderer, startIndex,