@startsimpli/ui-native 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui-native",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React Native UI primitives for StartSimpli apps (View/Text/Pressable), fed by shared design tokens",
   "license": "MIT",
   "homepage": "https://startsimpli.com",

package/src/__tests__/tabbar.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { TabBar } from '../components/TabBar';
+import { flat, render } from '../../test/render';
+
+describe('TabBar labels never wrap or clip', () => {
+  const items = ['Home', 'GO', 'Notes', 'To-dos', 'Connections'].map((label) => ({ key: label, label }));
+  const r = render(<TabBar items={items} activeKey="Home" onChange={() => {}} />);
+  it('every label is one line that truncates with an ellipsis', () => {
+    const labels = r.root.findAll((n) => n.type === 'Text');
+    expect(labels).toHaveLength(5);
+    for (const l of labels) {
+      expect(l.props.numberOfLines).toBe(1);
+      expect(l.props.ellipsizeMode).toBe('tail');
+    }
+  });
+  it('items can shrink below their label width so the ellipsis can happen', () => {
+    for (const tab of r.root.findAll((n) => n.props.accessibilityRole === 'tab')) {
+      expect(flat(tab.props.style).minWidth).toBe(0);
+    }
+  });
+});

package/src/components/TabBar.tsx

@@ -41,7 +41,7 @@ export function TabBar({ items, activeKey, onChange, style }: TabBarProps) {
             style={tabItemStyle(theme)}
           >
             {item.icon?.({ active, color })}
-            <RNText style={tabLabelStyle(theme, active)}>{item.label}</RNText>
+            <RNText numberOfLines={1} ellipsizeMode="tail" style={tabLabelStyle(theme, active)}>{item.label}</RNText>
           </Pressable>
         );
       })}

package/src/styles.ts

@@ -467,6 +467,9 @@ export function tabItemStyle(theme: Theme): ViewStyle {
     justifyContent: 'center',
     gap: 2,
     paddingVertical: theme.spacing.xs,
+    // Lets a long label shrink to the slot and ellipsize instead of widening it.
+    minWidth: 0,
+    paddingHorizontal: 2,
   };
 }