Styling

Mobile apps are not just built with text alone. There are
a lot more components used such as images, buttons
etc. In addition, properly arranging and styling the
components is also important. Let's see how we can
make our user interface better with styles.
 SafeArea
SafeArea is the portion of the screen where we can display content that won't be hidden
by device notch or home indicator.
If you run the Hello, React Native! example on an iPhone a portion of that text will be
hidden under the notch.
 SafeArea
To avoid this situation we should display content in the safe area of the screen. In the
below screenshots the areas highlighted in red is the unsafe area.
 SafeArea
We can wrap any component inside the SafeAreaView and that will push the content
away from the unsafe area. Let's see how we can add SafeAreaView to the Hello, React
Native! example.

See how wrapping the root View

component inside the SafeAreaView
pushed the content to the safe area and
made it properly visible.

SafeAreaView will only work on iOS

devices with version 11 or above.
 INLINE-STYLES
Now that we know how to put things on the screen properly, let's learn how we can add some style. In
React Native we can add styles to any core component using the style property(prop). There are multiple
ways we can provide value to the style prop. We will start with the simple method, passing the style object
directly to the style prop.

We are giving the text a blue color and font size of 32. React
Native use React and it use JSX for layout. In JSX you can
pass a constant value to props directly or pass javascript
expression inside curly brackets. In the above snippet, we
are passing a JavaScript object to style prop.
 STYLE ATTRIBUTES
React Native mostly use CSS attributes with camelCase instead of kebab-case for styling. In the above
example, we are using the fontSize and color attributes to set font size and text color respectively. React
Native doesn't support all the style attributes available in CSS and every core component won't support all
available attributes.

Let's add two more style attributes to the Text component.

This will add a background color to the text and align it in the center.
 COLOR VALUES
In React Native you can specify color in multiple ways.

Hexadecimal: #f0f(#rgb), #ff00ff(#rrggbb), f0ff(#rgba), #ff00ff00(rrggbbaa).

RGB: rgb(255, 0, 255) and `rbga(255, 0, 255, 1).

Here the r, g, b and a stands for red, green, blue and alpha respectively.
 COLOR VALUES
Predefined color values: e.g. red, gold, coral…
 REUSING STYLES
Inline-styles are easy to create, but it has two major drawbacks. First of all, it will clutter
our component code pretty easily and thus affects the code readability. The second
problem with inline styles is that we can't reuse the styles. Let's jump into an example
where we have the scope for reusing styles.

In this screen, we have two text elements with the exact same style except for the color.
REUSING STYLES
On using inline style the code will look like this.
Here, we have a possibility for code reuse but
the same cannot be done with inline styles.
REUSING STYLES
Since style prop accepts object we can extract
the styles to object.
Here we have created a styles object.
 REUSING STYLES
Now we have to pass styles.text to both Text components and styles.blueText to the first
one and styles.greyText to the second. Since style props accept an object we can use
the spread operator to combine multiple objects to one.

This is also a little messy, and there is a better way to do it. Style prop also
accepts array of objects. We can change it to this:
STYLESHEET.CREATE()
Even though we can use plain
JavaScript objects for style it is
not a good practice. What we can
do instead is to use the inbuilt
StyleSheet API.

The StyleSheet API has a lot of

advantages over the normal
object, like compile-time checks,
performance improvements and
better code auto-completion to
name a few.

Let's re-write the entire App

component to use the
StyleSheet.create API.
LAYOUT
Till now whatever we have put into the
screen is displayed in a single column.
This is because React Native use the
Flexbox algorithm to layout components
and the default direction is column. It is
the same Flexbox algorithm from CSS
with few limitations. Let's modify the
App component to display both the text
component in a single row.
 LAYOUT
Flex Direction
The flexDirection attribute decides the flow of elements
in a flex container. The default value for flexDirection is
column and here we are changing it to row.

Flex
The flex attribute will define how much space the child
component will occupy in the container along the flex-
direction. In our example, we are using flex value 1 for
both child components. This will divide the container
into 2 and will give 1 portion to each element.
 IMAGE COMPONENT
We already know how to display text on the screen. Let's add one more
thing to our toolkit, images.

We can use to display images from the network(using URL), project files
and device storage. Let's add an image to the App component.

The Image component

accept a source prop
where we can directly
require and pass a local
image file or an object
with the uri pointing to
the image path in device
storage or on the
Internet.
STYLE INHERITANCE

You can pass an array of styles

- the last style in the array has
precedence, so you can use
this to inherit styles.
ONE-TO-ONE NESTING OF TEXT COMPONENTS

You can nest text to display formatted

text by annotating ranges of a string
with specific formatting like bold or
colored text.