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


Usage
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}>
<Text>Surface</Text>
</Surface>
);
export default MyComponent;
const styles = StyleSheet.create({
surface: {
padding: 8,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
},
});
Props
Type:
Animated.WithAnimatedValue<StyleProp<ViewStyle>>
elevation
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:
ThemeProp
Type:
React.RefObject<View>