While regular CSS stylesheets aren’t valid, React Native’s superset of CSS is very similar to traditional CSS.

Many CSS properties (e.g. color, height, top, right, bottom, left) are the same in StyleSheet. Any CSS properties that have hyphens (e.g. font-size, background-color) must be changed to camelCase (e.g. fontSize, backgroundColor).

Not all CSS properties exist in StyleSheet. Since there is no true concept of hovering on mobile devices, CSS hover properties don’t exist in React Native. Instead, React Native provides Touchable components that respond to touch events.

Styles are also not inherited as they are in traditional CSS. In most cases, you must declare the style of each component.

Flexbox Layouts

React Native uses an implementation of flexbox similar to the web standard. By default, items in the view will be set to display: flex.

If you do not want to use flexbox, you can also arrange React Native components via relative or absolute positioning.

Styled Components

Including lots of styles in a file with a component isn’t always easy to maintain. Styled components can solve this issue.

For example, a Button component may be used in multiple places across an application. Copying and pasting the style object with each Button instance would be inefficient. Instead, create a reusable, styled Button component:

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services,
and staff.