If you're familiar with CSS-in-JS you should be able to fall right into styling in React Native as it follows the same principles. If not, no worries.
React Native has just about all the CSS properties you would expect. The only difference is that rather than using dashes (-) it uses camel case. For example:
background-color
becomes backgroundColor
.
So what does this look like in practice? Let's look at an inline style:
const App = () => (
<View style={{ backgroundColor: "red", width: 100, height: 100 }} />
);
This works perfectly well but more often than not you'll see the React Native StyleSheet
API used to encapsulate styles, like so:
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
box: { backgroundColor: "red", width: 100, height: 100 },
});
const App = () => <View style={styles.box} />;
This creates a reference to your style rather than a defined object leading to potentially better performance as you reuse styles.
One interesting thing with styles is how you override them.
Much like css where you can "stack" styles and they'll override each other, you can do the same in React Native by passing an array to the style
prop. The last items in the array will override properties defined previously.
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
box: { backgroundColor: "red", width: 100, height: 100 },
boxBlue: { backgroundColor: "blue" },
});
const App = () => <View style={[styles.box, styles.boxBlue]} />;
First, styles are simply objects (as you may have seen in previous lessons). This
What about layout?
React Native uses Flexbox for laying out content.
This is a whole topic in itself and I've found it's something that you just master over time. A few properties that I constantly use:
flex
justifyContent
alignItems
flexDirection
The "Layout with Flexbox" goes into details on these - use that page for reference as you go through the exercise.
Create 3 squares that are vertically and horizontally centered. Each square should have a unique background color but all shared styles should only be defined once.
👉 https://github.com/yjose/Tasker/commit/677b9e64e22c961f03204305cde7d4374b6acda2
Use All we learned from Basic components and styling chapters and implement the following Screen: Figma File
Make sure to create a
screens
folder insidesrc
and create your screen underLogin
screen.
👉 https://github.com/yjose/Tasker/commit/f3c664cda072d65ec85ab1660aa0f98fb9d17e0f