Can't get v3 to work, unexpected errors #508
Comments
|
There is no need to apologize. We are here to help. |
|
Thank you. Here you go: https://github.com/terreng/unistyles-issue-508-minimal-repro I stripped out as much as I could while still exhibiting the issue. I left Notable: On iOS, removing either On web, it only happens if |
|
Thanks, will try to repro and get back to you |
|
Hi @terreng, could you move StyleSheet.create outside the component body? It currently creates a new instance of styles on every render. Moving it below the component seems to resolve the issue.
|
|
Yeah, @Brentlok is right. We can't really limit it / detect it as during development your I don't want to limit it further, as someone could create some kind of factory for |
jpudysz
added
wontfix
|
My issue is not entirely resolved. While moving StyleSheet.create outside of the component body does fix things for iOS, it did not fix the errors I'm getting on the web, which appears to be a separate issue. I just updated the repo linked above to demonstrate the web issue. When I try to pass styles through the style prop, then I get errors in the console like Is this a bug, or is it another thing that's not supported by unistyles? The relevant files are: ExampleComponent.web.js import { StyleSheet } from 'react-native-unistyles';
import { InnerComponent } from '@/components/InnerComponent';
export const ExampleComponent = ({}) => {
return (
<InnerComponent style={[styles.card]}/>
);
}
const styles = StyleSheet.create({
card: {
backgroundColor: "gray"
},
});InnerComponent.js import { Text } from 'react-native';
export const InnerComponent = ({ style }) => {
return (
<Text style={style}>Hello</Text>
)
} |
|
InnerComponent.jsx isn't being parsed by the Babel plugin because it's unclear whether you'll use it with Unistyles. Consequently, it won't function properly on both mobile and web platforms. The warnings occur because you're passing Unistyles styles to a pure React Native Web (RNW) component. You might find this related issue helpful to check. |
jpudysz
added
enhancement
|
I don't understand because everything works fine on iOS but not on the web. Is the Babel plugin different depending on the platform? Specifically, this works fine on iOS but causes the error on the web: ExampleComponent.jsx import { StyleSheet } from 'react-native-unistyles';
import { InnerComponent } from '@/components/InnerComponent';
export const ExampleComponent = ({}) => {
return (
<InnerComponent style={styles.text}/>
);
}
const styles = StyleSheet.create({
text: {
color: "red"
},
});InnerComponent.jsx import { Text } from 'react-native';
export const InnerComponent = ({ style }) => {
return (
<Text style={style}>Hello</Text>
)
} |
|
It works fine for iOS on first render, because we pass parsed style to If CSS class was not generated by Unistyles,
Why it was not processed? Because babel follows algorothm explained here: https://www.unistyl.es/v3/other/babel-plugin#extra-configuration Please read entire babel plugin guide, so it will make more sense: https://www.unistyl.es/v3/other/babel-plugin |
|
Circling back to the The explanation you gave for this makes sense, and I know it's easy to understand for people who understand how Unistyles works under the hood. I also agree that it's not too much work to just move StyleSheet.create out of components. That said, I hope you can appreciate that for a new user like me, it's unintuitive, confusing, and frustrating. I'm expecting Unistyles to work the same way StyleSheet did. With that in mind, I have a few suggestions I hope you may consider:
|
Description
I'm new to React Native, so apologies in advance. Something is going wrong when trying to use the v3 beta and I can't work it out.
As soon as I switch the import to
react-native-unistyles, I start seeing errors that don't make sense.On the web, my styles are all messed up, and I see errors in the console like
On iOS, I get:
But the code it's referencing looks fine - it worked before switching the import, and there's only one argument as intended.
I'm following all of the install steps, including running
expo prebuild --cleanandexpo start --clear.react-native-nitro-modules: 0.21.0
react-native-edge-to-edge: 1.4.0
babel.config.js
Full stack traces
Steps to Reproduce
I'm following the install steps.
Snack or Repository Link (Optional)
No response
Unistyles Version
3.0.0-beta.5
React Native Version
0.76.6
Platforms
iOS, Web
Expo
Yes
The text was updated successfully, but these errors were encountered: