Google Translator Javascript not working in iOS

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.

Answered by IhorShevchuk in 722085022

Hi @tininhaasa

Have you tried to connect Safari debugger to your application and see whether there are some issues with JavaScript?

Accepted Answer

Hi @tininhaasa

Have you tried to connect Safari debugger to your application and see whether there are some issues with JavaScript?

Hi everybody,

I have the same issue, someone know how to fixe it?

Thank you

Hi everyone, I have the same problem with Cordova and obviously the Google translate button, it works everywhere, even on safari, but not in the Cordova iOS webview. The selectbox is created, but not populated and therefore remains hidden. Does anyone know how to fix it?

Thank you

Google Translator Javascript not working in iOS
 
 
Q