Linear gradient

A linear gradient is an image consisting of a progressive transition between two or more colors along a straight line. It's a handy design tool for making a UI look more interesting.

For creating a linear gradient in React Native, we can use the expo-linear-gradient library.

Install the library

Install expo-linear-gradient:

npx expo install expo-linear-gradient

Add a gradient

Let's add two more shades of green to our theme file:

Update: theme.ts

@@ -1,5 +1,7 @@
 export const theme = {
   colorGreen: "#29b365",
   colorLeafyGreen: "#206a42",
+  colorAppleGreen: "#a0d36c",
+  colorLimeGreen: "#d0e57e",
   colorWhite: "#fff",
 };

And wrap the onboarding screen in a gradient:

Update: app/onboarding.tsx

@@ -1,8 +1,9 @@
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { theme } from "../theme";
 import { useUserStore } from "../store/userStore";
 import { useRouter } from "expo-router";
 import { PlantlyButton } from "../components/PlantlyButton";
+import { LinearGradient } from "expo-linear-gradient";

 export default function OnboadingScreen() {
   const toggleHasOnboarded = useUserStore((store) => store.toggleHasOnboarded);
@@ -14,9 +15,14 @@ export default function OnboadingScreen() {
   };

   return (
-    <View style={styles.container}>
+    <LinearGradient
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      colors={[theme.colorGreen, theme.colorAppleGreen, theme.colorLimeGreen]}
+      style={styles.container}
+    >
       <PlantlyButton title="Let me in!" onPress={handlePress} />
-    </View>
+    </LinearGradient>
   );
 }

Use a light statusbar

Our dark statusbar does not look that nice against the green there, so let's use Expo Status Bar to set the statusbar text color to be light.

The library should already be installed as it was in the blank template (install it with npx expo install expo-status-bar otherwise).

Update the onboarding screen with the light statusbar:

Update: app/onboarding.tsx

@@ -4,6 +4,7 @@ import { useUserStore } from "../store/userStore";
 import { useRouter } from "expo-router";
 import { PlantlyButton } from "../components/PlantlyButton";
 import { LinearGradient } from "expo-linear-gradient";
+import { StatusBar } from "expo-status-bar";

 export default function OnboadingScreen() {
   const toggleHasOnboarded = useUserStore((store) => store.toggleHasOnboarded);
@@ -21,6 +22,7 @@ export default function OnboadingScreen() {
       colors={[theme.colorGreen, theme.colorAppleGreen, theme.colorLimeGreen]}
       style={styles.container}
     >
+      <StatusBar style="light" />
       <PlantlyButton title="Let me in!" onPress={handlePress} />
     </LinearGradient>
   );

Checkpoint

Android	iOS

Checkpoint

✔️ Add a linear gradient background

Skeleton loaders

Now that you've learned about linear gradient: you can actually use linear gradient, reanimated and masked view to create highly customizable skeleton loaders in React Native.