react-native-toast-message 2.2.0-beta.2 → 3.0.0-beta.1

package/README.md

@@ -2,8 +2,8 @@
 
 [![npm version](https://img.shields.io/npm/v/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
 [![npm downloads](https://img.shields.io/npm/dw/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
-[![Build](https://github.com/calintamas/react-native-toast-message/workflows/tests/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions?query=workflow%3Atests)
-[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg?branch=master)](https://coveralls.io/github/calintamas/react-native-toast-message?branch=master)
+[![Build](https://github.com/calintamas/react-native-toast-message/actions/workflows/publish.yml/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions/workflows/publish.yml?query=workflow%3Abuild)
+[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg?branch=master)](https://coveralls.io/github/calintamas/react-native-toast-message?branch=main)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 Animated toast message component for React Native.
@@ -20,7 +20,7 @@ Animated toast message component for React Native.
 
 ## Documentation
 
-> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](./CHANGELOG.md#200).
+> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](https://github.com/calintamas/react-native-toast-message/releases/tag/v2.0.0).
 
 - [Quick start](./docs/quick-start.md)
 - [API](./docs/api.md)

package/ios/SafeAreaModule.h

@@ -0,0 +1,5 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RNSafeAreaModule : NSObject <RCTBridgeModule>
+
+@end

package/ios/SafeAreaModule.mm

@@ -0,0 +1,27 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+@interface SafeAreaModule : NSObject <RCTBridgeModule>
+@end
+
+@implementation SafeAreaModule
+RCT_EXPORT_MODULE();
+
+RCT_EXPORT_METHOD(getSafeAreaInsets:(RCTResponseSenderBlock)callback) {
+    UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
+    UIEdgeInsets safeAreaInsets = UIEdgeInsetsZero;
+
+    if (@available(iOS 11.0, *)) {
+        safeAreaInsets = rootViewController.view.safeAreaInsets;
+    }
+
+    NSDictionary *result = @{
+        @"top": @(safeAreaInsets.top),
+        @"bottom": @(safeAreaInsets.bottom),
+        @"left": @(safeAreaInsets.left),
+        @"right": @(safeAreaInsets.right)
+    };
+
+    callback(@[[NSNull null], result]);
+}
+
+@end

package/lib/src/Toast.d.ts

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

package/lib/src/Toast.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EnvironmentProvider, LoggerProvider } from './contexts';
+import { LoggerProvider } from './contexts';
 import { ToastUI } from './ToastUI';
 import { useToast } from './useToast';
 const ToastRoot = React.forwardRef((props, ref) => {
@@ -33,7 +33,7 @@ function addNewRef(newRef) {
 function removeOldRef(oldRef) {
     refs = refs.filter((r) => r.current !== oldRef);
 }
-export function Toast({ useNativeDriver, ...props }) {
+export function Toast(props) {
     const toastRef = React.useRef(null);
     /*
       This must use `useCallback` to ensure the ref doesn't get set to null and then a new ref every render.
@@ -53,9 +53,7 @@ export function Toast({ useNativeDriver, ...props }) {
         }
     }, []);
     return (<LoggerProvider enableLogs={false}>
-      <EnvironmentProvider useNativeDriver={useNativeDriver}>
-        <ToastRoot ref={setRef} {...props}/>
-      </EnvironmentProvider>
+      <ToastRoot ref={setRef} {...props}/>
     </LoggerProvider>);
 }
 /**

package/lib/src/ToastUI.js

@@ -10,14 +10,14 @@ const defaultToastConfig = {
 };
 function renderComponent({ data, options, config, isVisible, show, hide }) {
     const { text1, text2 } = data;
-    const { type, onPress, position, props } = options;
+    const { type, onPress, text1Style, text2Style, position, props } = options;
     const toastConfig = {
         ...defaultToastConfig,
         ...config
     };
     const ToastComponent = toastConfig[type];
     if (!ToastComponent) {
-        throw new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/custom-layouts.md`);
+        throw new Error(`Toast type: '${type}' does not exist. You can add it via the 'config' prop on the Toast instance. Learn more: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`);
     }
     return ToastComponent({
         position,
@@ -25,6 +25,8 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
         isVisible,
         text1,
         text2,
+        text1Style,
+        text2Style,
         show,
         hide,
         onPress,
@@ -33,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 } = options;
-    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
+    const { position, topOffset, bottomOffset, keyboardOffset, swipeable } = options;
+    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} swipeable={swipeable} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);
 }

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

@@ -6,6 +6,7 @@ export declare type AnimatedContainerProps = {
     isVisible: boolean;
     position: ToastPosition;
     topOffset: number;
+    swipeable: boolean;
     bottomOffset: number;
     keyboardOffset: number;
     onHide: () => void;
@@ -19,4 +20,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 }: AnimatedContainerProps): JSX.Element;
+export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -37,10 +37,10 @@ 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 }) {
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition = noop, swipeable }) {
     const { log } = useLogger();
     const { computeViewDimensions, height } = useViewDimensions();
-    const { animatedValue, animate, defaultStyles, animationStyles } = useSlideAnimation({
+    const { animatedValue, animate, animationStyles } = useSlideAnimation({
         position,
         height,
         topOffset,
@@ -66,16 +66,17 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         animatedValue,
         computeNewAnimatedValueForGesture,
         onDismiss,
-        onRestore
+        onRestore,
+        disable: !swipeable
     });
     React.useLayoutEffect(() => {
         const newAnimationValue = isVisible ? 1 : 0;
         animate(newAnimationValue);
     }, [animate, isVisible]);
-    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], defaultStyles, animationStyles]} 
+    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} 
     // This container View is never the target of touch events but its subviews can be.
     // By doing this, tapping buttons behind the Toast is allowed
-    pointerEvents='box-none' {...panResponder.panHandlers}>
+    pointerEvents={isVisible ? 'box-none' : 'none'} {...panResponder.panHandlers}>
       {children}
     </Animated.View>);
 }

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

@@ -1,4 +1 @@
-export { LoggerProvider, useLogger } from './LoggerContext';
-export type { LoggerContextType } from './LoggerContext';
-export { EnvironmentProvider, useEnvironmentContext } from './EnvironmentContext';
-export type { EnvironmentContextType } from './EnvironmentContext';
+export * from './LoggerContext';

package/lib/src/contexts/index.js

@@ -1,2 +1 @@
-export { LoggerProvider, useLogger } from './LoggerContext';
-export { EnvironmentProvider, useEnvironmentContext } from './EnvironmentContext';
+export * from './LoggerContext';

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

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useSafeArea';

package/lib/src/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useSafeArea';

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

@@ -7,8 +7,9 @@ export declare type UsePanResponderParams = {
     computeNewAnimatedValueForGesture: (gesture: PanResponderGestureState) => number;
     onDismiss: () => void;
     onRestore: () => void;
+    disable?: boolean;
 };
-export declare function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore }: UsePanResponderParams): {
+export declare function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, disable }: UsePanResponderParams): {
     panResponder: import("react-native").PanResponderInstance;
     onMove: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
     onRelease: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;

package/lib/src/hooks/usePanResponder.js

@@ -13,12 +13,18 @@ export function shouldDismissView(newAnimatedValue, gesture) {
     return (newAnimatedValue <= dismissThreshold ||
         (Math.abs(vy) >= dismissThreshold && dy < 0));
 }
-export function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore }) {
+export function usePanResponder({ animatedValue, computeNewAnimatedValueForGesture, onDismiss, onRestore, disable }) {
     const onMove = React.useCallback((_event, gesture) => {
+        if (disable) {
+            return;
+        }
         const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
         animatedValue.current?.setValue(newAnimatedValue);
-    }, [animatedValue, computeNewAnimatedValueForGesture]);
+    }, [animatedValue, computeNewAnimatedValueForGesture, disable]);
     const onRelease = React.useCallback((_event, gesture) => {
+        if (disable) {
+            return;
+        }
         const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
         if (shouldDismissView(newAnimatedValue, gesture)) {
             onDismiss();
@@ -26,7 +32,7 @@ export function usePanResponder({ animatedValue, computeNewAnimatedValueForGestu
         else {
             onRestore();
         }
-    }, [computeNewAnimatedValueForGesture, onDismiss, onRestore]);
+    }, [computeNewAnimatedValueForGesture, onDismiss, onRestore, disable]);
     const panResponder = React.useMemo(() => PanResponder.create({
         onMoveShouldSetPanResponder: shouldSetPanResponder,
         onMoveShouldSetPanResponderCapture: shouldSetPanResponder,

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

@@ -0,0 +1,10 @@
+declare type TSafeArea = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export declare const useSafeArea: () => {
+    safeAreaInsets: TSafeArea | null;
+};
+export {};

package/lib/src/hooks/useSafeArea.js

@@ -0,0 +1,25 @@
+import { NativeModules, StatusBar } from 'react-native';
+import { useEffect, useState } from "react";
+import { isIOS } from "../utils/platform";
+import { SCREEN_HEIGHT, WINDOW_HEIGHT } from "../utils/dimension";
+export const useSafeArea = () => {
+    const [safeAreaInsets, setSafeAreaInsets] = useState(null);
+    useEffect(() => {
+        if (isIOS()) {
+            NativeModules?.SafeAreaModule?.getSafeAreaInsets((error, result) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    setSafeAreaInsets(result);
+                }
+            });
+        }
+        else {
+            const statusBarHeight = StatusBar.currentHeight ?? 0;
+            const bottomInset = SCREEN_HEIGHT - WINDOW_HEIGHT - statusBarHeight;
+            setSafeAreaInsets({ top: statusBarHeight, bottom: bottomInset, left: 0, right: 0 });
+        }
+    }, []);
+    return { safeAreaInsets };
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated } from 'react-native';
 import { ToastPosition } from '../types';
-export declare type UseSlideAnimationParams = {
+declare type UseSlideAnimationParams = {
     position: ToastPosition;
     height: number;
     topOffset: number;
@@ -14,11 +14,6 @@ export declare function translateYOutputRangeFor({ position, height, topOffset,
 export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset }: UseSlideAnimationParams): {
     animatedValue: React.MutableRefObject<Animated.Value>;
     animate: (toValue: number) => void;
-    defaultStyles: {
-        transform: {
-            translateY: number;
-        }[];
-    };
     animationStyles: {
         opacity: Animated.AnimatedInterpolation;
         transform: {
@@ -26,3 +21,4 @@ export declare function useSlideAnimation({ position, height, topOffset, bottomO
         }[];
     };
 };
+export {};

package/lib/src/hooks/useSlideAnimation.js

@@ -1,42 +1,25 @@
 import React from 'react';
-import { Animated } from 'react-native';
-import { useEnvironmentContext } from '../contexts';
+import { Animated, Platform } from 'react-native';
+import { additiveInverseArray } from '../utils/array';
 import { useKeyboard } from './useKeyboard';
-const startPointFor = (position, height) => {
-    const value = height * 2;
-    if (position === 'top') {
-        return -value;
-    }
-    return value;
-};
 export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset }) {
-    const startPoint = startPointFor(position, height);
-    switch (position) {
-        case 'bottom': {
-            const keyboardAwareOffset = keyboardHeight + keyboardOffset;
-            const range = [startPoint, -Math.max(bottomOffset, keyboardAwareOffset)];
-            return range;
-        }
-        case 'top': {
-            const keyboardAwareOffset = 0;
-            const range = [startPoint, Math.max(topOffset, keyboardAwareOffset)];
-            return range;
-        }
-        default:
-            throw new Error(`Position '${position}' not supported`);
-    }
+    const offset = position === 'bottom' ? bottomOffset : topOffset;
+    const keyboardAwareOffset = position === 'bottom' ? 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 } = useEnvironmentContext();
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver: !!useNativeDriver,
+            useNativeDriver,
             friction: 8
         }).start();
-    }, [useNativeDriver]);
+    }, []);
     const translateY = React.useMemo(() => animatedValue.current.interpolate({
         inputRange: [0, 1],
         outputRange: translateYOutputRangeFor({
@@ -52,17 +35,9 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
         inputRange: [0, 0.7, 1],
         outputRange: [0, 1, 1]
     });
-    const defaultStyles = {
-        transform: [
-            {
-                translateY: startPointFor(position, height)
-            }
-        ]
-    };
     return {
         animatedValue,
         animate,
-        defaultStyles,
         animationStyles: {
             opacity,
             transform: [

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
 export declare type ReactChildren = React.ReactNode;
-export declare type ToastType = string;
+export declare type ToastType = 'success' | 'error' | 'info' | (string & {});
 export declare type ToastPosition = 'top' | 'bottom';
 export declare type ToastOptions = {
     /**
@@ -9,23 +9,36 @@ export declare type ToastOptions = {
      * Default value: `success`
      */
     type?: ToastType;
+    /**
+     * Style for the header text in the Toast (text1).
+     */
+    text1Style?: StyleProp<TextStyle>;
+    /**
+     * Style for the inner message text in the Toast (text2).
+     */
+    text2Style?: StyleProp<TextStyle>;
     /**
      * Toast position.
      * Default value: `top`
      */
     position?: ToastPosition;
     /**
-     * When `true`, the visible Toast automatically hides after a certain number of seconds,
+     * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
      * specified by the `visibilityTime` prop.
      * Default value: `true`
      */
     autoHide?: boolean;
     /**
-     * Number of seconds after which Toast automatically hides.
+     * Number of milliseconds after which Toast automatically hides.
      * Has effect only in conjunction with `autoHide` prop set to `true`.
      * 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;
     /**
      * Offset from the top of the screen (in px).
      * Has effect only when `position` is `top`
@@ -93,6 +106,8 @@ export declare type ToastConfigParams<Props> = {
     isVisible: boolean;
     text1?: string;
     text2?: string;
+    text1Style?: StyleProp<TextStyle>;
+    text2Style?: StyleProp<TextStyle>;
     show: (params: ToastShowParams) => void;
     hide: (params: ToastHideParams) => void;
     onPress: () => void;
@@ -154,15 +169,6 @@ export declare type ToastProps = {
      * Default value: `10`
      */
     keyboardOffset?: number;
-    /**
-     * Enable / disable native driver for the slide animation.
-     *
-     * Default:
-     *  - `true` on iOS
-     *  - `false` on Android (fixes [issue #300](https://github.com/calintamas/react-native-toast-message/issues/300))
-     *  - `false` on Web (fixes [issue #311](https://github.com/calintamas/react-native-toast-message/issues/311))
-     */
-    useNativeDriver?: boolean;
     /**
      * Called when any Toast is shown
      */

package/lib/src/useToast.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLogger } from './contexts';
-import { useTimeout } from './hooks';
+import { useSafeArea, useTimeout } from './hooks';
 import { noop } from './utils/func';
 import { mergeIfDefined } from './utils/obj';
 export const DEFAULT_DATA = {
@@ -9,8 +9,11 @@ export const DEFAULT_DATA = {
 };
 export const DEFAULT_OPTIONS = {
     type: 'success',
+    text1Style: null,
+    text2Style: null,
     position: 'top',
     autoHide: true,
+    swipeable: true,
     visibilityTime: 4000,
     topOffset: 40,
     bottomOffset: 40,
@@ -24,6 +27,7 @@ export function useToast({ defaultOptions }) {
     const { log } = useLogger();
     const [isVisible, setIsVisible] = React.useState(false);
     const [data, setData] = React.useState(DEFAULT_DATA);
+    const { safeAreaInsets } = useSafeArea();
     const initialOptions = mergeIfDefined(DEFAULT_OPTIONS, defaultOptions);
     const [options, setOptions] = React.useState(initialOptions);
     const onAutoHide = React.useCallback(() => {
@@ -40,13 +44,17 @@ 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, 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, props = initialOptions.props } = params;
+        const topOffset = safeAreaInsets && safeAreaInsets.top > 0 ? safeAreaInsets.top : initialOptions.topOffset;
+        const bottomOffset = safeAreaInsets && safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : initialOptions.bottomOffset;
+        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, keyboardOffset = initialOptions.keyboardOffset, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props } = params;
         setData({
             text1,
             text2
         });
         setOptions(mergeIfDefined(initialOptions, {
             type,
+            text1Style,
+            text2Style,
             position,
             autoHide,
             visibilityTime,
@@ -56,6 +64,7 @@ export function useToast({ defaultOptions }) {
             onShow,
             onHide,
             onPress,
+            swipeable,
             props
         }));
         // TODO: validate input

package/lib/src/utils/array.d.ts

@@ -0,0 +1,2 @@
+declare function additiveInverseArray(arr: number[]): number[];
+export { additiveInverseArray };

package/lib/src/utils/array.js

@@ -0,0 +1,4 @@
+function additiveInverseArray(arr) {
+    return arr.map((i) => -i);
+}
+export { additiveInverseArray };

package/lib/src/utils/dimension.d.ts

@@ -0,0 +1,2 @@
+export declare const WINDOW_HEIGHT: number;
+export declare const SCREEN_HEIGHT: number;

package/lib/src/utils/dimension.js

@@ -0,0 +1,3 @@
+import { Dimensions } from "react-native";
+export const { height: WINDOW_HEIGHT } = Dimensions.get('window');
+export const { height: SCREEN_HEIGHT } = Dimensions.get('screen');

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.2.0-beta.2",
+  "version": "3.0.0-beta.1",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "files": [
-    "/lib"
+    "/lib",
+    "ios",
+    "*.podspec"
   ],
   "repository": {
     "type": "git",
@@ -22,8 +24,8 @@
     "lint": "./node_modules/.bin/eslint --fix",
     "lint-staged": "./node_modules/.bin/lint-staged",
     "test": "./node_modules/.bin/jest",
-    "quality": "yarn lint && tsc --noEmit",
-    "yalc:watch": "rm -rf ./lib && tsc-watch --onCompilationComplete \"yalc publish --push\""
+    "yalc:push": "yarn build && yalc publish --push",
+    "quality": "yarn lint && tsc --noEmit"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
@@ -32,22 +34,17 @@
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^9.0.0",
-    "@types/jest": "^27.0.1",
-    "@types/react-native": "^0.67.7",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "@types/jest": "^28.1.0",
+    "@types/react-native": "^0.67.3",
     "eslint-config-backpacker-react-ts": "^0.3.0",
     "husky": "^8.0.1",
-    "import-sort-style-module-alias": "^1.1.0",
-    "jest": "^27.1.1",
+    "import-sort-style-module": "^6.0.0",
+    "jest": "^28.1.0",
     "lint-staged": "^13.0.0",
     "metro-react-native-babel-preset": "^0.71.0",
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react": "17.0.2",
-    "react-native": "0.68.2",
     "react-test-renderer": "^17.0.2",
-    "tsc-watch": "^5.0.3",
     "typescript": "^4.4.3",
     "yalc": "^1.0.0-pre.53"
   },
@@ -57,13 +54,8 @@
   },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {
-      "style": "module-alias",
-      "parser": "typescript",
-      "options": {
-        "alias": [
-          "~"
-        ]
-      }
+      "style": "module",
+      "parser": "typescript"
     }
   },
   "lint-staged": {

package/react-native-toast-message.podspec

@@ -0,0 +1,41 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-toast-message"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = "https://github.com/calintamas/react-native-toast-message"
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "9.0" }
+  s.source       = { :git => "https://github.com/calintamas/react-native-toast-message.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end
+end

package/lib/src/contexts/EnvironmentContext.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ToastProps } from '~/types';
-export declare type EnvironmentContextType = {
-    useNativeDriver?: ToastProps['useNativeDriver'];
-};
-declare const EnvironmentProvider: React.FC<EnvironmentContextType>;
-declare function useEnvironmentContext(): EnvironmentContextType;
-export { EnvironmentProvider, useEnvironmentContext };

package/lib/src/contexts/EnvironmentContext.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-const EnvironmentContext = React.createContext(null);
-const EnvironmentProvider = ({ children, useNativeDriver = Platform.select({
-    default: true,
-    web: false
-}) }) => {
-    const value = {
-        useNativeDriver
-    };
-    return (<EnvironmentContext.Provider value={value}>
-      {children}
-    </EnvironmentContext.Provider>);
-};
-function useEnvironmentContext() {
-    const ctx = React.useContext(EnvironmentContext);
-    if (!ctx) {
-        throw new Error(`useEnvironment() must be called within EnvironmentProvider context`);
-    }
-    return ctx;
-}
-export { EnvironmentProvider, useEnvironmentContext };