Surface
Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.
import { Surface } from "@react-native-material/core";
<Surface style={{ width: 120, height: 120, elevation: 2 }} /><Surface style={{ width: 120, height: 120, elevation: 4 }} /><Surface style={{ width: 120, height: 120, elevation: 6 }} />
Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:
- Corner angles and curves
- Edge angles and curves
The size of shape changes can be subtle or more significant.