react-native-toast-message 2.2.1 → 2.3.1

package/lib/src/Toast.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { ToastProps, ToastShowParams } from './types';
-export declare function Toast(props: ToastProps): JSX.Element;
+export declare function Toast(props: ToastProps): React.ReactElement;
 export declare namespace Toast {
     var show: (params: ToastShowParams) => void;
     var hide: (params?: void | undefined) => void;

package/lib/src/ToastUI.js

@@ -35,8 +35,8 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 }
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
-    const { position, topOffset, bottomOffset, keyboardOffset, swipeable } = options;
-    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} swipeable={swipeable} onHide={hide}>
+    const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable } = options;
+    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} avoidKeyboard={avoidKeyboard} swipeable={swipeable} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);
 }

package/lib/src/components/AnimatedContainer.d.ts

@@ -9,6 +9,7 @@ export declare type AnimatedContainerProps = {
     swipeable: boolean;
     bottomOffset: number;
     keyboardOffset: number;
+    avoidKeyboard: boolean;
     onHide: () => void;
     onRestorePosition?: () => void;
 };
@@ -20,4 +21,4 @@ export declare type AnimatedContainerProps = {
  */
 export declare function dampingFor(gesture: PanResponderGestureState, position: ToastPosition): number;
 export declare function animatedValueFor(gesture: PanResponderGestureState, position: ToastPosition, damping: number): number;
-export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;
+export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -37,7 +37,7 @@ export function animatedValueFor(gesture, position, damping) {
             throw new Error(`Toast position: ${position} not implemented`);
     }
 }
-export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition = noop, swipeable }) {
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition = noop, swipeable }) {
     const { log } = useLogger();
     const { computeViewDimensions, height } = useViewDimensions();
     const { animatedValue, animate, animationStyles } = useSlideAnimation({
@@ -45,7 +45,8 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         height,
         topOffset,
         bottomOffset,
-        keyboardOffset
+        keyboardOffset,
+        avoidKeyboard
     });
     const onDismiss = React.useCallback(() => {
         log('Swipe, dismissing');

package/lib/src/hooks/useSlideAnimation.d.ts

@@ -7,11 +7,12 @@ declare type UseSlideAnimationParams = {
     topOffset: number;
     bottomOffset: number;
     keyboardOffset: number;
+    avoidKeyboard: boolean;
 };
-export declare function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }: UseSlideAnimationParams & {
+export declare function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams & {
     keyboardHeight: number;
 }): number[];
-export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }: UseSlideAnimationParams): {
+export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams): {
     animatedValue: React.MutableRefObject<Animated.Value>;
     animate: (toValue: number) => void;
     animationStyles: {

package/lib/src/hooks/useSlideAnimation.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Animated, Platform } from 'react-native';
 import { additiveInverseArray } from '../utils/array';
 import { useKeyboard } from './useKeyboard';
-export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }) {
+export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }) {
     const offset = position === 'bottom' ? bottomOffset : topOffset;
-    const keyboardAwareOffset = position === 'bottom' ? keyboardHeight + keyboardOffset : 0;
+    const keyboardAwareOffset = position === 'bottom' && avoidKeyboard ? keyboardHeight + keyboardOffset : 0;
     const range = [-(height * 2), Math.max(offset, keyboardAwareOffset)];
     const outputRange = position === 'bottom' ? additiveInverseArray(range) : range;
     return outputRange;
@@ -13,7 +13,7 @@ const useNativeDriver = Platform.select({
     ios: true,
     default: false
 });
-export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }) {
+export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }) {
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
@@ -31,9 +31,10 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
             topOffset,
             bottomOffset,
             keyboardHeight,
-            keyboardOffset
+            keyboardOffset,
+            avoidKeyboard
         })
-    }), [position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset]);
+    }), [position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard]);
     const opacity = animatedValue.current.interpolate({
         inputRange: [0, 0.7, 1],
         outputRange: [0, 1, 1]

package/lib/src/types/index.d.ts

@@ -57,6 +57,12 @@ export declare type ToastOptions = {
      * Default value: `10`
      */
     keyboardOffset?: number;
+    /**
+     * When `true` offset calculation use KeyboardHeight in position calculation.
+     * If you put <Toast /> inside a keyboard aware component and position is 'bottom', you should set this to `false`.
+     * Default value: true
+     */
+    avoidKeyboard?: boolean;
     /**
      * Called when Toast is shown
      */
@@ -145,6 +151,11 @@ export declare type ToastProps = {
      * Default value: `4000`
      */
     visibilityTime?: number;
+    /**
+     * When `true`, the Toast can be dismissed by a swipe gesture, specified by the `swipeable` prop.
+     * Default value: `true`
+     */
+    swipeable?: boolean;
     /**
      * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
      * specified by the `visibilityTime` prop.
@@ -169,6 +180,12 @@ export declare type ToastProps = {
      * Default value: `10`
      */
     keyboardOffset?: number;
+    /**
+     * When `true` offset calculation use KeyboardHeight in position calculation.
+     * If you put <Toast /> inside a keyboard aware component and position is 'bottom', you should set this to `false`.
+     * Default value: true
+     */
+    avoidKeyboard?: boolean;
     /**
      * Called when any Toast is shown
      */

package/lib/src/useToast.js

@@ -18,6 +18,7 @@ export const DEFAULT_OPTIONS = {
     topOffset: 40,
     bottomOffset: 40,
     keyboardOffset: 10,
+    avoidKeyboard: true,
     onShow: noop,
     onHide: noop,
     onPress: noop,
@@ -43,7 +44,7 @@ export function useToast({ defaultOptions }) {
     }, [clearTimer, log, options]);
     const show = React.useCallback((params) => {
         log(`Showing with params: ${JSON.stringify(params)}`);
-        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props } = params;
+        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, avoidKeyboard = initialOptions.avoidKeyboard, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props } = params;
         setData({
             text1,
             text2
@@ -58,6 +59,7 @@ export function useToast({ defaultOptions }) {
             topOffset,
             bottomOffset,
             keyboardOffset,
+            avoidKeyboard,
             onShow,
             onHide,
             onPress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",