react-native-safe-area-context VS react-native-modal

If you haven't solved your issue yet, give this a go https://github.com/th3rdwave/react-native-safe-area-context Better to use their hook than the safeareaview component they provide, use that hook and use the values they provide as padding for your root view. This is more of a plaster solution to your problem because the navigation bar should not be displaying over the content but I'd need more context to help you with the issue.

Link to package: https://github.com/th3rdwave/react-native-safe-area-context

I looked up where it was found within my modules and came up with a java and kotlin file (couldn't find the java one). I made sure that my json-server was active and connected along with there being no syntax errors.

react-native-safe-area-context is much a better alternative, it's a native implementation meaning you'd always get correct values from what the OS provides without brittle logic based on checking screen size, and it also supports Android & Web in addition to iOS.

Not exactly an answer to your question, but according to a comment on one of the recent issues on GitHub, a more popular alternative would be react-native-safe-area-context's initialWindowMetrics (reference)

My app uses React Navigation, which recommends using react-native-safe-area-context. Is it technically a problem to wrap every screen with SafeAreaView in place of a View tag?

To use a cross-platform solution to handle safe areas on notch devices, there is a library called react-native-safe-area-context. It provides a flexible API to handle safe area insets in JS and works on iOS, Android, and Web.

I posted in the other thread, but if you want the same behavior as on iOS, you need to drop down to native code and tell Android's window manager to layout the app "edge to edge" and make the Android system navigation bar transparent. Then you can use something like react-native-safe-area-context to get the correct bottom inset and add it as a padding.

I'm using react-native-modal