Create Linear Gradients in React Native Using React Native Linear Gradient
Linear gradients can be a useful tool for building your app UI. You can use it to create fancy backgrounds or buttons for your app or improve displaying text on an image.
Although Linear Gradients aren't part of React Native core, there are both Expo and Pure React Native libraries that support it.
Kadi Kraman: [0:00] We start with a brand new, plain React Native project that just prints out, Hello, world! Linear gradient can be used on both Expo and plain React Native projects. The API is identical, but the installation instructions are different. If you're using Expo, you'll need to install it using expo install expo-linear-gradient and import library from expo-linear-gradient.
[0:23] This project is using plain React Native so we will use react-native-linear-gradient, which can be installed using Yarn or npm. We'll copy the Yarn command and paste it in to our terminal. Now, since this project is also using Native modules, we will have to cd into the iOS directory and run pod install to install the libraries on iOS.
[0:45] An easy way to tell whether an open-source library involves Native code is if they have an iOS and Android directory in that code base.
[0:53] After that, we'll go back to our root directory and run npx react-native run-ios to rebuild our project. Now that the project has been rebuilt, let's import LinearGradient from react-native-linear-gradient. Remember, if you're using Expo, you will have to import this from expo-linear-gradient instead, and it's a named Expo rather than default one. The rest of the API is the same.
[1:19] Let's do LinearGradient. Let's pass in some colors. I'm going to do an array of pink, purple, and blue. I need to give this a size. Let's do gradient, a height of 200, and a width of 200. Let's pass this style using the style prop, style={styles.gradient} and save. Now, we have a square with a vertical gradient.
[1:52] Going back to the documentation, we can see that we can adjust the direction of the gradient using the start and the end properties. Let's do start={{x:, y:}} and end={{x:, y:1}} and save. You'll notice that nothing actually happened because that is the default value.
[2:15] Changing this to , 1, , will reverse the direction of the gradient, so it goes from bottom to top. Changing this to , , 1, will have the gradient go from left to right. Changing this to 1, , , 1 will have it go right to left. Changing this to 1, , , 1 will make the gradient diagonal and same for , 1, 1, .
[2:43] These values can be tweaked as much as you want, based on the gradient that you need. Let's go back to , , 1, so the gradient goes from left to right. You can also pass children inside this linear gradient.
[2:59] To make this a rainbow button, we could pass in all the colors of the rainbow. Let's make the height a little bit shorter. Let's maybe do 80. Let's do justifyContent center, alignItems center, and borderRadius 10. Let's pass in a text inside. Let's do a text and Rainbow. Let's make this text white. Let's do styles text. Let's do text with color white and fontSize 24.
[3:39] After saving this, we have a linear gradient with the word Rainbow inside. The white text is a little bit hard to make out. We can also apply a textShadow of black and a textShadowRadius of 2.