Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web.
It appears that there is a mechanism within the framework that automatically generates classes for commonly used styles, such as:
.r-borderWidth-rs99b7 {
border-width: 1px;
}
While this may optimize performance, it results in the styles being applied in the wrong order and occasionally duplicating them.
Take a look at my code snippet below:
<TouchableOpacity
style={{
width: '100%',
padding: 8,
borderRadius: 32,
borderColor: '#aaa',
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
}}
onPress={() => console.log('pressed')}
>
...
</TouchableOpacity>
Upon compilation by NextJS, the output HTML looks like this:
element.style {
align-items: center;
border-color: rgb(170, 170, 170);
border-radius: 32px;
flex-direction: row;
padding: 8px;
transition-duration: 0s;
width: 100%;
-webkit-box-align: center;
-webkit-box-orient: horizontal;
... (additional styles) ...
}
.css-view-1dbjc4n {
... (default view styles) ...
}
.r-borderWidth-rs99b7 {
... (border-width style) ...
}
.css-view-1dbjc4n {
... (duplicate default view styles) ...
}
Some odd observations include:
- Duplication of the default View style
- The separate declaration of my border-width style into its own class
- This behavior specifically occurs when using multiple elements with inline border-width styles, suggesting some form of optimization.
- Incorrect order of applying the View style above the border width style
If anyone has insights or solutions regarding this peculiar issue before I reach out to the react-native-web and NextJS repositories, your input would be greatly appreciated.