There is a full feature set with Styled Components when developing in React. It seems you don't get the full experience in react-native.
These limitation aren't really specified anywhere. What are the exact limitations?
I know selectors is one of them.
Dug around on this for a while and found a good response in a GitHub issue. #Andus in the comments is correct. Styled Components simply works within the bounds of React Native flavored CSS.
There are no pseudo elements in React Native 😅 Similarly you won't be able to use:
Any unsupported positioning
Some transforms don't have transformations afaik
Child / Children / Sibling selectors
Media queries or other at rules
Sorry about that! React Native is very focused on their style system, in the sense that they don't support full CSS but only CSS-like StyleSheets, so all that is done on RN in styled-components is some thin conversions to StyleSheets.
Related
I am trying to get this layout using tailwind css and also render elements in this order with vue or react
This layout is called "masonry". I recommend that you check how to do that one in CSS (or with some vanilla JS/package), it's not specific to React nor Vue per-se.
As of how to implement it exactly, SO is not a coding platform so I recommend that you Google that for further progress.
I want to use the same component lib on web and mobile with react. I know that semantic-ui-react fits to web, but tried to use it in a react-native project without success.
Am I missing some specific config, or it does not work in both platforms?
You're not missing any configuration. Semantic UI React only generates elements using react-dom. The only way to use it with React Native would be if the entire library was updated to render native elements for other target environments. This is not something that Semantic UI supports... and would represent a significant, likely breaking, refactor to do.
Maybe this package meet your need in react-native
https://www.npmjs.com/package/#muratoner/semantic-ui-react-native
I recently heard that there is a component called styled component in ReactJS. This question was asked me during one of my interview.
If anyone has an idea, kindly explain.
Traditionally you'd do the styling of your react app using css or a preprocessor like SASS or LESS. An alternative, that is becoming more popular recently, is to place the styling of your components within your JS.
Styled Components is one of the many packages that enable you to do this: https://www.styled-components.com/
Other examples include cssinjs: http://cssinjs.org/ or glamorous: https://glamorous.rocks/
Can I combine material-ui components with non-mui components without problems ? Are they compatible ?
If not, why not ?
In general there are no obstacles to use in one app bouth Material-UI and other Components. The only thing you need to take in mind that mui components need to be wrapped into MuiThemeProvider, so you need to organize your app structure to cover them all.
An additional issue may occur if you're going to create the themable app. You'll find that your non-mui components don't follow theme colors. In that case you can try to use react-theme-provider which solves common issues about it.
Usually ui components can work pretty well together. I know that some material ui component werent composable you had to pass props to customize them instead of putting component as childs but they have been working on that and you can customize with your own components more and more.
for react web, I'd like to try semantic-ui (http://react.semantic-ui.com/usage)
for react-native, I don't think there's a framework that can help us with styling. (which is hard to believe, maybe I'm too new to react world)
My question is, Is there a way for us to share styles for the two platforms (web/native) somehow?
There are external dependencies that could be used as tools to achieve what you are talking about react-native-css is one option.
Without any external dependencies I think you can still achieve succesfull results... You will just need to export style modules in your react-native app and pass them as props. You can use the Platform module (from rn) to conditionally render styles depending on device operating system. Remember, layouts in react native are created with flexbox so any successful shared styles between web and native would have to be written with that in mind. (Bootstrap 4 supports flex.)