Repository navigation
SafeViewArea not working right #19400
Description
- I have reviewed the documentation
- I have searched existing issues
- [] I am using the latest React Native version
Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 9.4.0
Yarn: 1.5.1
npm: 6.0.0
Watchman: 4.9.0
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.3 => 0.54.3
Steps to Reproduce
I am using SafeViewArea for all screens in my app
My simple code
import React, { Component } from "react";
import { View, SafeAreaView } from "react-native";
class HomeEmptyCase extends React.Component<{}, {}> {
render() {
return (
<SafeAreaView
style={{ flex: 1, backgroundColor: "#49B95E" }}
forceInset={{ top: "always", horizontal: "never" }}
>
<View style={{ flex: 1, backgroundColor: "red" }} />
</SafeAreaView>
);
}
}
Expected Behavior
SafeAreaView works fine, the red area not cover status bar
Actual Behavior
Everything works fine on iPhone 6s, 6s plus, but it doesn't work for iPhone 5
Captured screen on iPhone 6s
Captured screen on iPhone 5
import { SafeAreaView } from "react-navigation" DID THE TRICK
When I use SafeAreaView from react-navigation, problem solved
I've test on iOS 11 for iPhone 6s, 6s plus. iOS 10 for iPhone 5
Looking for your help
Activity
react-native-bot commentedon May 23, 2018
It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?
If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the
No Templatelabel.ducNgbk commentedon May 23, 2018
Thank you, I did fill out based on your templete
timwangdev commentedon May 23, 2018
It's a known issue and there is a PR at #18534 .
react-native-bot commentedon May 26, 2018
If you are still encountering the issue described here, please open a new issue and make sure to fill out the Issue Template when doing so.