@boostdev/design-system-react-native 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.8.0] - 2026-10-01
+### Added
+- Feat(textarea): height follows numberOfLines
+
+React Native on iOS gives a multiline TextInput no height from
+numberOfLines (Android does), so the field only had the fixed
+minHeight of 100, about 3 lines at body size. The minimum height is now
+numberOfLines * lineHeight.body + 2 * paddingVertical + 2 * border:
+122 points for the default 4 lines, 148 for 5, 226 for 8, the same on
+both platforms. The fixed 100 is gone.
+
+The lines grow with the OS text size up to the ceiling of the input's
+own text (maxFontScaleFor of the body font, 2), so 5 lines stay 5 lines
+at large text. The padding and the border do not scale.
+
+Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> ([`b81043e`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/b81043e3f6eb3c0c5cc7bf4c41934e513a580de5))
+
 ## [0.7.0] - 2026-09-29
 ### Added
 - Feat(button): ghost is outline without the border

package/dist/index.cjs

@@ -3188,6 +3188,13 @@ function FormInput({
 var import_react13 = require("react");
 var import_react_native41 = require("react-native");
 var import_jsx_runtime42 = require("react/jsx-runtime");
+var PADDING_VERTICAL = import_native.spacing.xs;
+var BORDER_WIDTH = 1;
+var FONT_SCALE_CEILING = maxFontScaleFor(import_native.font.size.body);
+function heightOfLines(numberOfLines, fontScale) {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
 var styles37 = import_react_native41.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
@@ -3197,9 +3204,8 @@ var styles37 = import_react_native41.StyleSheet.create({
     fontSize: import_native.font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: import_native.spacing.s,
-    paddingVertical: import_native.spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: "top"
   }
 });
@@ -3219,6 +3225,7 @@ function Textarea({
   style
 }) {
   const { colors: colors2, radius } = useTheme();
+  const { fontScale } = (0, import_react_native41.useWindowDimensions)();
   const [focused, setFocused] = (0, import_react13.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
@@ -3248,6 +3255,7 @@ function Textarea({
         style: [
           styles37.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors2.colorOnBg,

package/dist/index.js

@@ -3087,8 +3087,15 @@ function FormInput({
 
 // src/components/interaction/form/Textarea/Textarea.tsx
 import { useState as useState9 } from "react";
-import { StyleSheet as StyleSheet38, View as View33 } from "react-native";
+import { StyleSheet as StyleSheet38, View as View33, useWindowDimensions } from "react-native";
 import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+var PADDING_VERTICAL = spacing.xs;
+var BORDER_WIDTH = 1;
+var FONT_SCALE_CEILING = maxFontScaleFor(font.size.body);
+function heightOfLines(numberOfLines, fontScale) {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
 var styles37 = StyleSheet38.create({
   container: {
     gap: spacing.xxs
@@ -3098,9 +3105,8 @@ var styles37 = StyleSheet38.create({
     fontSize: font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: "top"
   }
 });
@@ -3120,6 +3126,7 @@ function Textarea({
   style
 }) {
   const { colors: colors2, radius } = useTheme();
+  const { fontScale } = useWindowDimensions();
   const [focused, setFocused] = useState9(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs25(View33, { style: [styles37.container, style], children: [
@@ -3149,6 +3156,7 @@ function Textarea({
         style: [
           styles37.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors2.colorOnBg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/form/Textarea/Textarea.mdx

@@ -37,6 +37,12 @@ function Example() {
 ### With placeholder
 <Canvas of={Stories.WithPlaceholder} />
 
+### Five lines
+<Canvas of={Stories.FiveLines} />
+
+### Eight lines
+<Canvas of={Stories.EightLines} />
+
 ### With error
 <Canvas of={Stories.WithError} />
 
@@ -62,13 +68,17 @@ function Example() {
 | `value` | string | — | Controlled value |
 | `defaultValue` | string | — | Uncontrolled default value |
 | `placeholder` | string | — | Placeholder text |
-| `numberOfLines` | number | `4` | Number of visible lines |
+| `numberOfLines` | number | `4` | Height of the field in lines of text, the same on iOS and Android. It is the minimum height: the field still grows with longer text |
 | `error` | string | — | Error message displayed below the input |
 | `hint` | string | — | Hint text displayed below the input |
 | `required` | boolean | `false` | Marks the field as required |
 | `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
 | `onChange` | `(value: string) => void` | — | Called with the new text value |
 
+## Height
+
+The field is `numberOfLines` body lines tall, plus its vertical padding and border (at body size 4 lines are 122 points, 5 lines 148, 8 lines 226). The lines follow the OS text size up to the same ceiling as the text itself (`maxFontScaleFor`, 2 for body text), so 5 lines stay 5 lines at large text. The padding and the border do not scale.
+
 ## Accessibility
 
 - The label is announced by screen readers via `accessibilityLabel`

package/src/components/interaction/form/Textarea/Textarea.spec.tsx

@@ -3,6 +3,19 @@ import { ThemeProvider } from '../../../../native/ThemeContext';
 import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { Textarea } from './Textarea';
 import { cornerRadii } from '../../../../test/cornerRadii';
+import { font, lineHeight, spacing } from '../../../../native/tokens';
+import { maxFontScaleFor } from '../../../../native/fontScale';
+
+// The OS text size, as `useWindowDimensions().fontScale` reports it; react-native-web always says 1.
+const osText = vi.hoisted(() => ({ fontScale: 1 }));
+
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    useWindowDimensions: () => ({ ...actual.useWindowDimensions(), fontScale: osText.fontScale }),
+  };
+});
 
 const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
 
@@ -10,7 +23,23 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+const BORDER = 1;
+
+/** `lines` body lines at the OS text size (capped like the input's own text), plus padding and border. */
+function heightOfLines(lines: number, fontScale = 1): number {
+  const scale = Math.min(fontScale, maxFontScaleFor(font.size.body));
+  return lines * lineHeight.body * scale + 2 * spacing.xs + 2 * BORDER;
+}
+
+function minHeightOfInput(): number {
+  return Number.parseFloat(getComputedStyle(screen.getByRole('textbox')).minHeight);
+}
+
 describe('Textarea (native)', () => {
+  beforeEach(() => {
+    osText.fontScale = 1;
+  });
+
   it('renders the label', () => {
     renderWithTheme(<Textarea label="Message" name="message" />);
     expect(screen.getByText('Message')).toBeInTheDocument();
@@ -65,4 +94,56 @@ describe('Textarea (native)', () => {
     );
     expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['12px', '12px', '12px', '12px']);
   });
+
+  describe('height', () => {
+    it('is 4 lines tall by default', () => {
+      renderWithTheme(<Textarea label="Message" name="message" />);
+      expect(minHeightOfInput()).toBe(heightOfLines(4));
+    });
+
+    it('is 148 points tall for 5 lines at body size', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(148);
+    });
+
+    it('is as tall as the lines it shows, for 5 lines', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(5));
+    });
+
+    it('is as tall as the lines it shows, for 8 lines', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={8} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(8));
+    });
+
+    it('has no fixed floor, so a single line is one line tall', () => {
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={1} />);
+      expect(minHeightOfInput()).toBe(heightOfLines(1));
+    });
+
+    it('grows with the OS text size, so 5 lines stay 5 lines', () => {
+      osText.fontScale = 1.5;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(213);
+    });
+
+    it('stops growing where the text stops, at the ceiling of the body font', () => {
+      osText.fontScale = 3;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBe(278);
+      expect(minHeightOfInput()).toBe(heightOfLines(5, maxFontScaleFor(font.size.body)));
+    });
+
+    it('shrinks with a reduced OS text size', () => {
+      osText.fontScale = 0.8;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={5} />);
+      expect(minHeightOfInput()).toBeCloseTo(heightOfLines(5, 0.8), 5);
+    });
+
+    it('does not scale the padding and the border', () => {
+      osText.fontScale = 2;
+      renderWithTheme(<Textarea label="Message" name="message" numberOfLines={1} />);
+      expect(minHeightOfInput()).toBe(lineHeight.body * 2 + 2 * spacing.xs + 2 * BORDER);
+    });
+  });
 });

package/src/components/interaction/form/Textarea/Textarea.stories.tsx

@@ -22,6 +22,14 @@ export const WithPlaceholder: Story = {
   args: { label: 'Bio', name: 'bio', placeholder: 'Tell us about yourself...' },
 };
 
+export const FiveLines: Story = {
+  args: { label: 'Reason', name: 'reason', numberOfLines: 5 },
+};
+
+export const EightLines: Story = {
+  args: { label: 'Notes', name: 'notes', numberOfLines: 8 },
+};
+
 export const WithError: Story = {
   args: { label: 'Message', name: 'message', error: 'Message is required.' },
 };

package/src/components/interaction/form/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState } from 'react';
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle, useWindowDimensions } from 'react-native';
 import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
+import { maxFontScaleFor } from '../../../../native/fontScale';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
@@ -22,6 +23,22 @@ interface TextareaProps {
   style?: StyleProp<ViewStyle>;
 }
 
+const PADDING_VERTICAL = spacing.xs;
+const BORDER_WIDTH = 1;
+/** The ceiling the input's own text gets (`ScaledTextInput`), from its font size. */
+const FONT_SCALE_CEILING = maxFontScaleFor(font.size.body);
+
+/**
+ * The height of `numberOfLines` lines in the field. React Native on iOS gives a multiline
+ * `TextInput` no height from `numberOfLines` (Android does), so the field sets it itself. The
+ * lines grow with the OS text size up to the same ceiling as the text, so they stay that many
+ * lines at large text; the padding and the border do not scale.
+ */
+function heightOfLines(numberOfLines: number, fontScale: number): number {
+  const lineScale = Math.min(fontScale, FONT_SCALE_CEILING);
+  return numberOfLines * lineHeight.body * lineScale + 2 * PADDING_VERTICAL + 2 * BORDER_WIDTH;
+}
+
 const styles = StyleSheet.create({
   container: {
     gap: spacing.xxs,
@@ -31,9 +48,8 @@ const styles = StyleSheet.create({
     fontSize: font.size.body,
     lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    minHeight: 100,
+    paddingVertical: PADDING_VERTICAL,
+    borderWidth: BORDER_WIDTH,
     textAlignVertical: 'top',
   },
 });
@@ -54,6 +70,7 @@ export function Textarea({
   style,
 }: Readonly<TextareaProps>) {
   const { colors, radius } = useTheme();
+  const { fontScale } = useWindowDimensions();
   const [focused, setFocused] = useState(false);
 
   const borderColor = error
@@ -88,6 +105,7 @@ export function Textarea({
         style={[
           styles.textarea,
           {
+            minHeight: heightOfLines(numberOfLines, fontScale),
             borderColor,
             borderRadius: radius.field,
             color: colors.colorOnBg,