Question

0

61

Vistas

A better method to detect phone notch?

I have a method to detect the notch on iPhones and it works...but I just found out it doesn't work well. About 1 out of 5 app starts, I see the function reporting that the phone doesn't have the notch when in fact it does.

When my app deviceReady() state is activated, I then check to see if the device has the notch then assign the true/false value to a variable that I use later on. As mentioned, about 1 in 5 times it returns false. I think its a timing thing, the function is evaluating the DOM before the DOM has fully loaded causing the detection method to fail.

function hasNotch() {
  if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
    var div = document.createElement('div');
    div.style.paddingBottom = 'env(safe-area-inset-bottom)';
    document.body.appendChild(div);
    setTimeout(function() {
      var calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom, 10);
      document.body.removeChild(div);
      if (calculatedPadding > 0) {
        errMgmt("preIndex/hasNotch ",101.1,"READY: Notch Detected") ;
        return true ;
      } else {
        errMgmt("preIndex/hasNotch ",101.2,"READY: Notch Not Detected") ;
        return false ;
      }
    },100) ;
  } else {
    errMgmt("preIndex/hasNotch ",101.3,"READY: Notch Not Supported") ;
    return false ;
  }
}

$ionicPlatform.ready(function() {
  $rootScope.hasNotch = hasNotch() ;
  ...
}) ;

Then in my landing page controller:

.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) {
   if ($rootScope.hasNotch == true) {
     .. do css stuff ..
   }
}) ;

When it fails to detect, its always the message READY: Notch Not Detected returned...not once has it returned the READY: Notch Not Supported which means the CSS.supports is working, but not part regarding the calculatedPadding.

The true/false value is needed in the Controller of the landing page, and when it fails its causing CSS layout issues. Either the hasNotch() is too slow and the app init is triggering the landing page faster than the response from hasNotch() or there is actually something else wrong with my function.

On a side note, I have researched different methods to detect the notch on Android phones - the two plugins seem to have issues and/or aren't really supported anymore. Was hoping for a solid solution for Android....or even better, a universal solution for both iOS types.

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-11T05:36:16.997Z

I came up with a solution but I still hoping there is a better way. Something that can detect a phone notch during app initialization versus having to rely on DOM evaluations. I have tested the app over 25 times and so far this new method has detected the notch every single time. As I code other things I will continue to evaluate the outcome, but so far so good. Here is what I did.

I removed the check from deviceReady:

$ionicPlatform.ready(function() {
  $rootScope.hasNotch = hasNotch() ;
  ...
}) ;

And in my landing page controller:

.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) {
  $scope.hasNotch = null ;

  var watchNotch = $scope.$watch('hasNotch',function() {
    //begin watching for var change
    deviceData.hasNotch = $scope.hasNotch ;
    $scope.doSomething() ;
    watchNotch() ;  // kill watch
  }) ;  

  if (ionic.Platform.isIOS()) {
    $scope.hasNotch = hasNotch() ;
  } else {
    deviceData.hasNotch = false ;
    $scope.doSomething() ;    
    watchNotch() ;  // kill notch
  }
}) ;

Now I just need to go find a reliable plugin to detect Android notches....easier said than done.