React-native-web: Css provided to a component overridden by dynamically generated css

[jhaankit]

Each tag generates some dynamic class name, as ".css-someId".
In some scenario ".css-someId" overrides the provided css to a component in StyleSheet which represents in DOM as class name ".r-someId"

Below is the screenshot where .r-cqee49, .r-vw2c0b and .r-3i2nvb are overridden by .css-901oao.

.

Environment:
React Native for Web (version): 0.11.0 to 0.11.4
React (version): 16.8.6
Browser: Chrome, Firefox

[necolas]

What browser and an example please, as per https://github.com/necolas/react-native-web/blob/master/.github/ISSUE_TEMPLATE/bug.md

[jhaankit]

@necolas : Thanks.
I updated the Environment in my ticket.

code snippet:
AppText.js

const AppText = ({color, size, weight, children, style, ...inputProps}) => {
    return <Text style={[{
        fontFamily: "Roboto, sans-serif",
        color: color,
        fontSize: size,
        fontWeight: weight
    }, style]} {...inputProps}>{children}</Text>
}
AppText.defaultProps = {
    color : "#000",
    size  : 18,
    weight: "normal"
}
export default AppText

SomeComponent.js

<View>
      <AppText style={[styles.logo]}>some text</AppText>
</View>

const styles = StyleSheet.create({
    logo  : {
        fontSize  : 36,
        fontWeight: "bold"
    }
})

[jhaankit]

I further investigated and looks like issue is with 'react-native-vector-icons/FontAwesome'.
The css work perfectly after removing of Icon.

Note: I am not facing any issue with React Native for Web (version): 0.10.1

[necolas]

Interesting. If you can create a small test case on codesandbox that would be very helpful

[jhaankit]

Hello @necolas,
I tried to reproduce the issue in codesandbox, but not able to reproduce.
link: https://codesandbox.io/s/dazzling-wilbur-k7g7l

I also observed that css class names are different from my project.
In my project, class name pattern is '.css-someId' and '.r-someId'. (refer above screenshot)
But in codesandbox, class name pattern is '.css-propertyName-someId' and '.r-propertyName-someId'.

Thanks

[necolas]

That's a normal difference between dev and prod builds

[jaulz]

Same issue here... direct styles are lost after rerendering. I'm still trying to figure out what's happening in background.

[jaulz]

It seems that the styles are removed before it hits createElement and even in createElement the correct style tag is created... maybe it is not a react-native-web issue but instead a general react issue?

[jaulz]

Sorry for posting once again... it seems that the order of classes changes. See the following screenshots where the classes starting with r are suddenly behind. Though I could still not find out which piece of code changes the order since it does not seem to be the React rendering mechanism.

Before rerendering:

After rerendering:

[necolas]

What does "after rerendering" mean?

[jaulz]

@necolas for me it happens after I click on a button but in fact only for one specific button. This is what it makes so strange for me. Unfortunately, this handler causes quite a lot of changes which makes it difficult for me to track down what in detail the issue is. The order of classes in the class attribute by the way does not change but only the order of classes in the styles tab of the dev tools.

[steida]

Just small advice. It seems Chrome dev tools are unreliable for me sometimes. Firefox dev tools helped me a lot.

[jaulz]

@steida thanks for the hint. In Firefox it's unfortunately exactly the same. In both browsers I cannot see the detailed stylesheet that is generated.
@necolas do you know any way to see which stylesheet is generated at runtime? Then I could compare it before and after rerendering.

[necolas]

https://gist.github.com/necolas/8ee958917db65542784b60323ca6c4bc

[jhaankit]

@jaulz is that button click importing 'react-native-vector-icons' or 'react-native-elements' which internally uses 'react-native-vector-icons' ?
For me 'react-native-vector-icons' is causing problem.

[jaulz]

Actually it's included and used already before. Now I could compare the stylesheet before and after:

Before:

[stylesheet-group="0"] { }
html { text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { margin: 0px; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button, input::-webkit-search-cancel-button, input::-webkit-search-decoration, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; }
[stylesheet-group="0.1"] { }
:focus:not([data-focusvisible-polyfill]) { outline: none; }
[stylesheet-group="0.5"] { }
.css-reset-4rbku5 { background-color: rgba(0, 0, 0, 0); color: inherit; font: inherit; list-style: none; margin: 0px; text-align: inherit; text-decoration: none; }
.css-cursor-18t94o4 { cursor: pointer; }
[stylesheet-group="1"] { }
.css-view-1dbjc4n { -webkit-box-align: stretch; -webkit-box-direction: normal; -webkit-box-orient: vertical; align-items: stretch; border: 0px solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; z-index: 0; }
.css-text-901oao { border: 0px solid black; box-sizing: border-box; color: rgb(0, 0, 0); display: inline; font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; }
.css-textOneLine-bfa6kz { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.css-hitSlop-mjp8i1 { bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; z-index: -1; }
.css-accessibilityImage-9pa8cd { bottom: 0px; height: 100%; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; width: 100%; z-index: -1; }
.css-textinput-1cwyjr8 { -webkit-appearance: none; background-color: rgba(0, 0, 0, 0); border-radius: 0px; border: 0px solid black; box-sizing: border-box; font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; padding: 0px; resize: none; }
[stylesheet-group="2"] { }
.r-flex-13awgt0 { -webkit-box-flex: 1; flex: 1 1 0%; }
.r-margin-98ikmy { margin: 32px; }
.r-overflow-1udh08x { overflow: hidden; }
.r-margin-1064s9p { margin: 4px; }
.r-borderColor-42olwf { border-color: rgba(0, 0, 0, 0); }
.r-borderWidth-d045u9 { border-width: 2px; }
.r-margin-hwh8t1 { margin: 8px; }
.r-padding-tuq35u { padding: 4px; }
.r-margin-jgcjvd { margin: 10px; }
.r-overflow-bztko3 { overflow: visible; }
.r-borderStyle-1phboty { border-style: solid; }
.r-margin-1fdo3w0 { margin: 16px; }
.r-padding-edyy15 { padding: 8px; }
[stylesheet-group="2.1"] { }
.r-paddingHorizontal-ymttw5 { padding-left: 16px; padding-right: 16px; }
.r-paddingVertical-c2syf2 { padding-bottom: 13px; padding-top: 13px; }
.r-marginVertical-hrzydr { margin-bottom: 2px; margin-top: 2px; }
.r-paddingHorizontal-s1qlax { padding-left: 4px; padding-right: 4px; }
.r-marginVertical-1p6iasa { margin-bottom: 4px; margin-top: 4px; }
.r-paddingHorizontal-1e081e0 { padding-left: 12px; padding-right: 12px; }
.r-marginHorizontal-vlx1xi { margin-left: 10px; margin-right: 10px; }
.r-marginHorizontal-1ydw1k6 { margin-left: 16px; margin-right: 16px; }
.r-marginVertical-712mwr { margin-bottom: 9px; margin-top: 9px; }
[stylesheet-group="2.2"] { }
.r-pointerEvents-12vffkv > * { pointer-events: auto; }
.r-pointerEvents-12vffkv { pointer-events: none !important; }
.r-bottom-1p0dtai { bottom: 0px; }
.r-justifyContent-1777fci { -webkit-box-pack: center; justify-content: center; }
.r-left-1d2f490 { left: 0px; }
.r-position-u8s1d { position: absolute; }
.r-right-zchlnj { right: 0px; }
.r-top-ipm5af { top: 0px; }
.r-alignItems-1awozwy { -webkit-box-align: center; align-items: center; }
.r-height-1r8g8re { height: 36px; }
.r-width-1acpoxo { width: 36px; }
.r-animationDuration-17bb2tj { animation-duration: 0.75s; }
.r-animationIterationCount-1muvv40 { animation-iteration-count: infinite; }
.r-animationKeyframes-127358a { animation-name: r-animation-9p3sdl; }
@-webkit-keyframes r-animation-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes r-animation-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.r-animationTimingFunction-1ldzwu0 { animation-timing-function: linear; }
.r-pointerEvents-633pao { pointer-events: none !important; }
.r-pointerEvents-105ug2t { pointer-events: auto !important; }
.r-flexGrow-16y2uox { -webkit-box-flex: 1; flex-grow: 1; }
.r-zIndex-136ojw6 { z-index: 2; }
.r-WebkitOverflowScrolling-150rngu { }
.r-flexDirection-eqz5dr { -webkit-box-direction: normal; -webkit-box-orient: vertical; flex-direction: column; }
.r-flexShrink-1wbh5a2 { flex-shrink: 1; }
.r-overflowX-11yh6sk { overflow-x: hidden; }
.r-overflowY-1rnoaur { overflow-y: auto; }
.r-transform-1sncvnh { transform: translateZ(0px); }
.r-width-13qz1uu { width: 100%; }
.r-alignSelf-1kihuf0 { align-self: center; }
.r-maxWidth-1ge9hsw { max-width: 960px; }
.r-paddingLeft-1qhn6m8 { padding-left: 16px; }
.r-paddingTop-tskmnb { padding-top: 8px; }
.r-marginTop-1mnahxq { margin-top: 0px; }
.r-cursor-1loqt21 { cursor: pointer; }
.r-touchAction-1otgn73 { touch-action: manipulation; }
.r-flexDirection-18u37iz { -webkit-box-direction: normal; -webkit-box-orient: horizontal; flex-direction: row; }
.r-justifyContent-1wtj0ep { -webkit-box-pack: justify; justify-content: space-between; }
.r-height-eu3ka { height: 40px; }
.r-marginRight-88pszg { margin-right: 16px; }
.r-width-1aockid { width: 40px; }
.r-marginRight-1kb76zh { margin-right: 8px; }
.r-zIndex-184en5c { z-index: 1; }
.r-flexBasis-1mlwlqe { flex-basis: auto; }
.r-zIndex-417010 { z-index: 0; }
.r-backgroundColor-1niwhzg { background-color: rgba(0, 0, 0, 0); }
.r-backgroundPosition-vvn4in { background-position: center center; }
.r-backgroundRepeat-u6sd8q { background-repeat: no-repeat; }
.r-backgroundSize-4gszlv { background-size: cover; }
.r-height-1pi2tsx { height: 100%; }
.r-zIndex-1wyyakw { z-index: -1; }
.r-opacity-1g80hic { opacity: 0.8; }
.r-height-1iud8zs { height: 50px; }
.r-fontSize-adyw6z { font-size: 20px; }
.r-lineHeight-17rnw9f { line-height: 30px; }
.r-minHeight-1vsu8ta { min-height: 30px; }
.r-marginBottom-5oul0u { margin-bottom: 8px; }
.r-position-bnwqim { position: relative; }
.r-lineHeight-135wba7 { line-height: 24px; }
.r-minHeight-1ceczpf { min-height: 24px; }
.r-textAlignVertical-1vzi8xi { vertical-align: middle; }
.r-flexWrap-1w6e6rj { flex-wrap: wrap; }
.r-alignItems-1habvwh { -webkit-box-align: start; align-items: flex-start; }
.r-marginBottom-15zivkp { margin-bottom: 4px; }
.r-color-kw1s2c { color: rgba(0, 0, 0, 0.38); }
.r-fontSize-1enofrn { font-size: 12px; }
.r-height-1472mwg { height: 24px; }
.r-paddingLeft-f727ji { padding-left: 12px; }
.r-paddingTop-m611by { padding-top: 10px; }
.r-justifyContent-1h0z5md { -webkit-box-pack: start; justify-content: flex-start; }
.r-minHeight-1ii58gl { min-height: 34px; }
.r-position-1xcajam { position: fixed; }
.r-backgroundColor-14lw9ot { background-color: rgb(255, 255, 255); }
.r-boxShadow-1t0y4yq { box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px; }
.r-height-h0d30l { height: 28px; }
.r-width-1iww7jx { width: 28px; }
.r-paddingBottom-97e31f { padding-bottom: env(safe-area-inset-bottom); }
.r-paddingLeft-bv2aro { padding-left: env(safe-area-inset-left); }
.r-paddingRight-hxflta { padding-right: env(safe-area-inset-right); }
.r-paddingTop-10xqauy { padding-top: env(safe-area-inset-top); }
.r-borderRightWidth-13l2t4g { border-right-width: 1px; }
.r-paddingTop-wk8lta { padding-top: 0px; }
.r-height-7r4507 { height: 150px; }
.r-maxWidth-dnmrzs { max-width: 100%; }
.r-flexBasis-wvpojh { flex-basis: 80%; }
.r-fontSize-ubezar { font-size: 16px; }
.r-marginRight-3691iy { margin-right: 32px; }
.r-backgroundColor-1fu3zty { background-color: rgba(0, 0, 0, 0.12); }
.r-height-109y4c4 { height: 1px; }
.r-marginTop-14gqq1x { margin-top: 4px; }
.r-paddingRight-1pyaxff { padding-right: 8px; }
.r-textAlign-1ff274t { text-align: right; }
.r-alignSelf-1pz39u2 { align-self: stretch; }
.r-fontSize-1i10wst { font-size: 18px; }
.r-minWidth-bcqeeo { min-width: 0px; }
.r-paddingLeft-1m04atk { padding-left: 8px; }
.r-textAlign-fdjqy7 { text-align: left; }
.r-placeholderTextColor-1qzd3f0::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.54); opacity: 1; }
.r-placeholderTextColor-1qzd3f0::placeholder { color: rgba(0, 0, 0, 0.54); opacity: 1; }
.r-opacity-qzm50q { opacity: 0.32; }
.r-color-jwli3a { color: rgb(255, 255, 255); }
.r-textAlign-q4m81j { text-align: center; }
.r-letterSpacing-ud0q2t { letter-spacing: 1px; }

