-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Notice: intent to deprecate and remove className prop from View and Text #1146
Comments
I've used className in the past to get a reference to the dom node when a browser only work around was necessary. I tried to get the dom node trough the ref but couldn't find it. Also I've used it in the past to apply css classes that have browser specific psuedo selectors to hide scrollbars for example. Since I can't find anything about using css psuedo classes in react native which doesn't make sense but is needed in the example above. Any recommendations? |
className is useful escape-hatch for browser only styles. I don't know how to float an image in another way. Sure RNW can be strict, but the evolution is incremental. Maybe some prefix for web-only inline styles can fix it. |
Just an update, I've currently replaced all views that used the className prop as escape hatch with divs which just seems to work like a react component instead of a react native web component. So a .web.js file could contain mixed components like: e.g.
|
Mixing with classNames is not safe
Use the |
View and Text will not support the 'className' prop in a future release. Fix #1146
View and Text will not support the 'className' prop in a future release. Fix #1146
I know that I'm very late to the discussion as I haven't for some reason noticed this before. I have some projects that are using React Native Web and CSS modules. If the I personally really like the idea that RNW would be compatible with the Web and Web React with allowing the usage of https://reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components
|
Going forward, you should never mix CSS modules with React Native components. In practice that means doing this… import classes from './styles.css';
const A = () => <View className={classes.root} /> …will have no impact on the presentation. But you can continue to use CSS modules with React DOM components, and those React DOM components can be used in the same web app as React Native components. |
My case is a bit different because I'm using CSS Modules + Sass or PostCSS in my React Native projects. I have also been planning on starting to migrate Web projects to use RNW, but if the support for CSS modules is removed, then I can not share any components between my RN projects and Web. I know that this is not a problem for most of the users, but it breaks the RN<->Web compatibility for me and a few other people who are using CSS pre-processors in React Native and might possibly want to render the code in a browser. Here's the link to my React Native CSS modules project if you want to read more: |
If your project is compatible with RN shouldn't it be compatible with RNW without relying on the |
I have created a Babel plugin that is used only on the React Native side to transform That way I can use CSS modules on both platforms together with RNW. |
To give you a better idea, I have created simple example apps to show how you can render regular CSS or Sass on Android, iOS, and Web: |
CSS modules doesn't have the same safety or resolving characteristics as React Native styles. |
I am fully aware of that, but it also does not mean that you can not create well functioning Web apps using CSS modules. I'm ok with the |
@kristerkari You can make a higher order component with setNativeProps in useEffect. You can also leverage |
There are a few additional things that I would like to be considered related to RNW's CSS modules support.
|
Looks like this change also affects the use of styled components with RNW. An example from my project: const Container = styled(View)`
flex: 1;
justify-content: center;
align-items: center;
background-color: #fff;
`; ↓
|
so @necolas any chance of re-opening this issue and adding a setting to RNW that would remove the warnings and enable I would be just fine with the It seems to me that removing |
@necolas would be great to have support for styled-components or a way to disable the warnings |
Use styled-components/native. But you're better off using RN directly |
Ah, for some reason I did not notice the btw. @necolas the styled-component implementation got me thinking about one idea. Do you think that it would be possible to create a plugin that would turn CSS from a file to style objects that run through the RNW That way the user would still have the option to use CSS files and there would be no need to expose |
When I try to use ./node_modules/styled-components/native/dist/styled-components.native.esm.js
Attempted import error: 'react-native' does not contain a default export (imported as 'reactNative'). Did anyone get this working properly? |
While I appreciate the safety and predictability that RN styles provide, and media queries are not really in the spirit of RNW, I have not found a way to reasonably and correctly server render my app without shipping some media query based styles outside of RNW. I was hoping to rely on @kristerkari's react-native-css-modules to do that. I would be very interested in ideas for better ways we could work on to server render responsive apps with RNW, but I don't have anything. |
true, I don't think that CSS media queries can be supported if the As I said before, this change really removes a lot flexibility from RNW by restricting the styles to the |
Well there are hackier options like:
|
Those are valid workarounds/hacks for the problem, but they will also mean that the user needs to add code for the workaround to his/her project. My goal with the React Native CSS modules library is to give the user a simple way to style React Native apps with plain CSS or CSS processors. It really sucks if the user has to do some hacks to get that working on the Web. In my opinion the only suitable ways to tackle the problem would be to either add opt-in setting for the |
No, it doesn't. You can apply styles using |
As mentioned before, there are workarounds, but those workarounds require the user to write extra code that is Web specific. You can not use the same CSS styles for both React Native and Web unless you use the |
This is giving me a lot of trouble because we use StyledComponents and we reuse components on web and app. What would be the correct way to still be able to use these 2? I can not use styledComponents/native because we are using them on the web as well. |
@mglavall StyledComponents is an unnecessary abstraction from day one. It was created as slow and buggy wrapper over glamour. In JavaScript, we don't need to emulate CSS text-based syntax. Anyway, with React Native Web, it's pointless to use it over StyleSheet. The correct way is to not use StyledComponents. It's leaky abstraction (google it). For styling, there is style or emotions css prop. Misusing components and their props for styling is possible but wrong. |
@mglavall maybe have a look at https://github.com/callstack/react-theme-provider very easy to build something like styled components for react-native/web |
I don't think that response is helping anyone in any way. ´Don't use it´does not help all the people that are already using it. Thanks for the explanation, though |
"Don't use it" or "You are doing it wrong" is often the best answer ever. Some things are unfixable. For example GraphQL SDL or the State (socialism) or fiat money. To illustrate that pattern, check https://www.prisma.io/blog/the-problems-of-schema-first-graphql-development-x1mn4cb0tyl3 Hope you will understand why I wrote that response. |
Styled Components removes the extra guff required if we'd like to build readable and clear markup. Almost any component tends to be given a meaningful name, even if it's just a component that takes styles and doesn't do anything functionally. It removes the existence of If we'd like to replicate this with the @steida, I'll google the leaky abstraction issue, but my concern is with the Styled Components paradigm being written off as not needed or not useful. |
I experimented with styled components API a lot in the past. The main problem is clashes among component props and style props which is unsolvable. '' is not a bug, it's a feature. It's not verbose, it's explicit. Do you know utility / atomic CSS movement in CSS world? Anything slightly complex leads to style duplications. Start with this article https://frontstuff.io/in-defense-of-utility-first-css and read more about the topic. Sooner or later you will realize, that having style primitives and being able to arbitrary mix them via style prop array is far most better approach then plain old CSS untyped string snippet soup. Also, style objects can be typed and injected via context by theme etc. The result is much more robust and easier to use code. DX matters.
You wanted to say "which I am more familiar with". Sure you can make a reusable component but repeating yourself is far less expensive than the wrong abstraction. Imagine a simple Text component. It's not as simple, because text can and will have different sizes, fonts, centering. Are you going to replicate everything via props? Sure you can..., but again, read something about utility CSS. I was using even things like |
I did something like this, and it seems to work – maybe there are drawbacks, I don't know... 😅 // SharedComponent.ts
import styled from 'styled-components';
import { Theme } from '../styles/types';
import { Text } from 'react-native'; // I still use the `react-native-web` webpack alias for the web project, although it might not even be necessary
const webOrNativePrimitive = (defaultTag?: string, defaultPrimitive?: any) => {
return (typeof navigator !== 'undefined' && navigator.product !== 'ReactNative') || process.env.NODE ? defaultTag || 'p' : defaultPrimitive || Text;
};
export const Typography = styled(webOrNativePrimitive())<{ type?: string; os?: string; theme: Theme }>`
font-family: ${({ theme }: { theme: Theme }) => theme.font.defaultFont};
...
`; |
The
className
prop is going to be deprecated fromView
andText
(and anything else it might currently be available on). This prop was only supported as an escape-hatch for Twitter Lite's migration from aView
implemented atop of CSS Modules to the React NativeView
.Rough plan at the moment is:
className
in 0.10. Use ofclassName
will start printing warnings in the console.className
in 0.11.If you're relying on this undocumented escape-hatch please let me know the details.
The text was updated successfully, but these errors were encountered: