Skip to main content

Surface

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

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.

💬 Feedback

Import​

import { Surface } from "@react-native-material/core";

Elevation​

Props​

category

The relative size of the surface.

Type: ShapeCategory;

Optional: Yes


elevation

The elevation of the surface.

Type: Elevation;

Default: 0

Optional: Yes


style

Type: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;

Optional: Yes


...ViewProps