NativeAccessibilityManager.setAccessibilityContentSizeMultipliers(…) not actually changing defaults

[shollington-rbi]

Description

On new architecture, NativeAccessibilityManager.setAccessibilityContentSizeMultipliers(…) seems to not actually update the rendered text scales on iOS over the default values hardcoded in https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTUtils.mm#L366-L377. On old architecture, these reflect immediately.

Reproducible with Expo 53 in 0.79.5, 0.80.1 (npx expo install expo@canary --fix), and 0.80.2 (yarn add react-native@0.80.2).

• Calling it on JavaScript initialization (outside/before render) doesn't work either.
• Interestingly, JS and event handlers report the updated values but the actual rendering does not change. I believe that is why this rn-tester AccessibilityManagerTest still passes.
• As would be expected, patching the values in RCTUtils.mm before building react-native does reflect so these are the ones being used by Fabric.

Aside: I'm not sure what the plan is forNativeAccessibilityManager given the move away from exposing private APIs but the community probably does need a way to update these values.

Steps to reproduce

1. Open https://snack.expo.dev/@shollington-popeyes/fc57d4 (just App.js modified).
2. Make sure you are in non-large Font Scaling mode (iOS settings or button at the bottom of Snack).
3. Click the "Change Accessibility Multipliers" button and observe no actual change in font scaling.

React Native Version

0.80.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (10) arm64 Apple M4
  Memory: 143.27 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.17.0
    path: ~/.nvm/versions/node/v22.17.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.17.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.17.0/bin/npm
  Watchman:
    version: 2025.06.30.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13665796
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

There is no crash. It is visual/rendering/layout issue.

MANDATORY Reproducer

https://snack.expo.dev/@shollington-popeyes/fc57d4

Screenshots and Videos

Old Architecture	New Architecture

[atulgpt17]

Hi @shollington-rbi I am able to repro your issue with the snack link provide by you

[cortinico]

Potentially related to:

• No hot reloading when change font scale #45655

[vonovak]

Hello,
just sharing my version of the original repro that calls setAccessibilityContentSizeMultipliers on button press, not in a useEffect. I made these changes to be more sure of when the call happens.

That being said, I can repro, and reloading JS after calling setAccessibilityContentSizeMultipliers() doesn't have any effect.

Details

import { useEffect, useState, useMemo, memo } from 'react';
import {
  StyleSheet,
  Text,
  View,
  DeviceEventEmitter,
  Dimensions,
  TouchableOpacity,
  SafeAreaView,
  Platform,
  ViewProps,
} from 'react-native';
// @ts-ignore
import NativeAccessibilityManager from 'react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager';

const CaptionedMetric = memo(function CaptionedMetric({
  topCaption,
  bottomCaption,
  metric,
  ...viewProps
}: {
  topCaption: string;
  bottomCaption: string | undefined;
  metric: number;
} & ViewProps) {
  return (
    <View {...viewProps} style={StyleSheet.compose(styles.captionedMetric, viewProps.style)}>
      <Text numberOfLines={1} style={styles.caption}>
        {topCaption}
      </Text>
      <Text numberOfLines={1} style={styles.metric}>
        {metric}
      </Text>
      <Text numberOfLines={1} style={styles.caption}>
        {bottomCaption}
      </Text>
    </View>
  );
});

