Support for dynamic island on iOS?

[JeffreyVanelderenACA]

Wondering if we can add support for dynamic islands on iOS? Or does this lib already contain such a feature? Currently having some issues with notifications being displayed behind the dynamic island. I'm checking if I can get the required insets.top via react-native-safe-area-context to add the extra margin on top of the notification.

[NailliwFerreir]

Thanks, this worked for me.
An example of how I used it :)

import { showMessage } from 'react-native-flash-message'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

export const useFlashMessage = () => {
const insets = useSafeAreaInsets()

const showErrorMessage = (message = 'Error!') => {
showMessage({
message,
type: 'danger',
autoHide: true,
duration: 4000,
statusBarHeight: insets.top,
})
}

const showSuccessMessage = (message = 'Success!') => {
showMessage({
message,
type: 'success',
duration: 4000,
autoHide: true,
statusBarHeight: insets.top,
})
}

return { showErrorMessage, showSuccessMessage }
}

[arnekolja]

Good workaround. I propose using initialWindowMetrics instead, so it can also be used outside of components. I needed this because I have a simple helper function to show an error message as direct export from a ts file.

Digging deeper I found out that it is currently working on an iPhone 15 Pro Max without this workaround, but not on the 16 Pro Max. That is because the Dynamic Island's height was changed and the library used for getting the height (react-native-iphone-screen-helper) has not been adapted to this yet. Instead it is just switching over a given list of known heights and this list is outdated.

[arnekolja]

Maybe react-native-flash-message should switch to react-native-safe-area-context. It wouldn't really add up in dependencies, as this one might be a dependency of almost every single rn project anyway 😄