Ionic tab bar overlaps home button (iPhone X - iOS 11)

You should be able to apply the same principle outlined in this answer to the Ionic v1 footer, i.e.

.bar-footer {
    margin-bottom: constant(safe-area-inset-bottom);
}

(or something similar - I haven't tested this)

For an Ionic1 project, I found that targeting the tab-nav did the trick.

.tab-nav {
    margin-bottom: constant(safe-area-inset-bottom);
}

For an Ionic 4 project, this would be:
app.scss

body {
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: env(safe-area-inset-bottom);
}

env is for more recent iOS11 versions, and constant is for older ones.