`topoffset` does not respect Safe Area on iOS (default value no longer appropriate for Dynamic Island, aka iPhone 14 Pro)

Describe the bug The default value for topOffset is 40, when really it should respect and read from the Safe Area. For reference, the notch on iPhone 13 and earlier was 47pt high, but the SafeArea on the new iPhone 14 Pro with Dynamic Island is 59pt high.

I can’t find any part of the library’s code that takes Safe Area into consideration, but maybe I’m missing it. No matter the implementation: Toasts now show under or bordering on the physical elements on the iPhone 14 Pro, and may intrude on the Safe Area of other devices by default.

Steps to reproduce Steps to reproduce the behavior:

1. Show a Toast with custom layout/type on an iPhone 14 Pro (only tested on physical device w/ custom layout, but presumably same for simulator and same without any custom layout/type specified).

Expected behavior Toast message avoids the physical aspects of the phone and displays below the Safe Area. (I tend to use some minimum offset when safeArea.bottom == 0.)

Screenshots Difficult to screenshot because the Dynamic Island/notch are not included in device screenshots.

Code sample Any should work. Please let me know if you cannot repro easily/reliably on an iPhone 14 Pro simulator/device and I can take the time to create one.

Environment (please complete the following information):

• OS: iOS
• react-native-toast-message version: 2.1.5
• react-native version v0.69.4

Additional context Add any other context about the problem here.

[Tucker2015]

You can change topOffset default in

/node_modules/react-native-toast-message/lib/src/useToast.js

I have set it at 55.

[ericledonge]

On my side, with an iPhone 14 Pro, the display spot is perfect, but I can’t see the borders (green or red, depending toast type). Any idea?