Learn about how to configure the elevation of a view through React Native, tips and tricks
- [Narrator] If you recall, elevation is one of the fundamental concepts, in material design, that determines the spatial relationship between objects. It also pertains to how drop shadows are drawn. Let's see how to configure it in React Native. I'm going to open up the documentation of React Native and check out the view component. There is a style property, called elevation. That's exactly what we want. Keep in mind that it only works on Android 5.0 and above and has no effect on early versions of Android or iOS.
Let's give a try. Remember the storybook tool that I showed you earlier? We're going to use it to do some quick experimentations. First, let me start storybook. In the project directory 03_01, I'll do npm run storybook. In a new window, we also need to do adb reverse tcp:7007 twice, so that the app can communicate with the storybook server.
Let me switch to the editor. I have opened the index.js file, in the storybook/stories directory. Let's now start the app from the editor. Ctrl + Shift + P, runa, which is going to launch the Android application. I'm going to show it on refractor. In a new browser window type localhost7007, which will show the initial page of the storybook.
You'll see some initial stories here. And let's fill out our new story, back in the editor. On line 44, I will just add a simple view, for now. So it's going to be a view with some very basic styles, an initial width of 350 dps wide.
Height of 350 dps, as well, with some margin, 40 dps. And finally, an elevation of 5 dps. Let's save the file and see how it looks like.
Switch back to the storybook page. We're going to get a square with some drop shadow on the device, right? Let's see this elevation story. Hmm, why it's a blank screen, what went wrong? This is the first thing that I wanted you to remember about elevation. You must set the background of the view to a solid color, otherwise the drop shadow won't show up correctly.
So let's go back to the code and fix that. We're going to set the background color to pure white, which is #FFFFFF and the last FF is the alpha value. Save it. And now it looks pretty good, you can see the drop shadow, you can see the square.
Again, the background color must be a solid color. If you lower it's alpha value, for example to 22 here, the drop shadow will now look a bit strange. That's because we did not set the background color to a solid color. So let's change it back to pure white. In React Native we can create rounded corners, using borderRadius, just as in CSS.
It's just added in our style. borderRadius, let's give it 20 dps. Save the file. A drop shadow works pretty well with the borderRadius we set in the style. We can also set elevation for other components in the same way. For example, text or image. Let me just uncomment some code that I have right here.
And save the file. You can see that I have the elevation on the text and elevation on the image, as well. Switching back to the storybook page, let's check out how that text looks like. And the image as well. Back to the code. Remember that we need to set the background color to a solid color for everything, this includes image, as well. Even if it shows an opaque image, we need to set it's background color.
One thing worth noting is that if you want to create and image with rounded corners, we need some special treatment. Let's copy this story into a new story, create a rounded image story, so that we can check out how it looks like. We'll call it Rounded Image, and give it a borderRadius of 20 dps.
Save the file. Remember to switch to the new story that we just created. It will look like this. So you still see a rectangle, here, around the image. We want to compare it with the original image and the image with the rounded corners.
This is because the borderRadius style isn't passed into the implicit view that enclosed the image. This looks like a bot, to me. But before it is fixed a workaround is to put the image inside a view which has exactly the same width, height and broderRadius and set the elevation on the view instead of the image. Let's go back to the code and fix that. On line 69, I'm going to create a view that surrounds the image, and copy the style from line 71 to 78 to the view tag.
Line 85, close the view tag. Line 79, remove the elevation set on the image. Line 82, remove the background color, so we don't need it anymore. Okay, let's save the file and see how it looks. So it has some margin there, just to make sure that we remove everything we don't need.
So on line 81, remove that margin, save. All right, so it's much better. Rounded corners and drop shadows. Finally, let's explore the object's spatial relationship defined by elevation. We'll create a few views with different elevation values. I'll use a Card component that set it's elevation prop.
Line 85, I will add a new story, One card. It's going to be this Card component, with a elevation prop. I say it's elevation 1. Under the hood, it's just setting the elevation of the view. Let's save it.
And switch to the new story that we just created. So that's a Card with some elevation value, and you can actually grab it and drag it around. Let's switch back to that inherent at three cards. Let me copy line 85 to 87, so that we can create a new story. Call it 3 cards.
Now create a view that holds all three cards. Line 91, close a view; and copy and paste line 90 a few times. For the first Card we have elevation 1. For the second Card we make it elevation 15. And the third Card, elevation 5 dps. So let's save it, and switch to the new story, 3 cards.
You can see the different drop shadows casted from these cards. If I move around these cards, you can easily see that cards with higher elevation sit on top of lower ones. Another interesting property is that a view receives touch events based on it's order, when declared in it's parent, not it's elevation value. This is a bit against intuition. For example, if we stack cCrd 15 and 5 together, even though it looks like Card 15 is on the top, Card 5 will receive and process the touch event, because it's declared after Card 15, in the code.
If we switch back to the editor, we see that our 5 here, after Card 15. What if a Card is inside another Card? How do their elevation value effect how they are positioned? Let's check it out. From line 95, I'm going to uncomment the code, and save the file. In the code you can see that line 97, this is a Card, and line 98, that's another Card.
And this Card is a child of the Card on line 97. Let's switch to the new story again. Parent children. You can see that Card number 2 inside Card 6. And Card 10, inside 5. If I move Card 6 over Card 5, you'll see that Card 10 is covered by Card 6, even though it's elevation is higher.
So a view's positioning is fairly confined by it's parent. If it's parent has elevation 5, then everything inside it's parent should be placed underneath a view with elevation 6. All right, let's recap what we have learned about elevation in React Native. It's a style property that can be set on components such as View, text and image. And it requires a solid background color to render the drop shadow properly.
The elevation value of a view determines it's position on the z direction, in the 3D environment, however this positioning is only meaningful inside it's parent. Finally, touch events are dispatched based on the declaration order of the views, not their elevation values. Now go ahead and do some more experimentations with the exercise file. Create some new stories, add some more styles, or whatever you like.
Experimentations are a great way to learn about elevation.
- Using material design principles
- Working with units and measurements
- Using elevation and drop shadows
- Leveraging grids and keylines
- Setting up React Native for Android
- Building floating action buttons
- Creating an immersive experience
- Adding motion and transitions
- Animating icons
- Using component libraries