import * as React from 'react'; import { Animated, SafeAreaView, StyleProp, StyleSheet, ViewStyle, View, } from 'react-native'; import Button from './Button'; import Surface from './Surface'; import Text from './Typography/Text'; import { withTheme } from '../core/theming'; export type SnackbarProps = React.ComponentProps & { /** * Whether the Snackbar is currently visible. */ visible: boolean; /** * Label and press callback for the action button. It should contain the following properties: * - `label` - Label of the action button * - `onPress` - Callback that is called when action button is pressed. */ action?: Omit, 'children'> & { label: string; }; /** * The duration for which the Snackbar is shown. */ duration?: number; /** * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called. */ onDismiss: () => void; /** * Text content of the Snackbar. */ children: React.ReactNode; /** * Style for the wrapper of the snackbar */ wrapperStyle?: StyleProp; style?: StyleProp; ref?: React.RefObject; /** * @optional */ theme: ReactNativePaper.Theme; }; const DURATION_SHORT = 4000; const DURATION_MEDIUM = 7000; const DURATION_LONG = 10000; /** * Snackbars provide brief feedback about an operation through a message at the bottom of the screen. * Snackbar by default uses `onSurface` color from theme. *
* *
* * ## Usage * ```js * import * as React from 'react'; * import { View, StyleSheet } from 'react-native'; * import { Button, Snackbar } from 'react-native-paper'; * * const MyComponent = () => { * const [visible, setVisible] = React.useState(false); * * const onToggleSnackBar = () => setVisible(!visible); * * const onDismissSnackBar = () => setVisible(false); * * return ( * * * { * // Do something * }, * }}> * Hey there! I'm a Snackbar. * * * ); * }; * * const styles = StyleSheet.create({ * container: { * flex: 1, * justifyContent: 'space-between', * }, * }); * * export default MyComponent; * ``` */ const Snackbar = ({ visible, action, duration = DURATION_MEDIUM, onDismiss, children, wrapperStyle, style, theme, ...rest }: SnackbarProps) => { const { current: opacity } = React.useRef( new Animated.Value(0.0) ); const [hidden, setHidden] = React.useState(!visible); const hideTimeout = React.useRef(undefined); const { scale } = theme.animation; React.useEffect(() => { return () => { if (hideTimeout.current) clearTimeout(hideTimeout.current); }; }, []); React.useLayoutEffect(() => { if (visible) { // show if (hideTimeout.current) clearTimeout(hideTimeout.current); setHidden(false); Animated.timing(opacity, { toValue: 1, duration: 200 * scale, useNativeDriver: true, }).start(({ finished }) => { if (finished) { const isInfinity = duration === Number.POSITIVE_INFINITY || duration === Number.NEGATIVE_INFINITY; if (finished && !isInfinity) { hideTimeout.current = (setTimeout( onDismiss, duration ) as unknown) as NodeJS.Timeout; } } }); } else { // hide if (hideTimeout.current) clearTimeout(hideTimeout.current); Animated.timing(opacity, { toValue: 0, duration: 100 * scale, useNativeDriver: true, }).start(({ finished }) => { if (finished) setHidden(true); }); } }, [visible, duration, opacity, scale, onDismiss]); const { colors, roundness } = theme; if (hidden) return null; const { style: actionStyle, label: actionLabel, onPress: onPressAction, ...actionProps } = action || {}; return ( } {...rest} > {children} {action ? ( ) : null} ); }; /** * Show the Snackbar for a short duration. */ Snackbar.DURATION_SHORT = DURATION_SHORT; /** * Show the Snackbar for a medium duration. */ Snackbar.DURATION_MEDIUM = DURATION_MEDIUM; /** * Show the Snackbar for a long duration. */ Snackbar.DURATION_LONG = DURATION_LONG; const styles = StyleSheet.create({ wrapper: { position: 'absolute', bottom: 0, width: '100%', }, container: { elevation: 6, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', margin: 8, borderRadius: 4, }, content: { marginLeft: 16, marginVertical: 14, flexWrap: 'wrap', flex: 1, }, button: { marginHorizontal: 8, marginVertical: 6, }, }); export default withTheme(Snackbar);