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 information. Overlay and shadow can be applied by specifying the elevation property both on Android and iOS.

Surface on Android
Surface on iOS


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

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

export default MyComponent;

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


Type: React.ReactNode

Content of the Surface.

Type: Animated.WithAnimatedValue<StyleProp<ViewStyle>>
Available in v5.x with theme version 3
Type: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value
Default value: 1

Changes shadows and background on iOS and Android. Used to create UI hierarchy between components.

Note: In version 2 the elevation prop was accepted via style prop i.e. style={{ elevation: 4 }}. It's no longer supported with theme version 3 and you should use elevation property instead.

Type: string

TestID used for testing purposes

Edit this page