I have one web viewer in React Native for my app, and the function of translate with Google works perfectly in the Safari browser, in my Android App, and on the desktop, but not in the iOS app
This is my Google Translate code:
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pt',
includedLanguages: 'pt,en,es',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
comboTranslate = document.querySelector("#google_translate_element .goog-te-combo");
}
function changeEvent(el) {
if (el.fireEvent) {
el.fireEvent('onchange');
} else {
// var evObj = document.createEvent("HTMLEvents");
var event = new Event('change');
comboTranslate.dispatchEvent(event);
// evObj.initEvent("change", false, true);
// el.dispatchEvent(evObj);
}
}
function changeLang(lang) {
if (comboTranslate) {
comboTranslate.value = lang;
changeEvent(comboTranslate);
}
}
function clickChange(){
btn_translate = document.querySelectorAll('.language');
// o que faz os menus acender;
btn_translate.forEach(btn => {
btn.addEventListener('click', function (e) {
var lang = e.srcElement.getAttribute('data-language');
changeLang(lang)
})
})
}
clickChange();
setTimeout(() => {
googleTranslateElementInit()
// comboTranslate.addEventListener('change', function (e) {alert('a');})
}, 500);
and on the app.json I have:
{
"expo": {
"name": "MyApp ",
"slug": "MyApp",
"version": "1.2.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"locales": {
"en": "./locales/ios/en.json",
"pt": "./locales/ios/pt.json",
"es": "./locales/ios/es.json"
},
"platforms": [
"ios",
"android"
],
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"plugins": [
[
"expo-notifications",
{
"icon": "./assets/icon.png",
"color": "#ffffff"
}
]
],
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"buildNumber": "8",
"supportsTablet": true,
"bundleIdentifier": "com.myapp",
"infoPlist": {
"CFBundleAllowMixedLocalizations": true
}
},
"android": {
"package": "com.myapp",
"versionCode": 9,
"googleServicesFile": "./google-services.json",
"config": {
"googleMaps": {
"apiKey": "AIzaSyDQjE4F3chI8Jy4FA8h45LqA7bMfngoH7Y"
}
},
"permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION", "CAMERA", "RECORD_AUDIO"],
"blockedPermissions": ["ACCESS_BACKGROUND_LOCATION"],
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"notification": {
"icon": "./assets/icon.png"
}
}
}
I put console.log and alerts to see if the change in the select element of languages is being triggered by the JS, and it's all ok, I really don't know why it is not translating.