Learn the fundamentals of styling in React Native, including Stylesheets and Flex Box

Styling Components

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.

```js
<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

Styling in Expo and React Native

You might have noticed that Expo and React Native don't always use units, like pixels (`px`), when setting dimensions or font sizes.
That's because using pixels in mobile apps will cause a lot of deviations when running the app on older and newer devices.

Older phones usually have screens with lower precision or _pixels per inch_.
Lower precision means that the screen has fewer pixels available to control.
When using pixels on older devices, you content might appear larger than intended compared to newer devices with higher precision.

On the right you can see the Samsung Galaxy S20, released in 2020, and the LG Nexus 4 from 2012.
With 8 years of technological improvements, they managed to increase the _pixels per inch_ from 320dpi to 563dpi.
If you used pixels to size your content, it will appear smaller on the higher precision screen and bigger on the lower precision screen.

In mobile development, it's common to use a different type of unit called ["Density-independent Pixels"](https://material.io/design/layout/pixel-density.html#pixel-density) or `dp`.
The `dp` unit takes the screen precision into account when setting the actual amount of pixels.
This unit type is also the default unit for React Native when setting styling properties, such as `height`, `width`, and `fontSize`.

Some styling properties, like width and height, also accept percentage values.
This format doesn't have the same pixel-related limitation because it's a relative value.
If you have a parent view with a total width of `500dp`, using `50%` is relative to these density-independent pixels.

4 phone screens. Large and small phones each with fixed pixels and density-independent pixels.

Width and Height

Flexbox also allows us to control how the child elements are positioned within our parent flexbox.
The property to control this aspect is the `justifyContent` property.
We have already used the `center` value of this property in previous exercises.

Besides `center`, there are 5 more options available.
The options `flex-start` and `flex-end` are related to the parent flexbox.
They both mean: "position the child elements where the parent flexbox starts or ends".
The other options `space-around`, `space-between`, and `space-evenly` are related to where gaps should be placed between the child elements.

- `center` renders child elements within the _center_ of our _parent flexbox_.
- `flex-start` renders child elements at the _start_ of our _parent flexbox_.
- `flex-end` renders child elements at the _end_ of our _parent flexbox_.
- `space-around` renders child elements with remaining space _around_ these elements.
- `space-between` renders child elements with remaining space _between_ the elements, without space at the _start_ or _end_.
- `space-evenly` renders child elements with remaining space _evenly_ divided, including space at the _start_ and _end_.


Flex Justify Content

With Expo and React Native, we have to define styling using a plain JavaScript object because of the lack of CSS.
In previous exercises, you may have used inline JavaScript objects for each component.
This method is great for applying just a couple of styling rules but doesn't work well for larger collections of rules.

When more styling rules are added, the readability of the code will degrade.
This is one of the reasons why React Native created the [`StyleSheet` API](https://docs.expo.io/versions/latest/react-native/stylesheet/).
With the `StyleSheet` API we can write our styling rules separately, and reference them when rendering the components.

```js
// Using inline styling
const AwesomeBox = () => (
  <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
);
```

In the example above, we used inline styling.


With the `StyleSheet` API, we can pull the inline styling from our `AwesomeBox` component.
By doing that we can reuse the styling rules and keep our `AwesomeBox` component readable.

```js
// Using the StyleSheet API
const AwesomeBox = () => (
  <View style={styles.box} />
);

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
});
```

The most important method of the `StyleSheet` API is the [`.create` method](https://docs.expo.io/versions/latest/react-native/stylesheet/#create).
With that, we can create a nested object with styling rules and refer to the styling rules.
In the code above we used `box` as the reference to our styling rules.

StyleSheets

In the previous exercise, we used the `StyleSheet` API to reuse styling rules and improve the readability of our components.
Besides these benefits, one of the biggest drawbacks is that the styling is mostly static.
There is no good way to change the styling rules within `StyleSheet` based on user interaction.
Luckily, the styling property is more advanced than it looks.

The `style` property also accepts an array of inline style objects or `StyleSheet` references.
It is similar to applying multiple CSS classes to a HTML element, e.g. `<div class="box red">`.
Using this array with conditionally added styles, we can make the styling dynamic based on user interaction.

```js
const AwesomeBox = (props) => (
  <View style={[styles.box, props.isActive && { backgroundColor: 'purple' }]} />
);

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});
```

In this example, we are changing the background color to purple when the `isActive` property is true.
We can combine both `StyleSheet` references and inline styling objects.
The eventual styling is created by applying all styles in the array from left to right.

Combining Styles

Using flexbox has other benefits besides giving you full control over how the available space is distributed – we can also control the direction of the children elements within the flexbox.
The default direction of the flexbox in Expo and React Native is different compared to web: it's set vertically.

There are two directions in which we can render the child elements - horizontally `row` or vertically `column`.
The terminology is related to tables – when rendering in the `row` direction, we are rendering it horizontally.
Besides these two directions, we can also render it in the reversed direction.

- `row` renders child elements from left to right, or _horizontally_.
- `row-reverse` renders child elements from right to left, or _reversed horizontally_.
- `column` renders child elements from top to bottom, or _vertical_.
- `column-reverse` renders child elements from bottom to top, or _reversed vertically_.

Flex Direction

Great job! We've covered the fundamentals of styling in Expo and React Native, including:

* Inline styling with the `style` property
* Refactoring inline styles with `StyleSheet.create`
* Dynamically styling with arrays of style objects
* Building responsive layouts with unit-less values, or "density-independent" pixels
* Laying out elements with `flex`, `flexDirection`, and `justifyContent`

Review

There are a lot of different screen sizes and shapes for mobile apps.
The screens can also "change shape" by rotating the device.
It's important to make your app responsive because of these changing factors.

When defining your layout, you can use different techniques and units to make your app responsive.
Some elements don't have to be responsive in size, like buttons.
Other elements can be made responsive with percentage values.

The best way to make your layout responsive is by using Flexbox.
It's similar to the web variant, with some minor differences.

- All elements are flexboxes; you don't have to specify `display: flex`.
- Some default values are changed to better suit mobile apps.

In these exercises we are refactoring a non-responsive layout to a more responsive version, using the `flex` property.
First, we will use hardcoded pixels, try percentages, and finally learn why flexbox is more powerful.