Stack Overflow
Stack Overflow

Questions tagged [safeareaview]

SafeAreaView is a React Native component which helps you avoid challenging display edges, like the iPhone X notch.

48 questions
28
votes
3 answers

What are the differences between different implementations of SafeAreaView?

A component called SafeAreaView is exported by react-native, react-navigation, react-native-safe-area-context and react-native-safe-area-view. What are the differences and which one should I use in which cases?
Sampo
  • 4,308
  • 6
  • 35
  • 51
17
votes
3 answers

View with absolute position in SafeAreaView in React Native

I need to place a with position: 'absolute' so it can overlay another view below. I want this not to be behind the status bar in iOS, so I've put everything inside a . Unfortunately, the absolute position seems to be relative to…
jdanthinne
  • 337
  • 1
  • 2
  • 9
11
votes
3 answers

Best order for KeyboardAvoidingView, SafeAreaView and ScrollView

I use react native to create a mobile app. I handle keyboard position in my screens by using KeyboardAvoidingView, SafeAreaView and ScrollView. I use this order to manage Keyboard position :
Khaled Boussoffara
  • 1,567
  • 2
  • 25
  • 53
9
votes
2 answers

Make UITableView ignore Safe Area

I have a TableView inside a ViewController. I made the TableView stretch to the View SuperMargings (with constraints) and disabled all SafeArea Inset options but my TableView is still under the SafeArea when I run my project. How can I make my…
helloimbrando
  • 307
  • 2
  • 13
8
votes
3 answers

Can't Wrap Navigator in SafeAreaView

When running the app on the iPhone X simulator the Material Top Tab Navigator cuts into the notch and bottom button. To fix this I have tried to implement the SafeAreaView before applying the App Container and to wrap each individual screen in…
kiwikodes
  • 569
  • 8
  • 14
7
votes
8 answers

React Native Tab Bar white space under tabs

I am using a tab bar navigator with SafeAreaView. If I comment out the tab bar nav the parent view covers the entire screen. However when I add a Tab bar it shows a small white view under the tab bar section. const App = () => { return ( …
mKane
  • 932
  • 13
  • 30
6
votes
1 answer

Should I always use safeAreaView in react native?

I know that I always need to use to keep my content in the correct place of the screen in iOS. Even I'm build an app just for Android, seems there isn't problem use , in case of I want to build the same app for the iOS…
Henrique
  • 362
  • 1
  • 5
  • 13
5
votes
0 answers

ReactNative - invariant violation: requireNativeComponent: "RNCSafeareview" was not found in the UI Manager

I have created a react native package with expo-bare-workflow. I have also added the packages like, npm install --save react-navigation npm install --save react-native-gesture-handler npm install --save react-navigation-stack npm install --save…
Jay Mungara
  • 6,663
  • 2
  • 27
  • 49
5
votes
2 answers

How to modify the padding in SafeAreaView?

I am trying to position element in the left-upper corner of the screen (there is some margin around). Because of the notch on the iPhone X I am using SafeAreaView. Unfortunately the SafeAreaView padding is enormous, it goes way out of the status bar…
Michal
  • 459
  • 2
  • 7
  • 25
4
votes
1 answer

The SafeAreaView causes weird gap on screen

I'm starting to get some weird gaps on my screens in my React Native application. I have simplified a screen so you see the issue here:
Simon Degn
  • 901
  • 1
  • 12
  • 40
4
votes
1 answer

SafeArea color of bottom tab in dark mode cannot be changed

I have been stuck in this issue since yesterday and I cannot find a solution. I have been trying to adjust the color of safeArea in iPhone X, it's working well on the top, and in the bottom as well for screens with no tab, however, in screens with…
user9559590
  • 103
  • 1
  • 8
3
votes
3 answers

Is there are way to add two different color Iphone x SafeArea on Flutter

I would like to know is there any way to add two different colors to iPhone X SafeArea? On React Native this can be fixed by adding two SafeAreaView. Does anyone know how to fix this one on flutter? Thanks @override Widget build(BuildContext…
Laksitha Kumara
  • 49
  • 1
  • 2
  • 11
3
votes
3 answers

How to fix this warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

When I use FlatList component inside ScrollView I see a warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. Before and after FlatList I use a…
Тимур
  • 31
  • 1
  • 1
  • 2
3
votes
0 answers

How to remove top margin from SafeViewArea | React Native | iPhoneX

I need to use SafeViewArea for iPhoneX, but when i have putted SafeViewArea then some unwanted extra margin from top is showing. My Code snippet - render () { return (
Shoeb Siddique
  • 2,805
  • 1
  • 22
  • 42
2
votes
1 answer

react-native-reanimated v3 flickers after expo update to SDK 49 - SAFE AREA VIEW

I have just updated my React Native app to the latest version of Expo SDK. The app uses native code and dev clients. As part of the update process, I deleted the iOS and android folders to ensure a clean installation. During the Expo update,…
Niccolò Caselli
  • 783
  • 2
  • 10
  • 28
1
2 3 4