Implementation the four safe area inset values

[vincentbasp]

Do you want to request a feature or report a bug?

request a feature

What is the current behavior?

When integrating a WebView component on mobile applications, Snackbars is cropped. Below you will find a picture. It is essential to implement safe areas by default to prevent display issues. We attempted to reposition the Snackbars by overriding the styles, but this approach does not seem to work as expected.

To address this issue, we have access to the following four safe area inset variables:

env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

Here is the code snippet we used to attempt repositioning the Snackbars:

const getSafeAreaStyle = (position: ToastPosition) => {
    if (['top-left', 'top-right', 'top-center'].includes(position)) {
        return css`
            --safe-area-inset-top: env(safe-area-inset-top);
            @media only screen and (max-width: 480px) {
                top: calc(8px + var(--safe-area-inset-top));
            }
            top: calc(8px + var(--safe-area-inset-top));
        `
    }
    return css`
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        @media only screen and (max-width: 480px) {
            bottom: calc(8px + var(--safe-area-inset-bottom));
        }
        bottom: calc(8px + var(--safe-area-inset-bottom));
    `
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior? We kindly request the development team to consider implementing native safe area support for Snackbars in the library. This enhancement will ensure that Snackbars are automatically positioned within the safe areas on mobile devices, providing a more user-friendly and visually consistent experience.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? We are using React 18.

[idrissakhi]

+1