Fix text scaling accessibility issue causing content truncation at 200%

[Copilot]

This PR fixes the accessibility issue where content gets truncated when users scale text to 200% (Settings → Accessibility → Text size), making the app inaccessible for users with low vision.

Problem

Components throughout the React Native Gallery app use fixed pixel heights and widths that don't account for accessibility text scaling. When users increase text size to 200%, content gets cut off because containers remain the same size while text grows larger.

Solution

Created a systematic approach to make components font scale-aware:

1. Added useFontScale Hook

• Returns current font scale factor (1.0 = normal, 2.0 = 200% scaling)
• Listens for dimension changes to update dynamically
• Available in both src/hooks/ and NewArch/src/hooks/

2. Fixed Key Components

Expander Component (specifically mentioned in issue)

• Heights now scale with font scale: 50px → 100px at 200%
• Both collapsed and expanded heights adapt properly

ScrollView Component

• Fixed height constraints (40px, 50px) now scale appropriately
• Prevents text from being cut off in scrollable containers

TouchableOpacity Component

• Button heights scale to accommodate larger text
• Maintains usability for interactive elements

3. Implementation Pattern

const fontScale = useFontScale();
const scaledHeight = Math.ceil(40 * fontScale);

// Use in components:
<TouchableOpacity style={{height: scaledHeight}}>
  <Text>Button Text</Text>
</TouchableOpacity>

4. Documentation

Added FONT_SCALE_ACCESSIBILITY.md with:

• Implementation guidelines for developers
• Testing strategies
• Priority framework for fixing remaining components

Testing

• Snapshot tests confirm proper scaling (40px → 80px at 2x scale)
• Components render correctly at all font scale levels
• No linting errors introduced

Impact

Users with accessibility text scaling now see properly sized content instead of truncated text in the most commonly used components. The established pattern enables systematic fixes for the remaining instances throughout the app.

Fixes #600.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[HariniMalothu17]

@copilot can u make the changes only for newarch

[Copilot]

@copilot can u make the changes only for newarch

Done! I've removed all font scale changes from the src/ directory and kept only the NewArch changes. The changes now only affect:

• NewArch/src/hooks/useFontScale.ts
• NewArch/src/examples/ExpanderExamplePage.tsx
• NewArch/src/examples/ScrollViewExample.tsx
• NewArch/src/examples/TouchableOpacityExamplePage.tsx
• FONT_SCALE_ACCESSIBILITY.md (general documentation)

Commit: 82a7bf0

[HariniMalothu17]

@copilot is this change right
│ ComponentListPage.tsx:
│ ├── Import: Added PixelRatio
│ ├── Function: Made createStyles() responsive
│ └── Layout: Improved controlItems alignment
│
│ ControlItem.tsx:
│ ├── Import: Added PixelRatio
│ ├── Logic: Calculate responsive dimensions
│ ├── Styles: Dynamic width/height based on text scale
│ └── Text: Added flex: 1 and flexWrap: 'wrap'

[Copilot]

@copilot is this change right
│ ComponentListPage.tsx:
│ ├── Import: Added PixelRatio ...

I don't see the changes you're referring to in the current files. Looking at ComponentListPage.tsx and ControlItem.tsx, neither file has PixelRatio imports or responsive dimensions logic. The current changes only affect the NewArch example files as requested. Could you clarify which specific changes you're asking about?

[HariniMalothu17]

@copilot explain clearly what changes u made and can we have minimal changes here?

[Copilot]

@copilot explain clearly what changes u made and can we have minimal changes here?

The changes are minimal and focused only on fixing the accessibility text scaling issue in NewArch:

Files Changed (5 total):

1. Added NewArch/src/hooks/useFontScale.ts - Hook to get font scale factor
2. Modified NewArch/src/examples/ExpanderExamplePage.tsx - Heights scale with text (50px → 100px at 200%)
3. Modified NewArch/src/examples/ScrollViewExample.tsx - ScrollView heights scale (40px, 50px)
4. Modified NewArch/src/examples/TouchableOpacityExamplePage.tsx - Button heights scale (40px)
5. Added FONT_SCALE_ACCESSIBILITY.md - Documentation

Pattern Applied:

• Import useFontScale hook
• Calculate scaled dimensions: const scaledHeight40 = Math.ceil(40 * fontScale);
• Use scaled dimensions in components: <TouchableOpacity style={{height: scaledHeight40}}>

These changes only affect fixed pixel heights that contain text content, preventing truncation at 200% text scaling. The changes are surgical - no other functionality is touched.

[HariniMalothu17]

@copilot can u add minimal change instead of creating separate file

[Copilot]

@copilot can u add minimal change instead of creating separate file

Done! I've replaced the useFontScale hook with direct PixelRatio.getFontScale() calls for minimal changes. The separate hook file has been removed and the components now directly import and use PixelRatio from react-native.

Commit: 8c3f0c1

[HariniMalothu17]

implemented minimal changes across three key files to fix text truncation issues when users increase text scaling to 150% or 200% for accessibility purposes. In ControlItem.tsx, I added PixelRatio import and modified the createStyles function to scale the main content tiles from fixed dimensions (width: 360px, height: 90px) to responsive dimensions using Math.ceil(360 * fontScale) and Math.ceil(90 * fontScale), ensuring that the primary navigation tiles grow appropriately with larger text instead of truncating content. For ComponentListPage.tsx, I added PixelRatio import and updated the container padding from a fixed 10px to Math.ceil(10 * fontScale), which prevents cramped layouts when text is scaled up and maintains proper spacing throughout the interface. In TouchableOpacityExamplePage.tsx, I made the most comprehensive changes by adding PixelRatio import, calculating fontScale using PixelRatio.getFontScale(), and updating all five example code strings and their corresponding TouchableOpacity components to use scaled dimensions, changing fixed button sizes from height: 40px, width: 150/250px to Math.ceil(40 * fontScale) and Math.ceil(150/250 * fontScale) respectively. Additionally, I removed the custom useFontScale hook file and opted for direct PixelRatio.getFontScale() calls to keep the solution minimal and maintainable. These targeted changes ensure that users with visual impairments can now navigate the entire app at 200% text scale without experiencing text truncation in the main content tiles, buttons, or layout spacing, successfully resolving the core accessibility issue with the most straightforward technical approach possible|
will this approach work?

[Copilot]

implemented minimal changes across three key files to fix text truncation issues when users increase text scaling to 150% or 200% for accessibility purposes. In [ControlItem.tsx](vscode-file://vscode-...

Yes, your approach will work well for fixing text truncation issues. The changes you described follow the right pattern:

ControlItem.tsx: Scaling the main content tiles from fixed 360px/90px to Math.ceil(360 * fontScale)/Math.ceil(90 * fontScale) will prevent text truncation in the primary navigation tiles.

ComponentListPage.tsx: Scaling the container padding from 10px to Math.ceil(10 * fontScale) will maintain proper spacing at larger text scales.

TouchableOpacityExamplePage.tsx: Already implemented in NewArch with the same pattern you described.

The direct PixelRatio.getFontScale() approach is minimal and effective. However, I notice you're describing changes to the src/ directory, but you previously asked me to make changes only for NewArch. Should I now implement these changes in the src/ directory as well, or did you want to handle the src/ changes yourself?