Using the Styled Components library

Styled components is a CSS-in-JS library that styles React Native components using plain CSS. With this approach, you don't need to define style classes via objects and provide style props. The CSS itself is determined via tagged template literals provided by styled-components.

To install styled-components, run this command in your project:

npm install --save styled-components

Let's try to rewrite components from the Introducing React Native styles section. Here is what our Box component will look like:

import styled from "styled-components/native";
const Box = styled.View'
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
';
const BoxText = styled.Text'
  color: darkslategray;
  font-weight: bold;
';

In this example, we've got two components, Box and BoxText...