![]() ![]() ![]() Use SafeAreaInsetsContext.Consumer instead. NOTE: This value can be null or out of date as it is computed when the native module is created. Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates. You may need to add it in other places like the root of modals and routes when using react-native-screens. You should add SafeAreaProvider in your app root component. Use this if you need more control over how insets are applied. ![]() UseSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. ![]() It offers better performance by applying insets natively and avoids flickers that can happen with the other JS based consumers. This is a regular View with insets applied as extra padding or margin. SafeAreaView is the preferred way to consume insets. Values are always relative to a provider and not to these components. ConsumersĬonsumers are components and hooks that allow using inset values provided by the nearest parent Provider. Usually you will have one provider at the top of your app. This means that if this view overlaps with any system elements (status bar, notches, etc.) these values will be provided to descendent consumers. The SafeAreaProvider component is a View from where insets provided by Consumers are relative to. This library has 2 important concepts, if you are familiar with React Context this is very similar. You will need to be on 4.4.0 and react-native 0.70+. Note that there will be breaking changes and only the latest version of react-native will be supported. This library currently has experimental support for the new react-native architecture. You then need to link the native parts of the library for the platforms you are using. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |