indatastar-styled-autoresizabletext

Text auto-resizes to fit its container in React Native.
Highly useful for responsive UI, cards, banners, and dynamic layouts.

Installation

npm install indatastar-styled-autoresizabletext
# or
yarn add indatastar-styled-autoresizabletext

Usage

import React from 'react';
import { View } from 'react-native';
import { AutoResizeText } from 'indatastar-styled-autoresizabletext';

export default function Example() {
  return (
    <View style={{ width: 250, padding: 10, backgroundColor: '#333' }}>
      <AutoResizeText
        text="This is dynamic text that adjusts to fit its container"
        maxFontSize={36}
        minFontSize={12}
        stepSize={0.5}
        numberOfLines={2}
        style={{ color: 'white', fontWeight: 'bold' }}
      />
    </View>
  );
}

Props

| Prop | Type | Default | Description | |-----------------|--------------------|---------|---------------------------------------------------| | text | string | "" | Text to display (alternative to children) | | maxFontSize | number | 36 | Maximum font size allowed | | minFontSize | number | 12 | Minimum font size allowed | | stepSize | number | 0.5 | Font resizing step increment/decrement | | numberOfLines | number | 1 | Max number of lines before truncation | | style | TextStyle | - | Style object passed to Text | | ellipsizeMode | "head" \| "middle" \| "tail" | "tail" | Truncation mode when text exceeds container width |

Features

• Automatically resizes text to fit width and number of lines
• Supports max and min font sizes
• Smooth step-based resizing
• Works for single-line and multi-line text
• Fully customizable styles
• Supports text prop or children

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

Tips

• Smaller stepSize = smoother resizing, but slightly more computation
• Set reasonable maxFontSize and minFontSize to prevent overly small or large text
• Works great for cards, banners, and responsive designs
• Combine with flex or fixed-width containers for better layout control

License

MIT

Made with create-react-native-library