ITMS-90338: Non-public API usage - The app references non-public selectors in _setAlwaysRunsAtForegroundPriority

I got below email from apple - 

Dear Developer,
We identified one or more issues with a recent delivery for your app, 
"-------". Please correct the following issues, then 
upload again.
ITMS-90338: Non-public API usage - The app references non-public 
selectors in ----: _setAlwaysRunsAtForegroundPriority:. If method names 
in your source code match the private Apple APIs listed above, altering 
your method names will help prevent this app from being flagged in 
future submissions. In addition, note that one or more of the above APIs 
may be located in a static library that was included with your app. If 
so, they must be removed. If you think this message was sent in error 
and that you have only used Apple-published APIs in accordance with the 
guidelines, send the app's Apple ID, along with detailed information 
about why you believe the above APIs were incorrectly flagged, to 
appreview@apple.com. For further information, visit the Technical 
Support Information at http://developer.apple.com/support/technical/
Best regards,
The App Store Team



Solution - This mostly comes with ionic / Cordova / Phonegap / Hybrid Apps. Please follow the below steps to solve this issue -
  
Stpe 1 -
cordova plugin rm cordova-plugin-ionic-webview

Stpe 2 -
cordova plugin add cordova-plugin-ionic-webview@4.1.0

This solved my problem. Hope so this will also work for you. If you have any questions related with this you can post a comment here.

How to integrate wootric in ionic

Wootric integration with ionic 

There are two options to implement this -

Option 1 - Add below code after “build/main.js” Or add at the bottom of page.

<!-- start Wootric code -->
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script> 
<!-- end Wootric code -->


Now in your TS file (Where you want to trigger wootric survey) add below code -

/* Wootric code start */
 window['wootric_survey_immediately'] = true; // Comment out the line wootric_survey_immediately = true when you are ready for production. Alternatively, leave the line in the code for testing purposes or to survey the customer upon every visit to a specific page.
 window['wootricSettings'] = {
   email: (user.email)?user.email:'',
   created_at: Math.floor(Date.now() / 1000),
   account_token: "NPS-********”, // You need to update your account token here
   otherData: {
     city: user.city,
     role: user.role
   }
 };
// console.log('wootricSettings:', window['wootricSettings']);
//console.log('WootricSurvey');
window['WootricSurvey'].run("wootricSettings");
/* Wootric code end */


This will trigger wootric survey on the selected page.
Note - You need to update account token on “NPS-XXXXXXXX”

Here - user.email is user email id, otherData are additional data which you want to send on wootric.




Option 2 - You can also integrate into the ionic framework with the help of javascript code. To integrate this you just need to follow below steps -

Insert below javascript code in the bottom of your index.html file 

<!-- start Wootric code -->
<script type="text/javascript">
  window.wootric_survey_immediately = true; // Shows survey immediately for testing purposes. TODO: Comment out for production.
  window.wootricSettings = {
    email: 'customerEmail@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    //external_id: '123abc', // TODO: Reference field for external integrations only. Send it along with email. OPTIONAL
    created_at: 1234567890, // TODO: Date as a 10 digit Unix timestamp in seconds. OPTIONAL
    account_token: 'NPS-XXXXXXXX' // This is your unique account token.
  };
</script>
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
<script type="text/javascript">
  // This loads the Wootric survey
  window.wootric('run');
</script>
<!-- end Wootric code -->


This will trigger wootric survey when your all launch.  


You can check more about this on this URL (Reference URL) - https://engineering.wootric.com/testing-the-wootric-sdk-with-ionic-framework


If you have any questions you can post here in the comment section. Thanks, All the best.

Undefined symbols for architecture x86_64

Hello All,

I am getting below error when I try to run the project in Xcode -


Undefined symbols for architecture x86_64:

  "_OBJC_CLASS_$_SKStoreProductViewController", referenced from:

      objc-class-ref in CDVAppRate.o

  "_SKStoreProductParameterITunesItemIdentifier", referenced from:

      ___29-[CDVAppRate launchAppStore:]_block_invoke in CDVAppRate.o

ld: symbol(s) not found for architecture x86_64

clang: error: linker command failed with exit code 1 (use -v to see invocation)



I have found the solution for this error. The solution is very simple, You need to add the StoreKit framework. To add this follow below steps -


1. Clicking on your project in the upper left of the left pane and select project from TARGETS -

2. In the middle pane you can see the "Build Phases" section, Now click on the Build Phases tab.

3. After this under "Link Binary With Libraries", click on the plus button.

4. Now search for "StoreKit" and find the StoreKit from the list and press Add button.

Now run the project again and the project will get run successfully. This works for me if you are still facing any issue please post your error in the comment section. I will try to resolve this issue.

Note - In my case this issue I faced in ionic / Cordova projects. But this is a common issue related to Xcode.   

The sandbox is not in sync with the Podfile.lock in ionic

In my case, I was building an ionic project. This error comes when I try to run the project in iSO. I spend much time to resolve this issue, Some say we can run pod update OR pod install command to resolve this issue. But noting work in my case. Finally, I found the solution for this. This is very simple. Just follow the below steps to resolve the issue -    

1. First Quit your Xcode.
2. Now move in iOS platform folder. (i.e, Project Dir/platforms/ios)
3. Delete Pods folder from here.
4. Delete Podfile.lock from here.
5. Now open ios platform in the terminal and run "pod install" command in terminal. Make sure to run this command without admin (without sudo).
6. Now open your project in Xcode. Note - Open project via .xcworkspace file.

Now build and run the project, If that does not work follow below more steps - 

7. In Xcode, From navigation go to root node and from the Xcode on the right choose 'Build Settings' option.  Check more information in below image -

8. Now scroll down and there should be following entries - PODS_PODFILE_DIR_PATH and PODS_ROOT. If this available please correct the entry and if not available please add the entry by using below details - 


8.1 Click on the plus (+) icon to add the entry and select "Add user-defined settings". Check below image -

8.2 Add "PODS_PODFILE_DIR_PATH" and for both Debug and Release add "${SRCROOT}/." entry.
8.3 Now again add "PODS_ROOT" and for both Debug and Release add "${SRCROOT}/Pods" entry.

After adding the above details it will look like this -

Now try to build your project. It will build successfully. If still, you are facing any issue please post your error in the comment section. I will try to resolve this issue.

Show image loader in ionic | html

In above image please check 1,2,3 cases.

Case 1 - Image is not loaded so here loader is showing.

Case 2 - Image is half loaded so still image loader is showing.

Case 3 - Image is fully loaded so loader is not showing.

Solution -

Hey guys, There are many third-party libraries available for this but when I try those libraries nothing working properly. So I found a solution with the help of CSS. This is very simple and easy to use. In this solution, we will show loader git until the image load in img tag. So now check below details for solution -

First, in your CSS file add below class -

.default-img-loader{

  background: url('../assets/img/loader.gif') no-repeat center;

}

This class will add a background image to the image tag. Here we used below property -

url('../assets/img/loader.gif')  - Make sure to update path according to your project.

no-repeat  - This will not repeat image in background.

center - This will place the image in center.

Now, In your HTML (template) file add “default-img-loader” class in image tag.

Eg- 

<img class=“default-img-loader” src=“your image url path of server”>

Note - Gif image size should be 16 × 16 OR 18 × 18 for batter experience. You can download loader from below URL -

http://loadinggif.com

Feel free to post a comment if you face any issue during the implementation of this. 

This will help in this case when you are fetching images from server and image size is very long. With the help of this solution, you can show loader until the image fully load. This will work for ionic, HTML, angular, PhoneGap etc. This works for me. I develope ionic app and its working perfect in this.

  

Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle

CordovaError: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle


To solve this issue you have to install gradle. To install gradle please use below steps -

For debian/ubuntu - If your system is a debian/ubuntu then, in this case, you can use below command on the terminal to install gradle. 
sudo apt-get install gradle


For Mac - If your system is a Mac then follow below steps -  

First, download the gradle binary only distribution with the help of this URL - https://gradle.org/gradle-download/
Now open your system terminal and run the following command to unzip the android sdk into the development directory that is under your user home directory
unzip ~/Downloads/gradle-3.1-bin.zip -d ~/Development

To edit base profile open vi editor. We also need to set GRADLE_HOME environment variable 
vi ~/.bash_profile

To enter in edit mode in vi editor hit i and now add below text to .bash_profile
export GRADLE_HOME=~/Development/gradle-3.1/bin

To exit edit mode press Esc key 
To enter in command mode press : (colon key)

To save changes and exit vi editor type wq and press enter key.

To update changes run the following command 
source ~/.bash_profile

Now test this by running below command in terminal 
echo $GRADLE_HOME

For Windows - If your system is a Windows then follow below steps -   
This is a very long process, Here are some steps for windows. Just follow all steps mentioned on below URL -
http://bryanlor.com/blog/gradle-tutorial-how-install-gradle-windows

An error occurred while running subprocess ionic-app-scripts

An error occurred while running subprocess ionic-app-scripts. ionic-app-scripts build exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Solution - 

This is due to the latest version of ionic and Cordova in your system but your project does not support this version.

Run below command in your project -

ionic info

Below is the above command result - 

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2

    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) 

local packages:

    @ionic/app-scripts : 1.3.0

    Cordova Platforms  : android 6.3.0 ios 4.3.1

    Ionic Framework    : ionic-angular 3.0.1

System:

    Node : v10.14.2

    npm  : 6.4.1 

    OS   : macOS High Sierra

Here as we can see Ionic CLI version is “3.20.0” so we need to update CLI version to this, Then I can build the project without error.

To update CLI version please run below command -

npm i -g ionic@3.20.0

Above command result is -

npm i -g ionic@3.20.0

npm WARN deprecated @ionic/cli-utils@1.19.2: Latest Ionic CLI does not use this package.

/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic

> fsevents@1.2.4 install /usr/local/lib/node_modules/ionic/node_modules/fsevents

> node install

[fsevents] Success: "/usr/local/lib/node_modules/ionic/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

+ ionic@3.20.0

added 323 packages from 157 contributors, removed 106 packages, updated 23 packages and moved 5 packages in 20.135s

Now update Cordova for this by using below command -

npm install -g cordova

Above command result is -

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

+ cordova@8.1.2

updated 1 package in 3.948s

Now again try to build your project by using below command-

ionic cordova build ios

This should work but if you are getting below error -

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)

For more information on which environments are supported please see:

https://github.com/sass/node-sass/releases/tag/v4.5.0

Run below command in your project -

npm rebuild node-sass

Above command will resolve the issue related to Node Sass. 

If you still having this issue, Check your Node version. In my case node version was “v6.14.1” So when I update none version to “v6.14.1” and run again this command.

You can check all released version of node on below URL -

https://nodejs.org/en/download/releases/

Now after updating version run below command in your project -

ionic cordova build ios

Now in my case above command build the project successfully. Please try in your project and post a comment if you still have any issue to build the project.

Ionic content does not scroll when you add tap | press gesture

Hello All, This ionic scroll issue is mostly related to Android devices. I always face this issue in android only. It's within <ion-item> or <ion-card> or maybe some other tags. Please check below description for more information -


1. A solution for (tap) gesture -

To solve this issue please replace tap event with the click.

Issue -

<ion-item (tap)=“yourFunction()">

</ion-item>


Solution -
<ion-item (click)=“yourFunction()">

</ion-item>




2. A solution for (press) gesture -

Issue -
<ion-item (press)=“yourFunction()">

</ion-item>


Solution -
<ion-item (long-press)=“yourFunction()">

</ion-item>


First please create (press directive with selector name as long-press) a directive to solve this issue -

Now add below code in press directive -

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

@Directive({
  selector: '[long-press]'
})

export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;
  @Output('long-press') onPressRelease: EventEmitter = new EventEmitter();

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  ngOnInit() {
    this.pressGesture = new Gesture(this.el);
    this.pressGesture.listen();

    this.pressGesture.on('press', (event) => {
      this.onPressRelease.emit('released');
    });
  }

  ngOnDestroy() {
    this.pressGesture.destroy();
  }
}


Now import this directive in your module file -

import { PressDirective } from '../directives/press/press';


@NgModule({
  declarations: [
    MyApp,
PressDirective,
],


});



Please check above all details. Hope so this will resolve your problem. If you still having any issue please add a comment on this post with some details. I will try to resolve your issue. Thanks!

Failed to find 'ANDROID_HOME' environment variable

I am getting below error when I am trying to run project -

> cordova build android
Android Studio project detected
(node:15997) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.


To resolve this issue please run below commands in the terminal -

export ANDROID_HOME="/Users/chetandeshmukh/Library/Android/sdk"
export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH"


How to find the Android SDK path?

First open android studio, Then click on SDK manager. For more info please check below image -

Now select Appearance & Behavior -> System Settings -> Android SDK

 Now copy your SDK location with the help of the above steps and update in command.


This process will set the Android Home path in your system.


Now try once again to run your project. This process will resolve your problem. If you still facing any issue please add your error in the comment section. We will resolve this. 

Could not find play-services-tasks-license.aar (com.google.android.gms:play-services-tasks-license:11.8.0)

Could not find play-services-tasks-license.aar (com.google.android.gms:play-services-tasks-license:11.8.0).
Searched in the following locations:
    https://jcenter.bintray.com/com/google/android/gms/play-services-tasks-license/11.8.0/play-services-tasks-license-11.8.0.aar


Please follow below steps to solve this issue:-


Go to build.gradel 

and replace this -

buildscript {
    repositories {
        mavenCentral()
        jcenter()
    }
}

with this -

buildscript {
    repositories {
        google()
        mavenCentral()
        jcenter()
    }
}


And replace this - 

allprojects {
    repositories {
        mavenCentral();
        jcenter()
    }
}


With this -

allprojects {
    repositories {
        google()
        mavenCentral();
        jcenter()
    }
}



Now - Click on “Sync Now”

If you again face this issue - 

A problem occurred evaluating root project 'android'. > Could not find method google() for arguments [] on repository container of type org.gradle.api.internal.artifacts.dsl.DefaultRepositoryHandler.


To resolve this issue add this line in your gradel file -

dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
    }


If you are having this issue in react native app. Please use this below lines in your gradel file -


buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
    }
}
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        google()
    }
}




Make sure to sync your project after doing all this. This will resolve your issue.

iPhone XR / XS / XS Max CSS media queries

Handling the Notch on iPhone X / XR / XS / XS Max OR iPhone media queries for responsive design  -

Media queries are very useful to modify your website or hybrid apps depending on a device resolution/type. This is very important to manage resolution in different devices. It help us to present batter view of app/website to users. Below are the examples for iPhone XR / XS / XS Max CSS media queries -


/* Apple iPhone XR 1792x828px at 326ppi Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

/* Apple iPhone XS 2436x1125px at 458ppi Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

/* Apple iPhone XS Max 2688x1242px at 458ppi Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }


Below are the examples for iPhone X / 8 / 8 Plus CSS media queries -

/* Apple iPhone X Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

/* Apple iPhone 8 Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

/* Apple iPhone 8 Plus Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }



Note : If you are looking for a specific orientation. Follow below rules -

For portrait orientation add below rule :

    and (orientation : portrait) 


For landscape orientation add below rule :

    and (orientation : landscape) 



Now use above media query in your project. It helps me a lot. If you have any query please post in a comment. 

For other all Media Queries please check this link - https://allexperts16.blogspot.com/2018/06/media-queries-for-standard-devices.html

It has Media Queries for - iPads, iPad 3, iPhone 4, iPhone 5, iPhone 6, iPhone 6+, Samsung Galaxy S3, Samsung Galaxy S4, Samsung Galaxy S5, and many more. 

How to remove white space from iPhone X in ionic / Cordova

Hey all,

Please check below image in this you can find this issue -

Finally, I found the solution to this problem. It saves a lot of time. Now UI is proper of my app. Please run below command in your project -

First uninstall "statusbar" old version plugin by using this command -

$ ionic cordova plugin rm cordova-plugin-statusbar

Now add the new version of this plugin by using this command -

$ ionic cordova plugin add cordova-plugin-statusbar

$ npm install --save @ionic-native/status-bar

Basically, what we did, We just removed the plugin and added new updated plugin of "Status Bar". This solves my problem. Please check this image -

Steps for ionic soluion :

$ ionic cordova plugin rm cordova-plugin-statusbar

$ ionic cordova plugin add cordova-plugin-statusbar

$ npm install --save @ionic-native/status-bar

Steps for Cordova solution :

$ cordova plugin rm cordova-plugin-statusbar

$ cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git