Skip to content

Safe-area insets utility classes not working #234

@XHanL

Description

@XHanL

Describe the bug
nativewind v5 safearea is not working with className but working with style.

The className doesn’t work:

import { View } from 'react-native';

export default function () {
  return (
    <View className="pt-safe flex-1">
      <View className="flex-1 bg-green-200" />
    </View>
  );
}

Only style works:

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

export default function () {
  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        paddingTop: insets.top,
        flex: 1,
      }}>
      <View className="flex-1 bg-green-200" />
    </View>
  );
}

Reproduction

Expected behavior
The className pt-safe should padding top safearea.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions