Converting css style to React Native stylesheet-CodePudding

I'm currently using stylesheet for my style in react-native. I found a css style that I need for my component unfortunately it has an :after and :before in css. How to use :after and :before in stylesheet in react-native. Here's the sample css code that I'm trying to convert into react-native style sheet:

.ticket:before,
.ticket:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
}

.ticket:before {
  background: white;
  left: -30px;
}

.ticket:after {
  right: -30px;
  background: white;
}

CodePudding user response：

Css pseudo selectors such as ::after or ::before 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.

CodePudding user response：

You can use tools such as: https://www.npmjs.com/package/css-to-react-native-transform https://github.com/raphamorim/native-css https://github.com/styled-components/css-to-react-native

I've used all of them in some capacity and find them useful.