react-native-toast-message 2.2.0 → 2.3.0

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/components/BaseToast.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, TouchableOpacity } from 'react-native';
 import { getTestId } from '../utils/test-id';
 import { styles } from './BaseToast.styles';
-import { Touchable } from './Touchable';
-export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
-    return (<Touchable testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
+export function BaseToast({ text1, text2, onPress, activeOpacity = 1, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
+    return (<TouchableOpacity testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
       {renderLeadingIcon && renderLeadingIcon()}
       <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
         {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
@@ -15,5 +14,5 @@ export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchab
           </Text>)}
       </View>
       {renderTrailingIcon && renderTrailingIcon()}
-    </Touchable>);
+    </TouchableOpacity>);
 }

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,15 +2,18 @@ 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;
 }
-const useNativeDriver = Platform.select({ native: true, default: false });
-export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }) {
+const useNativeDriver = Platform.select({
+    ios: true,
+    default: false
+});
+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) => {
@@ -28,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.0",
+  "version": "2.3.0",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { TouchableOpacityProps } from 'react-native';
-import { ReactChildren } from '../types';
-declare type TouchableProps = {
-    children: ReactChildren;
-} & TouchableOpacityProps;
-export declare function Touchable({ children, activeOpacity, ...rest }: TouchableProps): JSX.Element;
-export {};

package/lib/src/components/Touchable.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-export function Touchable({ children, activeOpacity = 1, ...rest }) {
-    return (<TouchableOpacity activeOpacity={activeOpacity} {...rest}>
-      {children}
-    </TouchableOpacity>);
-}