TextInput placeholder breaking style

[Saraivinha1703]

Hey guys, so I've been fighting with react-native-css's TextInput and I was able to resize the text input which I think was to big for the screen, and resize the content to fit in the box. However whenever I click on the text input, the placeholder shifts and gets cut, breaking the style and it does not go back, is there a way to fix the placeholder or resize the text input in a proper way?

First render:

on click:

the content looks fine (it still does not respect the padding, but the text is readable), the placeholder shifts

Here is the code of my component:

"use client";

import { useState } from "react";
import { cn } from "@mayom/ui/utils";
import { Icon, Lucide } from "../../icons";
import {
  Pressable,
  TextInput,
  TextInputProps,
  View,
} from "../../native-components";

type InputProps = TextInputProps & {
  multiline?: boolean;
  disabled?: boolean;
  invalid?: boolean;
  secret?: boolean;
  icon?: React.ReactNode;
};

export function Input({
  secret = false,
  multiline = false,
  disabled = false,
  invalid = false,
  icon,
  className,
  ...props
}: InputProps) {
  const [secure, setSecure] = useState<boolean>(secret);

  return (
    <View
      className={cn(
        "group flex flex-row items-center shrink relative",
        className,
      )}
    >
      {icon}
      <TextInput
        readOnly={disabled}
        aria-disabled={disabled}
        multiline={multiline}
        selectTextOnFocus={!disabled}
        secureTextEntry={secure}
        editable={!disabled}
        className={cn(
          "flex grow border border-border focus:outline-none focus:ring focus:ring-primary placeholder-input rounded-lg min-w-0 bg-transparent px-3 py-2 transition-colors duration-200 text-foreground android:h-9 android:p-0 android:leading-3",
          disabled && "opacity-50 cursor-not-allowed",
          invalid &&
            "border-destructive text-destructive placeholder-destructive/40 bg-destructive/10",
          icon && "pl-10",
        )}
        {...props}
      />
      {secret && (
        <Pressable
          className={cn(
            "absolute right-2 top-0.8 flex items-center justify-center size-7 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 active:bg-accent/20 active:translate-y-px hover:bg-accent/50 transition-colors duration-200",
            invalid && "focus-visible:ring-destructive/70",
          )}
          onPress={() => setSecure(!secure)}
        >
          {secure ? (
            <Icon
              icon={Lucide}
              name="eye"
              size={22}
              className={cn("text-input", invalid && "text-destructive")}
            />
          ) : (
            <Icon
              icon={Lucide}
              name="eye-closed"
              size={22}
              className={cn("text-input", invalid && "text-destructive")}
            />
          )}
        </Pressable>
      )}
    </View>
  );
}

[triadmoko]

Reproduction (related case: horizontal padding via className ignored)

We hit the same class of TextInput styling issues on NativeWind v5 + react-native-css (Expo 57).

Environment

• nativewind@5.0.0-preview.4
• react-native-css@3.0.7
• expo@~57.0.9
• Android / iOS (device or emulator)

Steps

1. Render a TextInput from react-native-css/components with horizontal padding only via Tailwind classes, e.g. className="px-5 py-2.5 rounded-xl border ...".
2. Do not set paddingHorizontal via the style prop.
3. Run on a native platform (web looks fine).
4. Focus the field and type text.

Expected
Horizontal padding from px-* is applied; text/placeholder are inset from the left border.

Actual

• Text and placeholder sit flush against the left border as if px-* were not applied.
• Changing px-3 → px-5 → px-6 in className has no visible effect on native.
• Applying the same inset via style={{ paddingHorizontal: 16 }} works immediately.

Minimal example

import { TextInput } from "react-native-css/components";

// Broken on native: px-5 appears ignored
<TextInput
  className="min-h-12 w-full rounded-xl border px-5 py-2.5 text-base"
  placeholder="email or username"
/>

// Works on native
<TextInput
  className="min-h-12 w-full rounded-xl border py-2.5 text-base"
  style={{ paddingHorizontal: 16, paddingVertical: 10 }}
  placeholder="email or username"
/>

Workaround we use
Keep visual styles on className, but set paddingHorizontal / paddingVertical (and special cases like paddingRight for password toggles) through style on native.

Happy to provide a minimal repro repo if that helps — this seems related to the placeholder/layout breakage described above.