react-native-size-matters VS react-native-safe-area-context

use some of the responsive library like https://github.com/nirsky/react-native-size-matters and https://www.npmjs.com/package/react-native-responsive-screen so your screen will reflect on every screen size

Flex and React Native Size Matters.

You can check out this library: https://github.com/nirsky/react-native-size-matters inspect it and see how they achieve responsiveness :-)

Always use '%' sizing when possible. When it isn't possible, use https://github.com/nirsky/react-native-size-matters. Not a perfect solution, but the best one out there. I still try to find a better way than this lib.

`moderateScale` function also works, from https://github.com/nirsky/react-native-size-matters library.

Generally, you need to compute the font size to use based on the size of the screen. A lib like this can make it easy: https://github.com/nirsky/react-native-size-matters

When developing with React Native, you need to manually configure your app to look great on different screen sizes. This is a tedious job, so react-native-size-matters provides some simple tools that make scaling a lot easier. The idea is to design once on a standard mobile device with ~ 5 "screen and then just apply the utilities provided, so the artboard size in Sketch for the design is 320x568px.

I mostly get the job done with just flexbox, it's very powerful, as for the few cases where my layouts look huddled up or clip together, I use these functions to scale them to other screen sizes.

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.