Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native :after styling like css

Tags:

react-native

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

like image 276
Yushin Avatar asked Jul 09 '18 16:07

Yushin


People also ask

Is React Native styling same as CSS?

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.

Can you use CSS with React Native?

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.

What does React Native use for styling?

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 .

Do we need CSS in React Native?

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.


Video Answer


1 Answers

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.

like image 77
Funk Soul Ninja Avatar answered Sep 29 '22 01:09

Funk Soul Ninja