SafeAreaView TW styles not applied

[theblondealex]

Nativewind is setup correctly as is working on all other react components except SafeAreaView, see code below

import { View, Text, SafeAreaView, TouchableOpacity } from "react-native";

const HomeScreen = () => {
  return (
    <SafeAreaView
      // style={{ backgroundColor: "blue", height: "100%" }}
      className=" bg-blue-500 h-screen"
    >
      <View className="">
        {/* title */}
        <View>
          <Text className="text-center mt-12 text-4xl font-bold">Test</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};
export default HomeScreen;

the TW styles are working on the View and Text components, however the SafeAreaView component/wrrapper they are not working, changing it to just a View works and the TW styles applied work however not as SafeAreaView, it is not an issue with safeareaview as you can see the commented out native inline styles, these work on the safeareaview.

Here are some setup information

"tailwindcss": "^3.3.2"
"nativewind": "4.0.11",
"expo": "^49.0.0",

see two images for before and after appying the SafeAreaView the bg is removed back to white

[GustavoBonfimS]

0738629

Apparently SafeAreaView will be supported in a future release.

[theblondealex]

Fantastic just seen the push after this was posted, Appreiciate the work @marklawlor

[PriyobrotoKar]

I am still facing this exact same issue. The SafeAreaView can be styled with native styling using the style prop but the nativewind's classes aren't working.
Edit: I am facing this issue when rendering the SafeAreaView in Expo's Tab navigation. It's working as expected in the normal Stack navigation.

I am currently using:

    "nativewind": "^4.0.36",
    "tailwindcss": "^3.4.1" ,
    "expo": "~50.0.13"

[pedrohamarques]

I am still facing this exact same issue. The SafeAreaView can be styled with native styling using the style prop but the nativewind's classes aren't working. Edit: I am facing this issue when rendering the SafeAreaView in Expo's Tab navigation. It's working as expected in the normal Stack navigation.

I am currently using:

    "nativewind": "^4.0.36",
    "tailwindcss": "^3.4.1" ,
    "expo": "~50.0.13"

I'm facing the same problem with TouchableOpacity.

    "nativewind": "4.0.1",
    "tailwindcss": "^3.4.3" ,
    "expo": "~50.0.14"

[PriyobrotoKar]

I am still facing this exact same issue. The SafeAreaView can be styled with native styling using the style prop but the nativewind's classes aren't working. Edit: I am facing this issue when rendering the SafeAreaView in Expo's Tab navigation. It's working as expected in the normal Stack navigation.
I am currently using:

    "nativewind": "^4.0.36",
    "tailwindcss": "^3.4.1" ,
    "expo": "~50.0.13"

I'm facing the same problem with TouchableOpacity.

    "nativewind": "4.0.1",
    "tailwindcss": "^3.4.3" ,
    "expo": "~50.0.14"

@pedrohamarques try upgrading nativewind to version 4.0.36

[thienguen]

I am still facing this exact same issue. The SafeAreaView can be styled with native styling using the style prop but the nativewind's classes aren't working. Edit: I am facing this issue when rendering the SafeAreaView in Expo's Tab navigation. It's working as expected in the normal Stack navigation.

I am currently using:

    "nativewind": "^4.0.36",
    "tailwindcss": "^3.4.1" ,
    "expo": "~50.0.13"

Did you find a work around or has it been fixed, currently facing the same problem with not-so-different versioning.

[pitops]

Why is this closed? Its still not working

[darknight1983]

I am having this same issue. Whats really weird to me is that it seems to be working fine in some cases. Check out this Youtube video. I know that I configured Nativewind/Tailwindcss correct but Im still having issues.

[OgDev-01]

This issues should be opened as it has not been fixed for the safeAreaView styling

[Klerith]

I know this is not a permanent solution, however, you can use the SafeAreaView from react-native package and works

import { SafeAreaView } from 'react-native';

Instead of

import { SafeAreaView } from 'react-native-safe-area-context';

[pitops]

@Klerith thats not even a suggestion.

The real suggestion is to just use style={{}}

[OgDev-01]

Here is what i did as a walk around

import type { SafeAreaViewProps } from "react-native-safe-area-context";
import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";

import { useThemeConfig } from "@/core/hooks/use-theme-config";

import colors from "../colors";

export const SafeAreaView = ({ children, ...props }: SafeAreaViewProps) => {
  const theme = useThemeConfig();
  return (
    <RNSafeAreaView
      // eslint-disable-next-line react-native/no-inline-styles
      style={{
        backgroundColor: theme.dark ? colors.blue.DEFAULT : colors.white,
        flex: 1,
      }}
      {...props}
    >
      {children}
    </RNSafeAreaView>
  );
};

My use case was around adding inline styles for dark and light mode... But the key thing here is to make it reuseable. I don't think you want to add too many styles to a SafeAreaView than flexing it and adding colors.

[luffy-taro]

    "expo": "~51.0.36",
    "nativewind": "4.1.10",
    "tailwindcss": "^3.4.13"

Similar issue with nativewind 4.1.10, similar issue with pseudo-classes like focus on <View> component. I think both things work in nativewind 2

[ScreamZ]

Just add

import { cssInterop } from "nativewind";

cssInterop(SafeAreaView, { className: "style" });

In the root layout in the meantime