diff --git a/src/ToastUI.tsx b/src/ToastUI.tsx index 57c47c8c..e59df5a2 100644 --- a/src/ToastUI.tsx +++ b/src/ToastUI.tsx @@ -67,7 +67,7 @@ function renderComponent({ export function ToastUI(props: ToastUIProps) { const { isVisible, options, hide } = props; - const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable } = options; + const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable, containerStyle } = options; return ( + onHide={hide} + containerStyle={containerStyle}> {renderComponent(props)} ); diff --git a/src/components/AnimatedContainer.tsx b/src/components/AnimatedContainer.tsx index 3f7bac4a..ed07ef94 100644 --- a/src/components/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { Animated, Dimensions, PanResponderGestureState } from 'react-native'; +import React, { useEffect } from 'react'; +import { Animated, Dimensions, PanResponderGestureState, StyleProp, ViewStyle } from 'react-native'; import { useLogger, useGesture } from '../contexts'; import { @@ -24,6 +24,7 @@ export type AnimatedContainerProps = { avoidKeyboard: boolean; onHide: () => void; onRestorePosition?: () => void; + containerStyle?: StyleProp; }; /** @@ -78,7 +79,8 @@ export function AnimatedContainer({ avoidKeyboard, onHide, onRestorePosition = noop, - swipeable + swipeable, + containerStyle }: AnimatedContainerProps) { const { log } = useLogger(); const { panning } = useGesture(); @@ -136,6 +138,8 @@ export function AnimatedContainer({ disable, }); + useEffect(() => { console.log("CUSTOM TOAST LIBRARY LOADED");}, []); + React.useLayoutEffect(() => { const newAnimationValue = isVisible ? 1 : 0; animate(newAnimationValue); @@ -145,7 +149,7 @@ export function AnimatedContainer({ ; }; export type ToastData = { @@ -216,4 +217,5 @@ export type ToastProps = { * Called on any Toast press */ onPress?: () => void; + containerStyle?: StyleProp; }; diff --git a/src/useToast.ts b/src/useToast.ts index 99a239f6..70a171f4 100644 --- a/src/useToast.ts +++ b/src/useToast.ts @@ -26,7 +26,8 @@ export const DEFAULT_OPTIONS: Required = { onShow: noop, onHide: noop, onPress: noop, - props: {} + props: {}, + containerStyle: null, }; export type UseToastParams = { @@ -88,7 +89,8 @@ export function useToast({ defaultOptions }: UseToastParams) { onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, - props = initialOptions.props + props = initialOptions.props, + containerStyle = initialOptions.containerStyle, } = params; setData({ text1, @@ -110,7 +112,8 @@ export function useToast({ defaultOptions }: UseToastParams) { onHide, onPress, swipeable, - props + props, + containerStyle, }) as Required ); // TODO: validate input