How to convert CSS styling to React-Native

Question

I am using figma for screen design. All styling in figma is in CSS format. But I am developing app in React-Native where all the styling is different from CSS.

Lets Say box shadow in CSS

 box-shadow: 2px -8px 15px rgba(29, 41, 56, 0.2);

Such a styling in react-native will be like this,

 {
    elevation: 15,
    shadowOffset: { width: 0, height: 3 },
    shadowColor: 'black',
    shadowOpacity: 0.3,
}

(These two stylings not exact conversions. Both are different. I am just showing for an example)

Is there any standard way to convert CSS styling to React-native? Thank You.

You can checkout styling with [styled-components](https://styled-components.com/docs/basics) — imKrishh, May 18 '21 at 10:32

score 0 · Answer 1 · answered May 18 '21 at 11:10

You can check out styled-components https://styled-components.com/docs/basics as mentioned by @imKrishh

Ideally it would look something like this:

import styled from 'styled-components';

const SubHeading = styled(H3)`
margin-bottom:2rem;
opacity:0.25;
`

How to convert CSS styling to React-Native

1 Answers1