Skip to content

Commit 66f7e12

Browse files
authored
Updated README.md with example for flatHeights
- modified the `measure()` example to fit for `flatHeights()`
1 parent 3083a68 commit 66f7e12

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,59 @@ The result is a Promise that resolves to an array with the height of each block
233233

234234
Unlike measure, `null` elements returns 0 without generating error, and empty strings returns the same height that RN assigns to empty `<Text>` components (the difference of the result between `null` and empty is intentional).
235235

236+
### Example
237+
238+
```jsx
239+
//...
240+
import rnTextSize, { TSFontSpecs } from 'react-native-text-size'
241+
242+
type Props = {}
243+
type State = { heights: number[] }
244+
245+
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
246+
const fontSpecs: TSFontSpecs = {
247+
fontFamily = undefined,
248+
fontSize = 24,
249+
fontStyle = 'italic',
250+
fontWeight = 'bold',
251+
}
252+
const texts = ['I ❤️ rnTextSize', 'I ❤️ rnTextSize using flatHeights', 'Thx for flatHeights']
253+
254+
class Test extends Component<Props, State> {
255+
state = {
256+
heights: [],
257+
}
258+
259+
async componentDidMount() {
260+
const width = Dimensions.get('window').width * 0.8
261+
const heights = await rnTextSize.flatHeights({
262+
text: texts, // array of texts to measure, can include symbols
263+
width, // max-width of the "virtual" container
264+
...fontSpecs, // RN font specification
265+
})
266+
this.setState({
267+
heights
268+
})
269+
}
270+
271+
render() {
272+
const { heights } = this.state
273+
274+
return (
275+
<View style={{ padding: 12 }}>
276+
{texts.map(
277+
(text, index) => (
278+
<Text style={{ height: heights[index], ...fontSpecs }}>
279+
{text}
280+
</Text>
281+
)
282+
)}
283+
</View>
284+
)
285+
}
286+
}
287+
```
288+
236289
## specsForTextStyles
237290

238291
```ts

0 commit comments

Comments
 (0)