You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've tried to use the Solito example app, but its seems like there is a missing part. I also went over the documentation without finding what it was.
I only managed to have the CSS classes embeded in the _app.js file, it looks a bit like this:
function(module,__webpack_exports__,__webpack_require__){"use strict";eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_next_dist_build_webpack_loaders_css_loader_src_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/runtime/api.js ETC. things like ':is(.bg-red-500) {\\n --tw-bg-opacity: 1;\\n background-color: rgb(239 68 68)'"))/***/}
It works on the client side, but on the server side the CSS is not rendered, which means the page will render without any style when javascript is disabled. I don't have the same issue if I use react-native Stylesheet.create or embeded styles.
In other words, this :
import{ViewasReactNativeView,Text}from'react-native'import{styled}from'nativewind'import{StyleSheet}from'react-native';conststyles=StyleSheet.create({red: {backgroundColor: '#ef4444'}});exportfunctionHomeScreen(){return(<ViewclassName="flex-1 items-center justify-center p-3"style={styles.red}><Text>Welcome to Solito.</Text></View>)}
Will render the expected output (JS disabled):
While using nativewind:
exportfunctionHomeScreen(){return(<ViewclassName="flex-1 items-center justify-center p-3 bg-red-500"><Text>Welcome to Solito.</Text></View>)}
Will render image a blank div that (again, with JS disabled):
I found issue #276 that seems vaguely related, but If I remove nativewind from nextJS list of transpiled packages, I get an error:
- error /Users/kunetravel/github/solito/example-monorepos/with-tailwind/node_modules/react-native/index.js:14
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^
SyntaxError: Cannot use import statement outside a module
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I've tried to use the Solito example app, but its seems like there is a missing part. I also went over the documentation without finding what it was.
I only managed to have the CSS classes embeded in the
_app.js
file, it looks a bit like this:It works on the client side, but on the server side the CSS is not rendered, which means the page will render without any style when javascript is disabled. I don't have the same issue if I use react-native
Stylesheet.create
or embeded styles.In other words, this :
Will render the expected output (JS disabled):
While using nativewind:
Will render image a blank div that (again, with JS disabled):
I found issue #276 that seems vaguely related, but If I remove
nativewind
from nextJS list of transpiled packages, I get an error:Beta Was this translation helpful? Give feedback.
All reactions