SafeAreaView doesn't respect padding property in style

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
      Memory: 34.00 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.7.1 - ~/.nvm/versions/node/v9.7.1/bin/node
      Yarn: 1.2.1 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v9.7.1/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 21.1.2, 22.0.1, 23.0.1, 23.0.3, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.2, 28.0.3
        API Levels: 17, 18, 19, 22, 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A254a - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0 => 16.6.0
      react-native: ^0.57.3 => 0.57.3
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Applying padding to SafeAreaView's style doesn't work.

Reproducible Demo

https://snack.expo.io/@danielmartin/c2FmZW

renders nested content and automatically applies paddings

Seems like intended behaviour from the docs. Try adding padding to your view inside the SafeAreaView instead.

@bartolkaruza

Thanks for the response, @bartolkaruza. I was wondering if it would be better if the padding applied by the consumer was added to the safe area one, instead of being overwritten. Thinking about it, the way the SafeAreaView component achieves its behaviour is more an implementation detail.

If the padding is added to the already in place padding that the SafeAreaView adds automatically, the next opened issue will be from someone asking why the padding value is not exactly the number of pixels specified by the style. Maybe someone would expect to be able to override the padding by using the padding style for some cases, which wouldn't work... Are the complexity and additional discussion worth it when the solution is putting in a containing view on which you can apply all the styles you want?

Perhaps a note in the docs specifying more clearly that the padding style property is ignored would save the next person some time? Maybe a warning message could take it even a step further. Feel free to open a PR for that if you have the time.

I wanted to share my thoughts regarding this because I found the current approach not ideal. I discussed this internally before creating the issue and people agreed with me that this was confusing.

If someone uses SafeAreaView I expect them to know that it will define new bounds and that all style properties applied to it would work in base to those new bounds (otherwise they would have used a View in the first place). The fact that internally SafeAreaView uses padding to accomplish this it's just, IMO, an implementation detail that shouldn't concern the consumer.

I thought the additional discussion was worth it and that's why I brought it up.

Adding a containing view is what we're doing now and it feels unnecessary, given that SafeAreaView already takes a View's style property. I also thought about the warning message, there are components out there that filter out forbidden properties and warn about their usage in dev mode, this could rise awareness about this particularity, but it wouldn't solve the underlying issue.

To add another argument, in native iOS you can create a constraint relative to the safeAreaLayoutGuide without having to create a containing view to do it.

I would love to find time to help improving this somehow, I just wanted to know what people think about it first!

Sorry but I'm a bit confused about this issue.

I have applied padding to a SafeAreaView component. In Android it is applied, in iOS it isn't. What is the reason, and what is the solution?

Thanks.

@esr360

@esr360 Until this issue is solved, you need to add another view inside the SafeAreaView and apply your padding there, because SafeAreaView uses the padding style prop to implement its behaviour, overriding the one you pass to it.

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Just stumbled across this issue myself what a strange waste of my time trying to figure out what I was doing wrong, only to be surprised.

sad to bump into this unfixed problem :(

6 years until now

My approach maybe will help you:

Create simple custom container

 <View style={{  paddingTop: Platform.OS === "android"
      ? Constants?.statusBarHeight + 10
      : Constants?.statusBarHeight,}}>
 ...you code 
 </View>

Based on how popular silently ignoring and overriding a style attribute has been with the react-native core team & community for the last six years, I think it would be worth rolling out this feature to more components.

Many components could benefit from the functionality and expressiveness SafeAreaView gives developers who would like to be able to safely store integer values inside of style attributes without the unwanted side-effect of applying layout changes on some platforms.

This works for me!

Add a View inside SafeAreaView and provide styling separately, as shown below.

import { Platform, SafeAreaView, StyleSheet, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import HomeNavigator from "./App/Navigations/HomeNavigator";

export default function App() {
  return (
    <SafeAreaView style={styles.safeContainer}>
      <View style={styles.container}>
        <NavigationContainer>
          <HomeNavigator />
        </NavigationContainer>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeContainer: {
    flex: 1,
    backgroundColor: "#fff",
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS == "android" ? 20 : 0,
    paddingRight: 20,
    paddingLeft: 20,
  },
});

@shivang98

as a beginner with react native, I had the same problem.... Thank you @shivang98

@a-eid

It's been 4.5 years since we merged the PR that added the link to this issue to the official docs (react/react-native-website#1847).

I wanted to celebrate almost 5 years of getting notifications about this with my current solution to the problem: don't use SafeAreaView.

Unless you have a very simple app with basic routing (a hello world demo), you should go for flexibility and use useSafeAreaInsets from https://github.com/th3rdwave/react-native-safe-area-context (as mentioned by @a-eid and @magom001). It should help you avoid weird components wrapping when using tabs or drawers, background color issues and animation shenanigans.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

This issue was closed because it has been stalled for 7 days with no activity.

Instead of using padding propertly use. paddingHorizontal and paddingVertical. it would work

Navigation Menu

Repository navigation

SafeAreaView doesn't respect `padding` property in style #22211

Environment

Description

Reproducible Demo

41 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SafeAreaView doesn't respect padding property in style #22211

Description

Environment

Description

Reproducible Demo

Activity

bartolkaruza commented on Nov 9, 2018

dani-mp commented on Nov 9, 2018

bartolkaruza commented on Nov 9, 2018

dani-mp commented on Nov 9, 2018

esr360 commented on May 1, 2019

dani-mp commented on May 1, 2019

stale commented on Aug 4, 2019

41 remaining items

github-actions commented on Jul 24, 2023

NorseGaud commented on Nov 4, 2023

brunaporato commented on Feb 8, 2024

Mahmoudz11 commented on Feb 17, 2024

andshonia commented on Apr 22, 2024

DDunc commented on May 16, 2024

shivang98 commented on Aug 15, 2024

Kipperlenny commented on Oct 14, 2024

aldebout commented on Oct 15, 2024

react-native-bot commented on Apr 14, 2025

react-native-bot commented on Apr 21, 2025

SamarthKadam commented on May 8, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

SafeAreaView doesn't respect `padding` property in style #22211