export default function App() {
  const [baseMultiplier, setBaseMultiplier] = useState(1);

  const resolvedMultipliers = useMemo(
    () => _getFullSetOfMultipliers(baseMultiplier),
    [baseMultiplier]
  );

  const [fontScales, setFontScales] = useState(_getCurrentFontScalesFromDimensionsAPI);

  const currentScreenLevel = Object.entries(resolvedMultipliers).find(
    ([_, v]) => v === fontScales.screen
  )?.[0];
  const currentWindowLevel = Object.entries(resolvedMultipliers).find(
    ([_, v]) => v === fontScales.window
  )?.[0];

  useEffect(() => {
    const subscription = DeviceEventEmitter.addListener('didUpdateDimensions', (update) => {
      const currentDimensions = _getCurrentFontScalesFromDimensionsAPI();
      if (currentDimensions.screen !== update.screen.fontScale) {
        throw new Error('Updated screen dimensions are not reflected in Dimensions API.');
      }
      if (currentDimensions.window !== update.window.fontScale) {
        throw new Error('Updated window dimensions are not reflected in Dimensions API.');
      }
      setFontScales(currentDimensions);
      console.log('didUpdateDimensions received', currentDimensions);
    });
    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <SafeAreaView style={styles.contentContainer}>
      <Text>{globalThis.nativeFabricUIManager ? 'New Architecture' : 'Old Architecture'}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          const nextBaseMultiplier = baseMultiplier === 1 ? 2 : 1;
          setBaseMultiplier(nextBaseMultiplier);
          const nextResolvedMultipliers = _getFullSetOfMultipliers(nextBaseMultiplier);
          console.log(
            'Calling NativeAccessibilityManager.setAccessibilityContentSizeMultipliers',
            JSON.stringify(nextResolvedMultipliers, null, 2)
          );
          NativeAccessibilityManager.setAccessibilityContentSizeMultipliers(
            nextResolvedMultipliers
          );
        }}>
        <Text style={styles.buttonText}>Change Accessibility Multipliers</Text>
        <Text>You should expect to see text scaling. baseMultiplier: {baseMultiplier}</Text>
      </TouchableOpacity>
      <View style={styles.flexRow}>
        <CaptionedMetric
          metric={fontScales.screen}
          topCaption="Screen"
          bottomCaption={currentScreenLevel}
        />
        <CaptionedMetric
          metric={fontScales.window}
          topCaption="Window"
          bottomCaption={currentWindowLevel}
        />
      </View>
      <View>
        {Array.from({ length: 8 })
          .map((_, idx) => (idx + 1) * 4)
          .map((fontSize) => (
            <Text key={`${fontSize}px`} style={{ fontSize }}>{`${fontSize}px Font Size`}</Text>
          ))}
      </View>
      <View style={styles.footer}>
        {Object.entries(resolvedMultipliers).map((kv) => (
          <Text
            key={kv[0]}
            numberOfLines={1}
            ellipsizeMode="middle"
            style={StyleSheet.compose(
              styles.kvPairText,
              [currentScreenLevel, currentWindowLevel].includes(kv[0]) && styles.boldText
            )}>
            {kv.join(': ')}
          </Text>
        ))}
      </View>
    </SafeAreaView>
  );
}

function _getCurrentFontScalesFromDimensionsAPI() {
  return {
    screen: Dimensions.get('screen').fontScale,
    window: Dimensions.get('window').fontScale,
  };
}

const REACT_HARDCODED_VALUES = {
  extraSmall: 0.823,
  small: 0.882,
  medium: 0.941,
  large: 1.0,
  extraLarge: 1.118,
  extraExtraLarge: 1.235,
  extraExtraExtraLarge: 1.353,
  accessibilityMedium: 1.786,
  accessibilityLarge: 2.143,
  accessibilityExtraLarge: 2.643,
  accessibilityExtraExtraLarge: 3.143,
  accessibilityExtraExtraExtraLarge: 3.571,
};
function _getFullSetOfMultipliers(baseSize = 1) {
  return Object.fromEntries(
    Object.entries(REACT_HARDCODED_VALUES).map(([k, v]) => [
      k,
      Math.ceil(1000 * Math.pow(v, baseSize)) / 1000,
    ])
  );
}

const styles = StyleSheet.create({
  kvPairText: {
    fontFamily: Platform.select({ ios: 'Courier', default: 'monospace' }),
  },
  boldText: {
    fontWeight: 'bold',
  },
  button: {
    alignItems: 'center',
  },
  buttonText: {
    color: 'blue',
    fontSize: 16,
    fontWeight: 'bold',
  },
  captionedMetric: {
    flexShrink: 1,
    alignItems: 'center',
  },
  caption: {
    fontSize: 10,
  },
  metric: {
    fontSize: 48,
    flexShrink: 1,
  },
  flexRow: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignSelf: 'stretch',
  },
  contentContainer: {
    flexGrow: 1,
    gap: 20,
    alignItems: 'center',
    backgroundColor: 'white',
  },
  footer: {
    flexGrow: 1,
    justifyContent: 'flex-end',
  },
});

[chrfalch]

I belive this might have something to do with a problem we've looked into before - I'll take a look and see if it is the same.