UNPKG

react-native-paper

Version:
59 lines (56 loc) 2.01 kB
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } import * as React from 'react'; import { View, StyleSheet } from 'react-native'; /** * A component to show a scrollable content in a Dialog. The component only provides appropriate styling. * For the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement. * * <div class="screenshots"> * <figure> * <img class="medium" src="screenshots/dialog-scroll-area.gif" /> * </figure> * </div> * * ## Usage * ```js * import * as React from 'react'; * import { ScrollView } from 'react-native'; * import { Dialog, Portal, Text } from 'react-native-paper'; * * const MyComponent = () => { * const [visible, setVisible] = React.useState(false); * * const hideDialog = () => setVisible(false); * * return ( * <Portal> * <Dialog visible={visible} onDismiss={hideDialog}> * <Dialog.ScrollArea> * <ScrollView contentContainerStyle={{paddingHorizontal: 24}}> * <Text>This is a scrollable area</Text> * </ScrollView> * </Dialog.ScrollArea> * </Dialog> * </Portal> * ); * }; * * export default MyComponent; * ``` */ const DialogScrollArea = props => /*#__PURE__*/React.createElement(View, _extends({}, props, { style: [styles.container, props.style] }), props.children); DialogScrollArea.displayName = 'Dialog.ScrollArea'; const styles = StyleSheet.create({ container: { borderColor: 'rgba(0, 0, 0, .12)', borderTopWidth: StyleSheet.hairlineWidth, borderBottomWidth: StyleSheet.hairlineWidth, paddingHorizontal: 24, flexGrow: 1, flexShrink: 1 } }); export default DialogScrollArea; //# sourceMappingURL=DialogScrollArea.js.map