diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx index 771ceb4..c39890b 100644 --- a/src/Toast/index.tsx +++ b/src/Toast/index.tsx @@ -40,6 +40,7 @@ export type ToastConfig = { shouldVibrate?: boolean subMessage?: string toastStyles?: StyledToastProps + opacity?: number } const statusBarHeight = getStatusBarHeight() @@ -82,7 +83,8 @@ const DEFAULT_PROPS: ToastConfig = { bg: 'muted', borderRadius: 4, alignItems: 'center' - } + }, + opacity: 1 } export const Toast: React.FC = ({ @@ -108,7 +110,8 @@ export const Toast: React.FC = ({ subMessage, toastStyles, hideAccent, - closeButtonStyles + closeButtonStyles, + opacity }) => { const isSuccess = intent === 'SUCCESS' const isInfo = intent === 'INFO' @@ -153,7 +156,7 @@ export const Toast: React.FC = ({ onPress && onPress() onClose && id && onClose(id) }} - style={{ transform: [{ translateY }, { scale }], ...shadow }} + style={{ transform: [{ translateY }, { scale }], opacity, ...shadow }} {...toastStyles} pr={!!subMessage ? 2 : 0} > diff --git a/src/Toast/styles.tsx b/src/Toast/styles.tsx index cc4a180..69bd970 100644 --- a/src/Toast/styles.tsx +++ b/src/Toast/styles.tsx @@ -21,7 +21,9 @@ import { space, SpaceProps, textAlign, - TextAlignProps + TextAlignProps, + opacity, + OpacityProps } from 'styled-system' export const systemProps = compose( @@ -32,7 +34,8 @@ export const systemProps = compose( background, border, position, - shadow + shadow, + opacity ) export type StyledToastProps = SpaceProps & @@ -45,7 +48,7 @@ export type StyledToastProps = SpaceProps & ShadowProps & { elevation?: number accentColor?: string - } + } & OpacityProps const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity) @@ -64,7 +67,8 @@ StyledToast.defaultProps = { flexDirection: 'row', accentColor: 'success', justifyContent: 'center', - borderColor: 'border' + borderColor: 'border', + opacity: 1 } export const Accent = styled.View`