React Native Auto Size Text

React Native component for Android and iOS that provides several ways to resize text within a certain dimension/parent.

Port of auto_size_text

Table of Contents

• Installation
• Usage
• Example
• Props
• Contributing

Installation

yarn

1yarn react-native-auto-size-text

npm

1npm i react-native-auto-size-text

Usage

Import react-native-auto-size-text and ResizeTextMode

1import { AutoSizeText, ResizeTextMode } from 'react-native-auto-size-text';

Choose one of the modes below:

MaxLines

Required props: fontSize, numberOfLines and mode.

1<AutoSizeText
2	fontSize={32}
3	numberOfLines={2}
4	mode={ResizeTextMode.max_lines}>
5	This string will be automatically resized to fit on two lines.
6</AutoSizeText>

MinFontSize

Required props: minFontSize, numberOfLines and mode.

1<AutoSizeText
2	numberOfLines={3}
3	minFontSize={21}
4	mode={ResizeTextMode.min_font_size}>
5	This string's size will not be smaller than 21. It will be automatically 
6	resized to fit on 3 lines.
7</AutoSizeText>

Group

Required props: mode.

1<AutoSizeText
2	mode={ResizeTextMode.group}>
3	This mode will fit the available space and sync their text size
4</AutoSizeText>

StepGranularity

Required props: fontSize, numberOfLines, granularity and mode.

1<AutoSizeText
2	fontSize={48}
3	numberOfLines={4}
4	granularity={10}
5	mode={ResizeTextMode.step_granularity}>
6	This String changes its size with a stepGranularity of 10. It will be automatically 
7	resized to fit on 4 lines.
8</AutoSizeText>

PresetFontSizes

Required props: fontSizePresets, numberOfLines and mode.

1<AutoSizeText
2	fontSizePresets={[64,  42,  24]}
3	numberOfLines={4}
4	mode={ResizeTextMode.preset_font_sizes}>
5	This String has only three allowed sizes: 64, 42 and 24. 
6	It will be automatically resized to fit on 4 lines. 
7	With this setting, you have most control
8</AutoSizeText>

OverflowReplacement

Required props: fontSize, numberOfLines, overFlowReplacement and mode.

1<AutoSizeText
2	fontSize={32}
3	numberOfLines={3}
4	overFlowReplacement={'Text overflowing'}
5	mode={ResizeTextMode.overflow_replacement}>
6	This String's size will not be smaller than 32. 
7	It will be automatically resized to fit on 3 lines. 
8	Otherwise it will be replaced by a replacement string. Here's an example.
9</AutoSizeText>

Props

name	description	type	default
fontSize	Font size	number	14
numberOfLines	Number of lines before rescaling	number	none
mode	Resize text mode	ResizeTextMode	ResizeTextMode.max_lines
minFontSize	Minimum font size	number	none
granularity	Text resize granularity	number	none
fontSizePresets	Font size presets	number[]	none
Overflowreplacement	Replacement if the text overflows parent	string	''
style	Text style		function: () => {}
TextProps	All other <Text/> props		function: () => {}

Example with all modes

1import React, {useState} from 'react';
2import {ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
3import {AutoSizeText, ResizeTextMode} from 'react-native-auto-size-text';
4
5const App = () => {
6  const [text, setText] = useState<string>('');
7
8  return (
9    <ScrollView
10      style={styles.scrollViewContainer}
11      contentContainerStyle={styles.container}>
12      <TextInput
13        style={styles.input}
14        onChangeText={e => setText(e)}
15        value={text}
16      />
17
18      <Text>MaxLines</Text>
19
20      <View style={styles.textWrapper}>
21        <AutoSizeText
22          fontSize={64}
23          numberOfLines={2}
24          mode={ResizeTextMode.max_lines}>
25          {text}
26        </AutoSizeText>
27      </View>
28
29      <Text>MinFontSize</Text>
30      <View style={styles.textWrapper}>
31        <AutoSizeText
32          numberOfLines={3}
33          minFontSize={18}
34          mode={ResizeTextMode.min_font_size}>
35          {text}
36        </AutoSizeText>
37      </View>
38
39      <Text>PresetFontSizes</Text>
40      <View style={styles.textWrapper}>
41        <AutoSizeText
42          fontSizePresets={[50, 30, 10]}
43          numberOfLines={3}
44          mode={ResizeTextMode.preset_font_sizes}>
45          {text}
46        </AutoSizeText>
47      </View>
48
49      <Text>OverflowReplacement</Text>
50      <View style={styles.textWrapper}>
51        <AutoSizeText
52          fontSize={12}
53          numberOfLines={1}
54          mode={ResizeTextMode.overflow_replacement}
55          overFlowReplacement={'Text overflowing'}>
56          {text}
57        </AutoSizeText>
58      </View>
59
60      <Text>Group</Text>
61
62      <View style={styles.textWrapper}>
63        <AutoSizeText mode={ResizeTextMode.group} fontSize={2048}>
64          {text}
65        </AutoSizeText>
66      </View>
67
68      <Text>StepGranularity</Text>
69      <View style={styles.textWrapper}>
70        <AutoSizeText
71          mode={ResizeTextMode.step_granularity}
72          fontSize={64}
73          numberOfLines={2}
74          granularity={10}>
75          {text}
76        </AutoSizeText>
77      </View>
78    </ScrollView>
79  );
80};
81
82const styles = StyleSheet.create({
83  container: {
84    justifyContent: 'center',
85    alignItems: 'center',
86  },
87  textWrapper: {
88    borderColor: '#bcbcbc',
89    borderRadius: 10,
90    width: '80%',
91    margin: 16,
92    height: 200,
93    borderWidth: 2,
94  },
95
96  scrollViewContainer: {
97    flex: 1,
98  },
99  input: {
100    height: 80,
101    width: '100%',
102    margin: 12,
103    borderWidth: 1,
104  },
105});
106
107export default App;
108

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request