Solución:
La fuente del sistema en iOS es San Francisco, que tiene números proporcionales de forma predeterminada, pero contiene una opción para números de ancho fijo (monoespaciado). Con react-native, debe usar el fontVariant propiedad en su Text estilo del componente:
<Text style={{fontVariant: ['tabular-nums']}}>
1,234,567,890.12
</Text>
Me costó encontrarlo porque el nombre no es explícito y no es el que se usa normalmente. Aquí hay un enlace a los accesorios de texto en el documento de RN: https://facebook.github.io/react-native/docs/text.html#style
Gracias a @ppeterka, encontré una solución súper fácil para esto que requiere una línea de código: use una fuente monoespaciada.
Aquí hay una lista de algunas fuentes monoespaciadas disponibles que se envían con iOS:
mensajero
Courier-Bold
Courier-BoldOblique
Mensajero oblicuo
Courier Nuevo
MensajeríaNuevoPS-BoldItalicMT
MensajeríaNuevoPS-BoldMT
CourierNewPS-ItalicMT
MensajeríaNuevoPSMT
Menlo-Bold
Menlo-BoldItalic
Menlo-cursiva
Menlo-Regular
Aunque la pregunta está etiquetada para iOS, en caso de que alguien esté buscando una solución genérica que admita texto de espacio único en iOS y Android (como yo), ¡aquí hay un recurso adicional para ti!
Selección de fuentes:
react-native-training / react-native-fonts en GitHub tiene una buena lista de fuentes que se encuentran en cada plataforma. Como puede ver, no hay superposición entre las fuentes monoespaciadas que OP proporcionó en su respuesta. Sin embargo, Android tiene una fuente llamada ‘monoespacio’ que funcionará para este caso de uso.
Declaración condicional del sistema operativo
Dado que react native arrojará un error si una fuente en fontFamily no existe, necesitaremos establecer condicionalmente fontFamily en función de lo que esté disponible en el sistema operativo. Platform.OS de react-native se puede utilizar para determinar el sistema operativo del dispositivo.
Ejemplo
// components/TextFixedWidth.js
import React from 'react'
import { Platform, Text } from 'react-native'
export default function TextFixedWidth ({ children }) {
const fontFamily = Platform.OS === 'ios' ? 'Courier' : 'monospace'
return (
<Text style={{fontFamily}}>{ children }</Text>
)
}
Luego
// in a render method somewhere in the app
<TextFixedWidth>
Any monospace text you want!
</TextFixedWidth>
Espero que esto sea útil 🙂