After:

[stylesheet-group="0"] { }
html { text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { margin: 0px; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button, input::-webkit-search-cancel-button, input::-webkit-search-decoration, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; }
[stylesheet-group="0.1"] { }
:focus:not([data-focusvisible-polyfill]) { outline: none; }
[stylesheet-group="0.5"] { }
.css-reset-4rbku5 { background-color: rgba(0, 0, 0, 0); color: inherit; font: inherit; list-style: none; margin: 0px; text-align: inherit; text-decoration: none; }
.css-cursor-18t94o4 { cursor: pointer; }
[stylesheet-group="1"] { }
.css-view-1dbjc4n { -webkit-box-align: stretch; -webkit-box-direction: normal; -webkit-box-orient: vertical; align-items: stretch; border: 0px solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; z-index: 0; }
.css-text-901oao { border: 0px solid black; box-sizing: border-box; color: rgb(0, 0, 0); display: inline; font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; }
.css-textOneLine-bfa6kz { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.css-hitSlop-mjp8i1 { bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; z-index: -1; }
.css-accessibilityImage-9pa8cd { bottom: 0px; height: 100%; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; width: 100%; z-index: -1; }
.css-textinput-1cwyjr8 { -webkit-appearance: none; background-color: rgba(0, 0, 0, 0); border-radius: 0px; border: 0px solid black; box-sizing: border-box; font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; padding: 0px; resize: none; }
[stylesheet-group="2"] { }
.r-flex-13awgt0 { -webkit-box-flex: 1; flex: 1 1 0%; }
.r-margin-98ikmy { margin: 32px; }
.r-overflow-1udh08x { overflow: hidden; }
.r-margin-1064s9p { margin: 4px; }
.r-borderColor-42olwf { border-color: rgba(0, 0, 0, 0); }
.r-borderWidth-d045u9 { border-width: 2px; }
.r-margin-hwh8t1 { margin: 8px; }
.r-padding-tuq35u { padding: 4px; }
.r-margin-jgcjvd { margin: 10px; }
.r-overflow-bztko3 { overflow: visible; }
.r-borderStyle-1phboty { border-style: solid; }
.r-margin-1fdo3w0 { margin: 16px; }
.r-padding-edyy15 { padding: 8px; }
[stylesheet-group="2.1"] { }
.r-paddingHorizontal-ymttw5 { padding-left: 16px; padding-right: 16px; }
.r-paddingVertical-c2syf2 { padding-bottom: 13px; padding-top: 13px; }
.r-marginVertical-hrzydr { margin-bottom: 2px; margin-top: 2px; }
.r-paddingHorizontal-s1qlax { padding-left: 4px; padding-right: 4px; }
.r-marginVertical-1p6iasa { margin-bottom: 4px; margin-top: 4px; }
.r-paddingHorizontal-1e081e0 { padding-left: 12px; padding-right: 12px; }
.r-marginHorizontal-vlx1xi { margin-left: 10px; margin-right: 10px; }
.r-marginHorizontal-1ydw1k6 { margin-left: 16px; margin-right: 16px; }
.r-marginVertical-712mwr { margin-bottom: 9px; margin-top: 9px; }
[stylesheet-group="2.2"] { }
.r-pointerEvents-12vffkv > * { pointer-events: auto; }
.r-pointerEvents-12vffkv { pointer-events: none !important; }
.r-bottom-1p0dtai { bottom: 0px; }
.r-justifyContent-1777fci { -webkit-box-pack: center; justify-content: center; }
.r-left-1d2f490 { left: 0px; }
.r-position-u8s1d { position: absolute; }
.r-right-zchlnj { right: 0px; }
.r-top-ipm5af { top: 0px; }
.r-alignItems-1awozwy { -webkit-box-align: center; align-items: center; }
.r-height-1r8g8re { height: 36px; }
.r-width-1acpoxo { width: 36px; }
.r-animationDuration-17bb2tj { animation-duration: 0.75s; }
.r-animationIterationCount-1muvv40 { animation-iteration-count: infinite; }
.r-animationKeyframes-127358a { animation-name: r-animation-9p3sdl; }
@-webkit-keyframes r-animation-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes r-animation-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.r-animationTimingFunction-1ldzwu0 { animation-timing-function: linear; }
.r-pointerEvents-633pao { pointer-events: none !important; }
.r-pointerEvents-105ug2t { pointer-events: auto !important; }
.r-flexGrow-16y2uox { -webkit-box-flex: 1; flex-grow: 1; }
.r-zIndex-136ojw6 { z-index: 2; }
.r-WebkitOverflowScrolling-150rngu { }
.r-flexDirection-eqz5dr { -webkit-box-direction: normal; -webkit-box-orient: vertical; flex-direction: column; }
.r-flexShrink-1wbh5a2 { flex-shrink: 1; }
.r-overflowX-11yh6sk { overflow-x: hidden; }
.r-overflowY-1rnoaur { overflow-y: auto; }
.r-transform-1sncvnh { transform: translateZ(0px); }
.r-width-13qz1uu { width: 100%; }
.r-alignSelf-1kihuf0 { align-self: center; }
.r-maxWidth-1ge9hsw { max-width: 960px; }
.r-paddingLeft-1qhn6m8 { padding-left: 16px; }
.r-paddingTop-tskmnb { padding-top: 8px; }
.r-marginTop-1mnahxq { margin-top: 0px; }
.r-cursor-1loqt21 { cursor: pointer; }
.r-touchAction-1otgn73 { touch-action: manipulation; }
.r-flexDirection-18u37iz { -webkit-box-direction: normal; -webkit-box-orient: horizontal; flex-direction: row; }
.r-justifyContent-1wtj0ep { -webkit-box-pack: justify; justify-content: space-between; }
.r-height-eu3ka { height: 40px; }
.r-marginRight-88pszg { margin-right: 16px; }
.r-width-1aockid { width: 40px; }
.r-marginRight-1kb76zh { margin-right: 8px; }
.r-zIndex-184en5c { z-index: 1; }
.r-flexBasis-1mlwlqe { flex-basis: auto; }
.r-zIndex-417010 { z-index: 0; }
.r-backgroundColor-1niwhzg { background-color: rgba(0, 0, 0, 0); }
.r-backgroundPosition-vvn4in { background-position: center center; }
.r-backgroundRepeat-u6sd8q { background-repeat: no-repeat; }
.r-backgroundSize-4gszlv { background-size: cover; }
.r-height-1pi2tsx { height: 100%; }
.r-zIndex-1wyyakw { z-index: -1; }
.r-opacity-1g80hic { opacity: 0.8; }
.r-height-1iud8zs { height: 50px; }
.r-fontSize-adyw6z { font-size: 20px; }
.r-lineHeight-17rnw9f { line-height: 30px; }
.r-minHeight-1vsu8ta { min-height: 30px; }
.r-marginBottom-5oul0u { margin-bottom: 8px; }
.r-position-bnwqim { position: relative; }
.r-lineHeight-135wba7 { line-height: 24px; }
.r-minHeight-1ceczpf { min-height: 24px; }
.r-textAlignVertical-1vzi8xi { vertical-align: middle; }
.r-flexWrap-1w6e6rj { flex-wrap: wrap; }
.r-alignItems-1habvwh { -webkit-box-align: start; align-items: flex-start; }
.r-marginBottom-15zivkp { margin-bottom: 4px; }
.r-color-kw1s2c { color: rgba(0, 0, 0, 0.38); }
.r-fontSize-1enofrn { font-size: 12px; }
.r-height-1472mwg { height: 24px; }
.r-paddingLeft-f727ji { padding-left: 12px; }
.r-paddingTop-m611by { padding-top: 10px; }
.r-justifyContent-1h0z5md { -webkit-box-pack: start; justify-content: flex-start; }
.r-minHeight-1ii58gl { min-height: 34px; }
.r-position-1xcajam { position: fixed; }
.r-backgroundColor-14lw9ot { background-color: rgb(255, 255, 255); }
.r-boxShadow-1t0y4yq { box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px; }
.r-height-h0d30l { height: 28px; }
.r-width-1iww7jx { width: 28px; }
.r-paddingBottom-97e31f { padding-bottom: env(safe-area-inset-bottom); }
.r-paddingLeft-bv2aro { padding-left: env(safe-area-inset-left); }
.r-paddingRight-hxflta { padding-right: env(safe-area-inset-right); }
.r-paddingTop-10xqauy { padding-top: env(safe-area-inset-top); }
.r-borderRightWidth-13l2t4g { border-right-width: 1px; }
.r-paddingTop-wk8lta { padding-top: 0px; }
.r-height-7r4507 { height: 150px; }
.r-maxWidth-dnmrzs { max-width: 100%; }
.r-flexBasis-wvpojh { flex-basis: 80%; }
.r-fontSize-ubezar { font-size: 16px; }
.r-marginRight-3691iy { margin-right: 32px; }
.r-backgroundColor-1fu3zty { background-color: rgba(0, 0, 0, 0.12); }
.r-height-109y4c4 { height: 1px; }
.r-marginTop-14gqq1x { margin-top: 4px; }
.r-paddingRight-1pyaxff { padding-right: 8px; }
.r-textAlign-1ff274t { text-align: right; }
.r-alignSelf-1pz39u2 { align-self: stretch; }
.r-fontSize-1i10wst { font-size: 18px; }
.r-minWidth-bcqeeo { min-width: 0px; }
.r-paddingLeft-1m04atk { padding-left: 8px; }
.r-textAlign-fdjqy7 { text-align: left; }
.r-placeholderTextColor-1qzd3f0::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.54); opacity: 1; }
.r-placeholderTextColor-1qzd3f0::placeholder { color: rgba(0, 0, 0, 0.54); opacity: 1; }
.r-opacity-qzm50q { opacity: 0.32; }
.r-color-jwli3a { color: rgb(255, 255, 255); }
.r-textAlign-q4m81j { text-align: center; }
.r-letterSpacing-ud0q2t { letter-spacing: 1px; }
[stylesheet-group="1"] { }
.css-text-901oao { border: 0px solid black; box-sizing: border-box; color: rgb(0, 0, 0); display: inline; font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; }

It seems that the .css-text-901oao class is created once again at the bottom and thus it overwrites the other classes.

[necolas]

Thanks, that narrows things down. If you're able to provide a reduced test case that would be very helpful

[jaulz]

It seems that this issue is indeed created by react-native-vector-icons which refers to the CJS module. This causes react-native-web to be instantiated twice in certain scenarios. In that case previously created groups are unknown to the new instance and all styles are appended at the end.
I created a fix here: https://github.com/oblador/react-native-vector-icons/pull/1022

[jhaankit]

@jaulz : Thanks. Your fix worked for me :)

[zivchen]

@jaulz @necolas Great work guys, that fixed the same problem for me, thanks a lot.

[mselmany]

If RNW styles causes FOUC bug with server side rendering in nextjs/expo project, try to add this line to your babel config. I don't know but RNW need to be build as commonjs.

babel.config.js

module.exports = {
  ...
  plugins: [
    ["react-native-web", { commonjs: true }]
    ...
  ],
};

[JoaoBGusmao]

@mselmany salvou em mano