| 1 | import * as React from 'react';
|
| 2 | import { Animated, StyleProp, View, ViewStyle } from 'react-native';
|
| 3 | import type { ThemeProp } from '../types';
|
| 4 | type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
|
| 5 | export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
|
| 6 | /**
|
| 7 | * Content of the `Surface`.
|
| 8 | */
|
| 9 | children: React.ReactNode;
|
| 10 | style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
| 11 | /**
|
| 12 | * @supported Available in v5.x with theme version 3
|
| 13 | * Changes shadows and background on iOS and Android.
|
| 14 | * Used to create UI hierarchy between components.
|
| 15 | *
|
| 16 | * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
|
| 17 | *
|
| 18 | * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
|
| 19 | * It's no longer supported with theme version 3 and you should use `elevation` property instead.
|
| 20 | */
|
| 21 | elevation?: Elevation;
|
| 22 | /**
|
| 23 | * @supported Available in v5.x with theme version 3
|
| 24 | * Mode of the Surface.
|
| 25 | * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
|
| 26 | * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
|
| 27 | */
|
| 28 | mode?: 'flat' | 'elevated';
|
| 29 | /**
|
| 30 | * @optional
|
| 31 | */
|
| 32 | theme?: ThemeProp;
|
| 33 | /**
|
| 34 | * TestID used for testing purposes
|
| 35 | */
|
| 36 | testID?: string;
|
| 37 | ref?: React.RefObject<View>;
|
| 38 | };
|
| 39 | /**
|
| 40 | * Surface is a basic container that can give depth to an element with elevation shadow.
|
| 41 | * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
|
| 42 | * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
|
| 43 | * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
|
| 44 | *
|
| 45 | * ## Usage
|
| 46 | * ```js
|
| 47 | * import * as React from 'react';
|
| 48 | * import { Surface, Text } from 'react-native-paper';
|
| 49 | * import { StyleSheet } from 'react-native';
|
| 50 | *
|
| 51 | * const MyComponent = () => (
|
| 52 | * <Surface style={styles.surface} elevation={4}>
|
| 53 | * <Text>Surface</Text>
|
| 54 | * </Surface>
|
| 55 | * );
|
| 56 | *
|
| 57 | * export default MyComponent;
|
| 58 | *
|
| 59 | * const styles = StyleSheet.create({
|
| 60 | * surface: {
|
| 61 | * padding: 8,
|
| 62 | * height: 80,
|
| 63 | * width: 80,
|
| 64 | * alignItems: 'center',
|
| 65 | * justifyContent: 'center',
|
| 66 | * },
|
| 67 | * });
|
| 68 | * ```
|
| 69 | */
|
| 70 | declare const Surface: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
|
| 71 | export default Surface;
|
| 72 | //# sourceMappingURL=Surface.d.ts.map |
| \ | No newline at end of file |