react-native-text-size icon indicating copy to clipboard operation
react-native-text-size copied to clipboard

Add numberOfLines, lineHeight options; create flatSizes; increase accuracy

Open hsource opened this issue 2 years ago • 0 comments

Motivation

We have some Text components that

  • Use the numberOfLines prop to limit lines
  • Use the lineHeight style to change from the default line height
  • Have variable width

We want to measure their height using flatHeights.

This also increases accuracy for both iOS and Android by fixing tiny discrepancies.

Fix

  • Add handling for both Android and iOS for new FontSpecs called numberOfLines and flatHeights. This matches the <Text numberOfLines={...}> prop
  • Add new flatSizes function that behaves the same as flatHeights, but returns both the width and height. We use arrays (instead of objects with width and height) to reduce the amount key data passed over the React Native bridge

Testing

Created Storybook story in our app to test it on both Android and iOS:

iOS Android
image image

hsource avatar Mar 30 '22 09:03 hsource