concept elevation in category react native

This is an excerpt from Manning's book React Native in Action. Login to get full access to this book.

Approximating drop shadows on Android devices with elevation

How do you get the same effect on Android devices? The truth is, you can’t. You can use Android’s elevation style to affect the z-order of components. If two or more components occupy the same space, you can decide which one should be in front by giving it the larger elevation and therefore the larger z-index, which will create a small drop shadow, but it isn’t nearly as striking as the shadow effects you can achieve on iOS. Note that this only applies to Android, because iOS doesn’t support the elevation style and will gladly ignore it if it’s specified.

Nevertheless, let’s see elevation in action. To do so, you’ll create a View component with three boxes, each of which is positioned absolutely. You’ll give them three different elevations—1, 2, and 3—and then you’ll reverse the assignment of the elevations and see how that affects the layout. Figure 5.3 shows the results of these elevation adjustments.

Table 5.3 shows the absolute positions and elevations used for each group of boxes. Notice that nothing has changed except the elevation assigned to each of the boxes. iOS ignores the style and always renders box C on top of box B, and box B on top of box A. But Android respects the style and flips the order in which it renders the boxes, so box A is now on top of box B, and box B is on top of box C.

Figure 5.3 Examples of using the elevation style on iOS and Android. On iOS, elevation is ignored; all components retain the same z-order, so whatever component is last in the layout is on top. On Android, elevation is used, and the z-order is changed; in the second example, where the elevation assignments are reversed, A is on top.

Table 5.3 Elevation settings for figure 5.3

Example	color	top	left	elevation
A	Red	0	0	1
B	Orange	20	20	2
C	Blue	40	40	3
A	Red	0	0	3
B	Orange	20	20	2
C	Blue	40	40	1