How do style in react native like we do in sass
.pro_image:after {
content: '';
position: absolute;
border-radius: 100%;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
border: 10px solid rgba(255, 255, 255, 0.075);
}
because i tried using the same technique but it seems not to be working
Stying in React Native is not the same as normal CSS. For styling elements in React Native, JavaScript objects are used. Every core component in React Native accepts the style prop which accepts a JavaScript object containing CSS property names as key.
React Native lets you style your whole application using JavaScript. Every component can use a prop named style , which enables you to write CSS styles for those components. There are two main methods that React Native has for creating styles: inline styling and using a style prop to style subcomponents.
With React Native, you style your application using JavaScript. All of the core components accept a prop named style . The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color .
Due to the lack of markup, there's no CSS in React Native. But don't panic, we can style our app using almost the same mindset of traditional CSS. Important: React Native enforce us to use Flexbox layouts by default. So we don't need to use float and display to build our layout structure.
Css pseudo classes do not work in react-native, but if you want your styles to look as close to css as possible I would recommend using something like Styled Components. It works on both web and react-native.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With