Learn

Visual design is more than just nice colors and grid layouts. A good design can draw the user’s attention to the most important information on the page, suggest interactions that they can perform, and organize complex information.

On websites, this is typically done with CSS. But not everything from the web is available in Expo and React Native.

In order to use React code and run them in a native environment, Expo and React Native uses a JavaScript thread. Since we are tied to JavaScript, we have to define our styling in JavaScript too.

<View style={{ width: 100, height: 100, backgroundColor: 'red' }} />

The style property is similar to inline styling in HTML elements. Instead of CSS rules, we have to write everything in JavaScript. The properties that you have to use are named after the CSS properties, only using camelCasing.

In this lesson, we will dive deeper into styling, including:

  • Inline styling
  • Refactoring inline styles with StyleSheets
  • Responsive layouts with unit-less values
  • Common flexbox properties

Instructions

Take a look at the Codecademy Go app to the right, which is built with Expo. What styling do you see on this screen?

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?