indatastar-styled-autoresizabletext 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 InDataStar
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# indatastar-styled-autoresizabletext
+**Text auto-resizes to fit its container in React Native.**  
+Highly useful for responsive UI, cards, banners, and dynamic layouts.
+
+## Installation
+
+
+```bash
+npm install indatastar-styled-autoresizabletext
+# or
+yarn add indatastar-styled-autoresizabletext
+```
+
+
+## Usage
+
+
+```js
+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](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## 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](https://github.com/callstack/react-native-builder-bob)

package/lib/module/AutoResizableText/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import React, { useState, useRef } from 'react';
+import { Animated } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AutoResizeText = ({
+  text,
+  children,
+  maxFontSize = 36,
+  minFontSize = 12,
+  stepSize = 0.5,
+  numberOfLines = 1,
+  style,
+  ...rest
+}) => {
+  const [fontSize, setFontSize] = useState(maxFontSize);
+  const [width, setWidth] = useState(0);
+  const [needResize, setNeedResize] = useState(true);
+  const animatedFont = useRef(new Animated.Value(maxFontSize)).current;
+  const onTextLayout = e => {
+    if (!needResize) return;
+    const {
+      lines
+    } = e.nativeEvent;
+    if (!lines || lines.length === 0) return;
+    let currentFont = fontSize;
+    // Use the correct type
+    const typedLines = lines;
+    let maxLineWidth = Math.max(...typedLines.map(line => line.width));
+    while (maxLineWidth > width && currentFont > minFontSize) {
+      currentFont = Math.max(currentFont - stepSize, minFontSize);
+      maxLineWidth = maxLineWidth * currentFont / fontSize;
+    }
+    setFontSize(currentFont);
+    Animated.timing(animatedFont, {
+      toValue: currentFont,
+      duration: 150,
+      useNativeDriver: false
+    }).start();
+    setNeedResize(false);
+  };
+  const onLayout = e => {
+    const containerWidth = e.nativeEvent.layout.width;
+    if (width !== containerWidth) {
+      setWidth(containerWidth);
+      setNeedResize(true);
+    }
+  };
+  return /*#__PURE__*/_jsx(Animated.Text, {
+    onLayout: onLayout,
+    onTextLayout: onTextLayout,
+    numberOfLines: numberOfLines,
+    ellipsizeMode: "tail",
+    style: [style, {
+      fontSize: animatedFont
+    }],
+    ...rest,
+    children: text ?? children
+  });
+};
+export default AutoResizeText;
+//# sourceMappingURL=index.js.map

package/lib/module/AutoResizableText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useRef","Animated","jsx","_jsx","AutoResizeText","text","children","maxFontSize","minFontSize","stepSize","numberOfLines","style","rest","fontSize","setFontSize","width","setWidth","needResize","setNeedResize","animatedFont","Value","current","onTextLayout","e","lines","nativeEvent","length","currentFont","typedLines","maxLineWidth","Math","max","map","line","timing","toValue","duration","useNativeDriver","start","onLayout","containerWidth","layout","Text","ellipsizeMode"],"sourceRoot":"../../../src","sources":["AutoResizableText/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAC/C,SAASC,QAAQ,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA6BxC,MAAMC,cAA6C,GAAGA,CAAC;EACrDC,IAAI;EACJC,QAAQ;EACRC,WAAW,GAAG,EAAE;EAChBC,WAAW,GAAG,EAAE;EAChBC,QAAQ,GAAG,GAAG;EACdC,aAAa,GAAG,CAAC;EACjBC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACQ,WAAW,CAAC;EACrD,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGjB,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAM,CAACkB,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAAC,IAAI,CAAC;EAClD,MAAMoB,YAAY,GAAGnB,MAAM,CAAC,IAAIC,QAAQ,CAACmB,KAAK,CAACb,WAAW,CAAC,CAAC,CAACc,OAAO;EACtE,MAAMC,YAAY,GAAIC,CAAkB,IAAK;IAC3C,IAAI,CAACN,UAAU,EAAE;IAEjB,MAAM;MAAEO;IAAM,CAAC,GAAGD,CAAC,CAACE,WAAW;IAC/B,IAAI,CAACD,KAAK,IAAIA,KAAK,CAACE,MAAM,KAAK,CAAC,EAAE;IAElC,IAAIC,WAAW,GAAGd,QAAQ;IAC1B;IACA,MAAMe,UAAU,GAAGJ,KAAoC;IACvD,IAAIK,YAAY,GAAGC,IAAI,CAACC,GAAG,CAAC,GAAGH,UAAU,CAACI,GAAG,CAACC,IAAI,IAAIA,IAAI,CAAClB,KAAK,CAAC,CAAC;IAElE,OAAOc,YAAY,GAAGd,KAAK,IAAIY,WAAW,GAAGnB,WAAW,EAAE;MACxDmB,WAAW,GAAGG,IAAI,CAACC,GAAG,CAACJ,WAAW,GAAGlB,QAAQ,EAAED,WAAW,CAAC;MAC3DqB,YAAY,GAAIA,YAAY,GAAGF,WAAW,GAAId,QAAQ;IACxD;IAEAC,WAAW,CAACa,WAAW,CAAC;IAExB1B,QAAQ,CAACiC,MAAM,CAACf,YAAY,EAAE;MAC5BgB,OAAO,EAAER,WAAW;MACpBS,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAEVpB,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC;EAIC,MAAMqB,QAAQ,GAAIhB,CAAoB,IAAK;IACzC,MAAMiB,cAAc,GAAGjB,CAAC,CAACE,WAAW,CAACgB,MAAM,CAAC1B,KAAK;IACjD,IAAIA,KAAK,KAAKyB,cAAc,EAAE;MAC5BxB,QAAQ,CAACwB,cAAc,CAAC;MACxBtB,aAAa,CAAC,IAAI,CAAC;IACrB;EACF,CAAC;EAED,oBACEf,IAAA,CAACF,QAAQ,CAACyC,IAAI;IACZH,QAAQ,EAAEA,QAAS;IACnBjB,YAAY,EAAEA,YAAa;IAC3BZ,aAAa,EAAEA,aAAc;IAC7BiC,aAAa,EAAC,MAAM;IACpBhC,KAAK,EAAE,CAACA,KAAK,EAAE;MAAEE,QAAQ,EAAEM;IAAa,CAAC,CAAE;IAAA,GACvCP,IAAI;IAAAN,QAAA,EAEPD,IAAI,IAAIC;EAAQ,CACJ,CAAC;AAEpB,CAAC;AAED,eAAeF,cAAc","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as AutoResizeText } from "./AutoResizableText/index.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","AutoResizeText"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,8BAAqB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/AutoResizableText/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TextProps } from 'react-native';
+import type { TextStyle } from 'react-native';
+interface AutoResizeTextProps extends TextProps {
+    text?: string;
+    maxFontSize?: number;
+    minFontSize?: number;
+    stepSize?: number;
+    numberOfLines?: number;
+    style?: TextStyle;
+}
+declare const AutoResizeText: React.FC<AutoResizeTextProps>;
+export default AutoResizeText;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/AutoResizableText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/AutoResizableText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAQ,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAE,MAAM,cAAc,CAAC;AAkB7C,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AutoResizeText } from "./AutoResizableText";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "indatastar-styled-autoresizabletext",
+  "version": "0.1.0",
+  "description": "Highly useful for responsive UI, cards, banners, and dynamic layouts.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace indatastar-styled-autoresizabletext-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InDataStar/indatastar-styled-autoresizabletext.git"
+  },
+  "author": "InDataStar <crawfordlp1@gmail.com> (https://github.com/InDataStar)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/InDataStar/indatastar-styled-autoresizabletext/issues"
+  },
+  "homepage": "https://github.com/InDataStar/indatastar-styled-autoresizabletext#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^3.8.1",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.1"
+  }
+}

package/src/AutoResizableText/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useRef } from 'react';
+import { Animated } from 'react-native';
+import  type { TextProps } from 'react-native';
+import type {TextStyle } from 'react-native';
+import type {LayoutChangeEvent } from 'react-native';
+import type {TextLayoutEvent } from 'react-native'; 
+
+type TextLayoutLineRN = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ascender: number;
+  capHeight: number;
+  descender: number;
+  text: string;
+  xHeight: number;
+};
+
+
+
+interface AutoResizeTextProps extends TextProps {
+  text?: string;
+  maxFontSize?: number;
+  minFontSize?: number;
+  stepSize?: number;
+  numberOfLines?: number;
+  style?: TextStyle;
+}
+
+const AutoResizeText: React.FC<AutoResizeTextProps> = ({
+  text,
+  children,
+  maxFontSize = 36,
+  minFontSize = 12,
+  stepSize = 0.5,
+  numberOfLines = 1,
+  style,
+  ...rest
+}) => {
+  const [fontSize, setFontSize] = useState(maxFontSize);
+  const [width, setWidth] = useState(0);
+  const [needResize, setNeedResize] = useState(true);
+  const animatedFont = useRef(new Animated.Value(maxFontSize)).current;
+const onTextLayout = (e: TextLayoutEvent) => {
+  if (!needResize) return;
+
+  const { lines } = e.nativeEvent;
+  if (!lines || lines.length === 0) return;
+
+  let currentFont = fontSize;
+  // Use the correct type
+  const typedLines = lines as readonly TextLayoutLineRN[];
+  let maxLineWidth = Math.max(...typedLines.map(line => line.width));
+
+  while (maxLineWidth > width && currentFont > minFontSize) {
+    currentFont = Math.max(currentFont - stepSize, minFontSize);
+    maxLineWidth = (maxLineWidth * currentFont) / fontSize;
+  }
+
+  setFontSize(currentFont);
+
+  Animated.timing(animatedFont, {
+    toValue: currentFont,
+    duration: 150,
+    useNativeDriver: false,
+  }).start();
+
+  setNeedResize(false);
+};
+
+
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const containerWidth = e.nativeEvent.layout.width;
+    if (width !== containerWidth) {
+      setWidth(containerWidth);
+      setNeedResize(true);
+    }
+  };
+
+  return (
+    <Animated.Text
+      onLayout={onLayout}
+      onTextLayout={onTextLayout}
+      numberOfLines={numberOfLines}
+      ellipsizeMode="tail"
+      style={[style, { fontSize: animatedFont }]}
+      {...rest}
+    >
+      {text ?? children}
+    </Animated.Text>
+  );
+};
+
+export default AutoResizeText;

package/src/index.tsx

@@ -0,0 +1 @@
+export { default as AutoResizeText } from "./AutoResizableText";