Changing a state of a variable in a function

I have two fonts one if the app is in arabic and one if the app is in English. My thinking is declare the state at the top but when the user changes the font it reverts the false state.

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);
  }

The state is declared true when the user triggers the i18 .on function, but the app refreshes and changes the state again.

Please help me figure a way to change the state…

Answer

  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);
  }

All I needed to do was change the if statement to check if the app is in Arabic.