Customizing Styles with Styled Components

The text inside the backticks below looks like CSS, but it produces an ordinary React Native component with an ordinary style object.

import styled from 'styled-components/native';

const Title = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: #333333;
`;

Render <Title>Grokking React Native</Title> and inspect the result. The rendered tree contains a plain Text element, and the CSS text has become numbers and strings that React Native understands:

Text style: { fontSize: 20, fontWeight: "bold", color: "#333333" }