In this lesson, you will learn how to create visual depth by applying platform-specific shadows to make your components appear as though they are lifting off the screen.
In React Native, "elevation" and "shadow casting" are not handled by a single cross-platform property. Because Android and iOS have different underlying rendering engines, you must style your components to bridge the gap between their unique shadow systems.
The Android Approach: Elevation
On Android, we use the elevation property. It is straightforward: you provide a numeric value, and the system automatically calculates the shadow spread, color, and blur based on that depth. The higher the number, the further the element "floats" above the background.
The iOS Approach: Shadow Props
iOS relies on a set of four specific properties: shadowColor, shadowOffset (width/height), shadowOpacity, and shadowRadius. Unlike Android, these properties allow for granular control over the look of the shadow, but they require all four to be set for the shadow to appear.
Putting It Together
To keep your UI consistent across both platforms, you should create a reusable style object that applies the correct properties for the device being used:
const styles = StyleSheet.create({
card: {
backgroundColor: 'white',
// iOS shadow properties
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android elevation property
elevation: 5,
}
});
When applying these, remember that elevation behaves much like z-index in web development—it affects both the visual shadow and the stacking order of components. On iOS, you may still need to use zIndex separately if you want to control which elements overlap others, as shadowOpacity only handles the visual "glow" and not the physical stacking hierarchy. By combining these, you create a tactile interface that feels grounded yet responsive to user interaction.
Key Takeaway: Use elevation for Android’s automated depth and the shadow quartet for iOS’s design precision to create a unified sense of physical presence.