ring class TextInput android layout issues on focus

[ionkorol]

What happened?

On android when adding ring class on the TextInput moves the text down on focus

Steps to Reproduce

1. Add ring-3 on TextInput on android and focus

Snack or Repository Link (Optional)

No response

Uniwind version

uniwind-pro@1.2.1

React Native Version

0.83.4

Platforms

Android

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none
• I am a Uniwind Pro user

[jpudysz]

Hey!

I tried to reproduce your issue in different ways, but with no luck.

Can you copy and paste all your classNames from input and put them into useResolveClassNames hook eg.:

import { useResolveClassNames } from 'uniwind'

// example, use your classNames
const classNames = useResolveClassNames('ring-3 rounded-lg border border-blue-500 px-4 py-3 text-base text-black')
 
console.log(classNames) // <- will output styles

And then copy and paste all the resolved styles as inline styles, removing the classNames. Do you see the same behavior?

[ionkorol]

Here is a repro repo.
https://github.com/ionkorol/expo-uniwind-ring-bug

While trying to reproduce it with in a new repo I narrowed it down to tailwind-merge usage.
Happens only when used with tailwind-merge.

[Brentlok]

Hey!

It has nothing to do with Uniwind, we simply convert classes/css to RN's style objects

Something like this also causes layout issues on android:

export default function HomeScreen() {
  const [isFocused, setIsFocused] = useState(false)

  return (
    <View className="flex-1 bg-background max-w-sm mx-auto w-full p-4 pt-16 gap-4">
      <TextInput placeholder="Type something..."
        style={{
          "boxShadow": isFocused ? "0px 0px 0px 3px #2b7fff80" : undefined,
          "paddingVertical": 4
        }}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
    </View>
  );
}

This boxShadow is what ring-3 ring-blue-500/50 produces

So looks like it's issue in React Native