/react-native-lists

OrderedList and UnorderedList components for web-like functionality

Primary LanguageJavaScript

react-native-lists

Web-like <UnorderedList>, <OrderedList>, and <ListItem> components for React Native.

Basic Usage

Unordered List

Example of an <UnorderedList>
<UnorderedList>
  <ListItem>Step one</ListItem>
  <ListItem>Step two</ListItem>
  <UnorderedList>
    <ListItem>Step one</ListItem>
    <ListItem>Step two</ListItem>
    <UnorderedList>
      <ListItem>Step one</ListItem>
      <ListItem>Step two</ListItem>
    </UnorderedList>
  </UnorderedList>
</UnorderedList>

Ordered List

Example of an <OrderedList>
<OrderedList>
  <ListItem>Step one</ListItem>
  <ListItem>Step two</ListItem>
  <OrderedList>
    <ListItem>Step one</ListItem>
    <ListItem>Step two</ListItem>
    <OrderedList>
      <ListItem>Step one</ListItem>
      <ListItem>Step two</ListItem>
      <ListItem>Step three</ListItem>
      <ListItem>Step four</ListItem>
    </OrderedList>
  </OrderedList>
</OrderedList>

Props

UnorderedList

Prop Type Default Description
depth number auto Used for getSymbol function.
getSymbol func Function called to get symbol.
Signature:
function(depth) => string
itemWrapperStyle object | array Passed to all children if not defined for child. See ListItem.
symbol string Define custom symbol string. Passed to all ListItem children if not defined by child. See ListItem.
symbolStyle object | array Passed to all children if not defined for child. See ListItem.

OrderedList

Prop Type Default Description
depth number auto Used for getSymbol function.
getSymbol func Function called to get symbol.
Signature:
function(count, depth) => string
itemWrapperStyle object | array Passed to all children if not defined for child. See ListItem.
reversed bool false Reverses count order for children.
start string | number Define custom start count.
symbolStyle object | array Passed to all children if not defined for child. See ListItem.

ListItem

Prop Type Default Description
itemWrapperStyle object | array Styles for <View> that wraps children.
symbol string Define custom symbol string.
symbolCharCount number symbol.length Define custom symbol character count used for width of the <Text> wrapping symbol.
symbolStyle object | array Styles passed to <Text> wrapping symbol.

Style Strategy

This project experiments with a few controversial styling strategies.

Inheritance

The goal is to achieve web-like style inheritance, where a parent's styles pass to a child unless overwritten by a child.

  • <UnorderedList and <OrderedList> pass style prop to outer <View>.
  • <UnorderedList and <OrderedList> pass style prop to all children.
  • <ListItem> groups layoutStyle, textStyle, viewStyle according to React Native docs:
  • <ListItem> passes layoutStyle and viewStyle to outer <View>.
  • <ListItem> passes textStyle to <Text> wrapping symbol.
  • <ListItem> passes textStyle to <Text> wrapping children if typeof children === 'string'.

Dynamic Symbol Width

Tries to establish a symbol width for all sibling <ListItem> to account for varying symbol.length values. If parts of your symbol string are breaking onto a new line:

  1. Temporary Fix: Pass symbolStyle to parent <UnorderedList> or <OrderedList>, or to all <ListItem>, specifying a width value that prevents the line break.
  2. Open an issue to let me know.

Example

Example of style inheritance.
<UnorderedList style={{ color: 'red', fontSize: 20 }}>
  <ListItem>Step one</ListItem>
  <ListItem>Step two</ListItem>
  <UnorderedList>
    <ListItem>Step one</ListItem>
    <ListItem>Step two</ListItem>
    <UnorderedList style={{ color: 'blue', fontSize: 12 }}>
      <ListItem style={{ color: 'green', fontSize: 20 }}>Step one</ListItem>
      <ListItem>Step two</ListItem>
    </UnorderedList>
  </UnorderedList>
</UnorderedList>

Known Issues

Roman Numeral Justification

In HTML (and most word processors), the Roman numerals used in Ordered Lists are right-justified. I believe this is because Roman numeral strings expand into multiple characters very quickly, and so these extra characters can extend to the left rather than to the right so as to avoid requiring dynamic width calculations like this project uses.

Similar Projects