Surface is a basic container that can give depth to an element with elevation shadow. On dark theme with adaptive mode, surface is constructed by also placing a semi-transparent white overlay over a component surface. See Dark Theme for more informations. Overlay and/or shadow can be applied by specifying the elevation property both on Android and iOS.


import * as React from 'react';
import { Surface, Text } from 'react-native-paper';
import { StyleSheet } from 'react-native';

const MyComponent = () => (
  <Surface style={styles.surface}>

export default MyComponent;

const styles = StyleSheet.create({
  surface: {
    padding: 8,
    height: 80,
    width: 80,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,


children (required)
Type: React.ReactNode

Content of the Surface.

Type: StyleProp<ViewStyle>
Type: Theme