Let's style it!
Before we start styling our app, we should understand how styling works in React Native. If you do have any prior experience with React, you'd know that styling is done via CSS. However, in React Native, we can't use CSS, so everything is done through the StyleSheet.
A StyleSheet was created by the React Native team. Here, you have similar rules to CSS but everything is done through JavaScript.
When passing these styling objects over to our components, we do so via a prop called style
. Let's start by directly creating some styles for our Home screen.
There are two ways we can pass these objects over to our components – we could write them directly in our component or pass them via a new instance of the StyleSheet. Let's write it in-line and change our background color for the screen. By going over to our Home.js
file, we can add the style
prop to the our <View />
component, which wraps the rest of our components: