Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-native-auto-size-text

Package Overview
Dependencies
1
Maintainers
1
Versions
19
Issues
File Explorer

Advanced tools

react-native-auto-size-text

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

    1.1.1latest
    npm

Version published
Maintainers
1
Weekly downloads
560
decreased by-28.75%

Weekly downloads

Readme

Source

react-native-elements

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

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

Usage

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

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

Choose one of the modes below:

MaxLines


Required props: fontSize, numberOfLines and mode.

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

MinFontSize


Required props: minFontSize, numberOfLines and mode.

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

Group


Required props: mode.

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

StepGranularity


Required props: fontSize, numberOfLines, granularity and mode.

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

PresetFontSizes


Required props: fontSizePresets, numberOfLines and mode.

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

OverflowReplacement


Required props: fontSize, numberOfLines, overFlowReplacement and mode.

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

Props

namedescriptiontypedefault
fontSizeFont sizenumber14
numberOfLinesNumber of lines before rescalingnumbernone
modeResize text modeResizeTextModeResizeTextMode.max_lines
minFontSizeMinimum font sizenumbernone
granularityText resize granularitynumbernone
fontSizePresetsFont size presetsnumber[]none
OverflowreplacementReplacement if the text overflows parentstring''
styleText stylefunction: () => {}
TextPropsAll other <Text/> propsfunction: () => {}

Example with all modes

import React, {useState} from 'react'; import {ScrollView, StyleSheet, Text, TextInput, View} from 'react-native'; import {AutoSizeText, ResizeTextMode} from 'react-native-auto-size-text'; const App = () => { const [text, setText] = useState<string>(''); return ( <ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.container}> <TextInput style={styles.input} onChangeText={e => setText(e)} value={text} /> <Text>MaxLines</Text> <View style={styles.textWrapper}> <AutoSizeText fontSize={64} numberOfLines={2} mode={ResizeTextMode.max_lines}> {text} </AutoSizeText> </View> <Text>MinFontSize</Text> <View style={styles.textWrapper}> <AutoSizeText numberOfLines={3} minFontSize={18} mode={ResizeTextMode.min_font_size}> {text} </AutoSizeText> </View> <Text>PresetFontSizes</Text> <View style={styles.textWrapper}> <AutoSizeText fontSizePresets={[50, 30, 10]} numberOfLines={3} mode={ResizeTextMode.preset_font_sizes}> {text} </AutoSizeText> </View> <Text>OverflowReplacement</Text> <View style={styles.textWrapper}> <AutoSizeText fontSize={12} numberOfLines={1} mode={ResizeTextMode.overflow_replacement} overFlowReplacement={'Text overflowing'}> {text} </AutoSizeText> </View> <Text>Group</Text> <View style={styles.textWrapper}> <AutoSizeText mode={ResizeTextMode.group} fontSize={2048}> {text} </AutoSizeText> </View> <Text>StepGranularity</Text> <View style={styles.textWrapper}> <AutoSizeText mode={ResizeTextMode.step_granularity} fontSize={64} numberOfLines={2} granularity={10}> {text} </AutoSizeText> </View> </ScrollView> ); }; const styles = StyleSheet.create({ container: { justifyContent: 'center', alignItems: 'center', }, textWrapper: { borderColor: '#bcbcbc', borderRadius: 10, width: '80%', margin: 16, height: 200, borderWidth: 2, }, scrollViewContainer: { flex: 1, }, input: { height: 80, width: '100%', margin: 12, borderWidth: 1, }, }); export default App;

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

Keywords

FAQs

Last updated on 26 May 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc