Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: android notch wrapper #3591

Closed
CrisPRuz opened this issue Dec 10, 2020 · 1 comment
Closed

feat: android notch wrapper #3591

CrisPRuz opened this issue Dec 10, 2020 · 1 comment

Comments

@CrisPRuz
Copy link
Contributor

CrisPRuz commented Dec 10, 2020

I'm submitting a ... (check one with "x")
[ ] bug report
[X] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
Some Android devices, such as Samsung Galaxy S10, have a cutout or notch (e.g. because of their front camera). However, there is any wrapper for cordova-plugin-android-notch that could be use in Ionic projects.

Expected behavior:

I have decide to develop a wrapper from the above cordova plugin and I would like to submit a PR with the code. For instance, It could be used to apply certain styles (e.g. modify css custom properties)

Steps to reproduce:

To test the wrapper, it is possible to do it using Ionic webpage examples and guidelines for setting up a project:

  1. Create a new Ionic project with Angular (Ionic webpage guidelines might be used).
  2. Install the cordova plugin in your project:
ionic cordova plugin add cordova-plugin-android-notch
  1. Install the wrapper
  2. Install Android Studio and configure its environmental variables following the guidelines.
  3. Set up a virtual device and its notch (unblock developer options in the device is needed).
  4. See Related code section to examples of use.

Related code:

  1. Import the dependency
import { AndroidNotch } from "@ionic-native/android-notch/ngx";
  1. Add it to your provides list at the module config
providers: [AndroidNotch] 
  1. Add it in the class you want to use it
constructor(private androidNotch: AndroidNotch) {}
  1. Wrapper use examples:
this.platform.ready().then(() => {
      this.androidNotch.hasCutout().then(
        (hasCutout: boolean) => console.log('hasCutout: ',hasCutout),
        (err: any) => console.error("Failed to get cutout", err)
      );

     this.androidNotch.getInsetTop().then(
        (px: number) => console.log('getInsetTop: ',px),
        (err: any) => console.error("Failed to get insets top:", err)
      );

      this.androidNotch.getInsetRight().then(
        (px: number) => console.log('getInsetRight: ',px),
        (err: any) => console.error("Failed to get insets right:", err)
      );

      this.androidNotch.getInsetBottom().then(
        (px: number) => console.log('getInsetBottom: ',px),
        (err: any) => console.error("Failed to get insets bottom:", err)
      );

      this.androidNotch.getInsetLeft().then(
        (px: number) => console.log('getInsetLeft: ', px),
        (err: any) => console.error("Failed to get insets left:", err)
      );
});

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):


Ionic:

   Ionic CLI : 6.12.2

Utility:

   cordova-res : 0.15.2
   native-run  : 1.3.0

System:

   NodeJS : v12.18.3
   npm    : 6.14.9

See submited PR.

@github-actions
Copy link

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue, please create a new issue and ensure the template is fully filled out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants