¿Cómo deshabilitar el escalado de fuentes en la aplicación React Native para IOS y Android?

La ampliación del tamaño de la fuente del dispositivo a veces se romperá (estilo inteligente).

Deshabilitar el escalado de fuentes puede dañar la accesibilidad de su aplicación, idealmente si desea limitar el escalado de aplicaciones que usan React native 0.58.0 y superior; utilizar el maxFontSizeMultiplier apuntalar en específico Text componentes

Sin embargo, si desea deshabilitar absolutamente la escala de fuentes en toda su aplicación, puede hacerlo configurando globalmente el allowFontScaling apuntalar en el defaultProps de Text.

Debe colocar estas líneas en su punto de entrada raíz (normalmente index.js) antes AppRegistry.registerComponent.

Para reaccionar nativo 0.56.0+

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

Para versiones anteriores de React Native, solo debería necesitar la segunda línea, pero tener ambas no le hará daño. La primera línea sólo protege contra el Text componente que no tiene defaultProps que es el caso de React Native 0.56.0 y superior.

Agregue las líneas anteriores en el archivo de punto de entrada de su aplicación React Native (generalmente index.js, app.js o main.js) para aplicar este apoyo a todos Text componentes de su aplicación.

Este accesorio solo afectará Text componentes y es posible que desee aplicar los mismos cambios a TextInput que se puede hacer con un fragmento similar:

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

También tenga en cuenta que algunos componentes no obedecerán la configuración de escala de fuente, por ejemplo: Alert, PickerIOS, DatePickerIOS, TabBarIOS, SegmentedControlIOS ya que todos estos están dibujados de forma nativa y no dependen del Text componente.

Para React nativo 0.58+

Es preferible mantener la escala de fuente, pero puede limitarla usando Text new prop maxFontSizeMultiplier

Para React native 0.56+ use la respuesta de Levi

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

Para React nativo 0.55 e inferior

Agregar Text.defaultProps.allowFontScaling=false al comienzo de la aplicación (p. ej., main.js o app.js, etc.) para aplicar este accesorio en todos los componentes de texto en toda la aplicación.

When user increase full font size from setting 

La ampliación del tamaño de la fuente del dispositivo no se romperá (estilo inteligente).

index.js file


import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import {Text, TextInput} from 'react-native';

AppRegistry.registerComponent(appName, () => App);

//ADD this 
if (Text.defaultProps == null) {
    Text.defaultProps = {};
    Text.defaultProps.allowFontScaling = false;
}

if (TextInput.defaultProps == null) {
    TextInput.defaultProps = {};
    TextInput.defaultProps.allowFontScaling = false;
}

<CalendarStrip
    shouldAllowFontScaling={false}
/>

También tenga en cuenta que algunos componentes no obedecerán la configuración de escalado de fuentes, por ejemplo: Alert, PickerIOS, DatePickerIOS, TabBarIOS, SegmentedControlIOS, ya que todos se dibujan de forma nativa y no dependen del componente Texto.

 if (Text.defaultProps == null) {
            Text.defaultProps = {};
            Text.defaultProps.allowFontScaling = false;
        }

Mantuve este fragmento de código dentro del constructor de index.js. Realmente funcionó bien. Por el estoy usando reaccionar versión nativa 0.59.9 para tu información

Llego un poco tarde, pero si alguien quiere una respuesta con Typescript, aquí está

interface TextWithDefaultProps extends Text {
  defaultProps?: { allowFontScaling?: boolean };
}

(Text as unknown as TextWithDefaultProps).defaultProps = {
   ...((Text as unknown as TextWithDefaultProps).defaultProps || {}),
   allowFontScaling: false,
 };

Crear un <AppText> componente y utilícelo con sus ajustes preestablecidos en lugar del original, con su propio valor predeterminado, incluida la escala de fuente falsa. Esto es mejor porque puedes enriquecerlo con tu propia API.

Por ejemplo, mi AppText permite hacer cosas como:

<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>

En otro archivo, importe el actual Text componente como ScaledText así como una copia de seguridad, y luego redefinir Textanulando el allowFontScaling apuntalar.

export function Text(props) {
  return <ScaledText {...props} allowFontScaling={false} />;
}

Luego, importe su definido localmente Text componente, en lugar del React Native incorporado Text. Esto también es útil si desea deshabilitar elegantemente el escalado de fuentes solo en ciertas partes de su aplicación.