Tengo dos fuentes, una si la aplicación está en árabe y otra si la aplicación está en inglés. Mi pensamiento es declarar el estado en la parte superior, pero cuando el usuario cambia la fuente, revierte el estado falso.
const App = ({navigation}) => { const [newFont, setNewFont] = useState(); i18n.on('languageChanged', () => { console.log('languageChanged'); setNewFont(true); }); const customTextProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT, }, }; const customTextInputProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT, }, }; setCustomText(customTextProps); setCustomTextInput(customTextInputProps); const arabictextProps = { style: { fontFamily: Fonts.GLOBAL_APP_ARABIC_FONT, }, }; if (newFont === true) { setCustomText(arabictextProps); setCustomTextInput(arabictextProps); console.log('fontChange', newFont); } else { console.log('fontChange', newFont); setCustomText(customTextProps); setCustomTextInput(customTextProps); }El estado se declara verdadero cuando el usuario activa la función i18 .on, pero la aplicación se actualiza y cambia el estado nuevamente.
Por favor, ayúdame a encontrar una manera de cambiar el estado...
No debe cambiar el estado dentro de la función porque provoca un bucle: cada vez que actualiza el estado, se vuelve a llamar a la función.
Pruebe con el siguiente ejemplo donde el estado solo cambiará cuando se llame a languageChanged:
const customTextProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT } } const customTextInputProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT } } const arabictextProps = { style: { fontFamily: Fonts.GLOBAL_APP_ARABIC_FONT } } const App = ({ navigation }) => { const [customText, setCustomText] = useState(customTextProps) const [customTextInput, setCustomTextInput] = useState(customTextInputProps) useEffect(() => { i18n.on('languageChanged', () => { console.log('languageChanged') setCustomText(arabictextProps) setCustomTextInput(arabictextProps) }) }, []) } const customTextProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT, }, }; const customTextInputProps = { style: { fontFamily: Fonts.GLOBAL_APP_FONT, }, }; setCustomText(customTextProps); setCustomTextInput(customTextInputProps); const arabictextProps = { style: { fontFamily: Fonts.GLOBAL_APP_ARABIC_FONT, }, }; if (i18n.language === 'ar') { setCustomText(arabictextProps); setCustomTextInput(arabictextProps); } else { setCustomText(customTextProps); setCustomTextInput(customTextProps); }Todo lo que tenía que hacer era cambiar la instrucción if para verificar si la aplicación está en árabe.