Inconsistencies between on how the styles are applied in native and web

Bug description There are inconsistencies with the way the styles are applied for web and for mobile.

To Reproduce Steps to reproduce the behavior:

1. Create a new project that includes nativewind (v2.0.9 in my case)
2. Create a component that wraps (inside a styled View) different text components. Example code:

import { Text, TextInput, View } from 'react-native'
import { styled } from 'nativewind'

const StyledView = styled(View)
const StyledText = styled(Text)

export function LoginScreen() {
  return (
    <StyledView className="gap-3 bg-red-100 text-center">
      <StyledText>First text</StyledText>
      <StyledText>Another text</StyledText>
      <StyledText>Last text</StyledText>
    </StyledView>
  )
}

1. Set up the className to “text-center” for the styled view
2. See the differences between native and web versions.
3. If the className “text-center” is set to one of the StyledText (instead of the StyledView), it will be centered on android and on web. Example code:

      <StyledText className="text-center">
        This text has className=&quot;text-center&quot;
      </StyledText>

Expected behavior The style should be the same in all platforms. It should be “propagated” the same way in web and in android. Having differences in how the style is applied makes the cross-platform development much more tedious.

Expo Snack The issue doesn’t seem reproducible with Expo Snack, but at the same time some styles (background color and gap) are not being applied on any version there, but they do in my local machine. Check the snack here.

Screenshots Web:

Android:

Additional context I am using Tailwind (Nativewind) with Solito (expo React Native)

[marklawlor]

Just wanted to add, I’m am actively thinking about ways to improve the developer experience around this issue. I believe its possible to make an editor/eslint plugin that warns a user when they use a className incorrectly or in a non-cross platform manner - I just need to learn a bit more about Typescript’s compiler API.

[marklawlor]

There is no RN library that I know of that simulates web complete style inheritance in React Native. I don’t believe Dripsy has any custom inheritance logic?