react-native-safe-area-context VS react-native-elements

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.

Once we've set up the storage mechanism, building an email and password sign in flow becomes pretty straight forward. Install react-native-elements to get some nice cross platform button and input fields:

Some that also come up are: * https://github.com/akveo/react-native-ui-kitten * https://github.com/draftbit/react-native-jigsaw/tree/master/packages/ui * https://github.com/callstack/react-native-paper * https://github.com/GeekyAnts/NativeBase * https://github.com/react-native-elements/react-native-elements

React Native Elements provides an all-in-one UI kit for creating a cross-platform application in React Native. It has over 23k stars on Github.

React Native Elements

Link

CSS-based UI libs don't make sense on mobile; your new options include NativeBase, React Native Elements and others). Some web-based UI libs do have RN siblings though - such as React Native Material and React Native Paper (for Material-UI), and tailwind-rn (for Tailwind). This just means new decisions to make, some learning, and new paradigms for how to use the new libs.

Github Documentation Stars ⭐ +22.6k

I have started using React Native Elements (https://reactnativeelements.com) for a new project.