react-native-toast-message 1.4.9 → 2.0.0-beta.2

package/CHANGELOG.md

@@ -7,7 +7,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 Headers are one of:
 
-- `Added`, `Changed`, `Removed` or `Fixed`.
+- `Added`, `Changed`, `Removed`, `Fixed` or `Breaking`.
+
+## [1.6.0]
+
+### Added
+
+- Export all default Toast components (`BaseToast`, `SuccessToast`, `InfoToast`, `ErrorToast`) to be able to reuse them with custom props ([#225](https://github.com/calintamas/react-native-toast-message/pull/225))
+
+## [1.5.0]
+
+### Changed
+
+- Move `show` method options to separate `ToastShowOptions` interface ([#242](https://github.com/calintamas/react-native-toast-message/pull/242))
+- Use `StyleProp` in type definition file, to allow different types of style to be used (eg. `style={[styles.one, styles.two]}`) ([#243](https://github.com/calintamas/react-native-toast-message/pull/243))
 
 ## [1.4.9]
 

package/README.md

@@ -3,211 +3,31 @@
 [![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)](https://coveralls.io/github/calintamas/react-native-toast-message)
 [![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.
 
-- Imperative API
-- Keyboard aware
-- Flexible config
+![toast gif](./docs/toast.gif)
 
-## Install
+## Features
 
-```
-yarn add react-native-toast-message
-```
+- 🚀 Imperative API
+- 📦 Very lightweight (~40 kB)
+- ⌨️ Keyboard-aware
+- 🎨 Customizable layouts
+- 🔧 Flexible config
 
-![ToastSuccess](success-toast.gif)
+## Documentation
 
-## Usage
+- [Quick start](./docs/quick-start.md)
+- [API](./docs/api.md)
+- [Create custom layouts](./docs/custom-layouts.md)
+- FAQ
+  - [How to show the Toast inside a Modal?](./docs/modal-usage.md)
+  - [How to render the Toast when using a Navigation library?](./docs/navigation-usage.md)
+  - [How to mock the library for testing with jest?](./docs/jest-testing.md)
 
-Render the `Toast` component in your app entry file (along with everything that might be rendered there) and set a ref to it.
+## License
 
-```js
-// App.jsx
-import Toast from 'react-native-toast-message';
-
-function App(props) {
-  return (
-    <>
-      {/* ... */}
-      <Toast ref={(ref) => Toast.setRef(ref)} />
-    </>
-  );
-}
-
-export default App;
-```
-
-Then use it anywhere in your app (even outside React components), by calling any `Toast` method directly:
-
-```js
-import Toast from 'react-native-toast-message';
-
-function SomeComponent() {
-  React.useEffect(() => {
-    Toast.show({
-      text1: 'Hello',
-      text2: 'This is some something 👋'
-    });
-  }, []);
-
-  return <View />;
-}
-```
-
-## API
-
-### `show(options = {})`
-
-When calling the `show` method, you can use the following `options` to suit your needs. Everything is optional, unless specified otherwise.
-
-The usage of `|` below, means that only one of the values show should be used.
-If only one value is shown, that's the default.
-
-```js
-Toast.show({
-  type: 'success | error | info',
-  position: 'top | bottom',
-  text1: 'Hello',
-  text2: 'This is some something 👋',
-  visibilityTime: 4000,
-  autoHide: true,
-  topOffset: 30,
-  bottomOffset: 40,
-  onShow: () => {},
-  onHide: () => {},
-  onPress: () => {}
-});
-```
-
-### `hide()`
-
-```js
-Toast.hide();
-```
-
-## props
-
-Props that can be set on the `Toast` instance. They act as defaults for all Toasts that are shown.
-
-```js
-const props = {
-  config: Object,
-  style: ViewStyle,
-  topOffset: Number,
-  bottomOffset: Number,
-  keyboardOffset: Number,
-  visibilityTime: Number,
-  autoHide: Boolean,
-  height: Number,
-  position: 'top' | 'bottom',
-  type: String
-};
-```
-
-> Default `Animated.View` styles can be found in [styles.js](https://github.com/calintamas/react-native-toast-message/blob/master/src/styles.js#L4). They can be extended using the `style` prop.
-
-## Customize Toast types
-
-If you want to add custom types - or overwrite the existing ones - you can add a `config` prop when rendering the `Toast` in your app `root`.
-
-```js
-// App.jsx
-import Toast from 'react-native-toast-message';
-
-const toastConfig = {
-  success: ({ text1, props, ...rest }) => (
-    <View style={{ height: 60, width: '100%', backgroundColor: 'pink' }}>
-      <Text>{text1}</Text>
-      <Text>{props.guid}</Text>
-    </View>
-  ),
-  error: () => {},
-  info: () => {},
-  any_custom_type: () => {}
-};
-
-function App(props) {
-  return (
-    <>
-      {/* ... */}
-      <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
-    </>
-  );
-}
-
-export default App;
-```
-
-Then just use the library as before
-
-```js
-Toast.show({
-  type: 'any_custom_type',
-  props: { onPress: () => {}, guid: 'guid-id' }
-});
-```
-
-## Change default Toast style
-
-In addition to creating Toast styles from scratch (shown above), you can use the default `BaseToast` style and adjust its layout.
-
-```js
-// App.jsx
-import Toast, { BaseToast } from 'react-native-toast-message';
-
-const toastConfig = {
-  success: ({ text1, ...rest }) => (
-    <BaseToast
-      {...rest}
-      style={{ borderLeftColor: 'pink' }}
-      contentContainerStyle={{ paddingHorizontal: 15 }}
-      text1Style={{
-        fontSize: 15,
-        fontWeight: 'semibold'
-      }}
-      text1={text1}
-      text2={null}
-    />
-  )
-};
-
-function App(props) {
-  return (
-    <>
-      {/* ... */}
-      <Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />
-    </>
-  );
-}
-
-export default App;
-```
-
-Available `props` on `BaseToast`:
-
-```js
-const baseToastProps = {
-  leadingIcon: ImageSource,
-  trailingIcon: ImageSource,
-  text1: String,
-  text2: String,
-  onPress: Function,
-  onLeadingIconPress: Function,
-  onTrailingIconPress: Function,
-  style: ViewStyle,
-  leadingIconContainerStyle: ViewStyle,
-  trailingIconContainerStyle: ViewStyle,
-  leadingIconStyle: ViewStyle,
-  trailingIconStyle: ViewStyle,
-  contentContainerStyle: ViewStyle,
-  text1Style: ViewStyle,
-  text2Style: ViewStyle,
-  activeOpacity: Number
-};
-```
-
-## Credits
-
-The icons for the default `success`, `error` and `info` types are made by [Pixel perfect](https://www.flaticon.com/authors/pixel-perfect) from [flaticon.com](www.flaticon.com).
+MIT

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { Toast as default } from './src/Toast';
+export { BaseToast } from './src/components/BaseToast';
+export { SuccessToast } from './src/components/SuccessToast';
+export { ErrorToast } from './src/components/ErrorToast';
+export { InfoToast } from './src/components/InfoToast';
+export * from './src/types';

package/lib/index.js

@@ -0,0 +1,6 @@
+export { Toast as default } from './src/Toast';
+export { BaseToast } from './src/components/BaseToast';
+export { SuccessToast } from './src/components/SuccessToast';
+export { ErrorToast } from './src/components/ErrorToast';
+export { InfoToast } from './src/components/InfoToast';
+export * from './src/types';

package/lib/src/Toast.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ToastProps, ToastShowParams } from './types';
+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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LoggerProvider } from './contexts';
+import { ToastUI } from './ToastUI';
+import { useToast } from './useToast';
+const ToastRoot = React.forwardRef((props, ref) => {
+    const { config, ...defaultOptions } = props;
+    const { show, hide, isVisible, options, data } = useToast({
+        defaultOptions
+    });
+    React.useImperativeHandle(ref, () => ({
+        show,
+        hide
+    }));
+    return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);
+});
+const toastRef = React.createRef();
+export function Toast(props) {
+    return (<LoggerProvider enableLogs={false}>
+      <ToastRoot ref={toastRef} {...props}/>
+    </LoggerProvider>);
+}
+Toast.show = (params) => {
+    toastRef.current?.show(params);
+};
+Toast.hide = (params) => {
+    toastRef.current?.hide(params);
+};

package/lib/src/ToastUI.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ToastConfig, ToastData, ToastHideParams, ToastOptions, ToastShowParams } from './types';
+export declare type ToastUIProps = {
+    isVisible: boolean;
+    options: Required<ToastOptions>;
+    data: ToastData;
+    show: (params: ToastShowParams) => void;
+    hide: (params: ToastHideParams) => void;
+    config?: ToastConfig;
+};
+export declare function ToastUI(props: ToastUIProps): JSX.Element;

package/lib/src/ToastUI.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AnimatedContainer } from './components/AnimatedContainer';
+import { ErrorToast } from './components/ErrorToast';
+import { InfoToast } from './components/InfoToast';
+import { SuccessToast } from './components/SuccessToast';
+const defaultToastConfig = {
+    success: (props) => <SuccessToast {...props}/>,
+    error: (props) => <ErrorToast {...props}/>,
+    info: (props) => <InfoToast {...props}/>
+};
+function renderComponent({ data, options, config, isVisible, show, hide }) {
+    const { text1, text2 } = data;
+    const { type, onPress, 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/master/README.md`);
+    }
+    return ToastComponent({
+        position,
+        type,
+        isVisible,
+        text1,
+        text2,
+        show,
+        hide,
+        onPress,
+        props
+    });
+}
+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}>
+      {renderComponent(props)}
+    </AnimatedContainer>);
+}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PanResponderGestureState } from 'react-native';
+import { ReactChildren, ToastPosition } from '../types';
+export declare type AnimatedContainerProps = {
+    children: ReactChildren;
+    isVisible: boolean;
+    position: ToastPosition;
+    topOffset: number;
+    bottomOffset: number;
+    keyboardOffset: number;
+    onHide: () => void;
+    onRestorePosition?: () => void;
+};
+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;

package/lib/src/components/AnimatedContainer.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Animated, Dimensions } from 'react-native';
+import { useLogger } from '../contexts';
+import { usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
+import { noop } from '../utils/func';
+import { bound } from '../utils/number';
+import { getTestId } from '../utils/test-id';
+import { styles } from './AnimatedContainer.styles';
+export function dampingFor(gesture, position) {
+    const { moveY } = gesture;
+    switch (position) {
+        case 'bottom': {
+            const { height: screenHeight } = Dimensions.get('screen');
+            return screenHeight - moveY;
+        }
+        case 'top':
+            return moveY;
+        default:
+            throw new Error(`Toast position: ${position} not implemented`);
+    }
+}
+export function animatedValueFor(gesture, position, damping) {
+    const boundValue = (val) => bound(val, 0, 2);
+    const { dy } = gesture;
+    switch (position) {
+        case 'bottom':
+            return boundValue(1 - dy / damping);
+        case 'top':
+            return boundValue(1 + dy / damping);
+        default:
+            throw new Error(`Toast position: ${position} not implemented`);
+    }
+}
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, onHide, onRestorePosition = noop }) {
+    const { log } = useLogger();
+    const { computeViewDimensions, height } = useViewDimensions();
+    const { animatedValue, animate, animationStyles } = useSlideAnimation({
+        position,
+        height,
+        topOffset,
+        bottomOffset,
+        keyboardOffset
+    });
+    const onDismiss = React.useCallback(() => {
+        log('Swipe, dismissing');
+        animate(0);
+        onHide();
+    }, [animate, log, onHide]);
+    const onRestore = React.useCallback(() => {
+        log('Swipe, restoring to original position');
+        animate(1);
+        onRestorePosition();
+    }, [animate, log, onRestorePosition]);
+    const computeNewAnimatedValueForGesture = React.useCallback((gesture) => {
+        const damping = dampingFor(gesture, position);
+        const newAnimatedValue = animatedValueFor(gesture, position, damping);
+        return newAnimatedValue;
+    }, [position]);
+    const { panResponder } = usePanResponder({
+        animatedValue,
+        computeNewAnimatedValueForGesture,
+        onDismiss,
+        onRestore
+    });
+    React.useLayoutEffect(() => {
+        const newAnimationValue = isVisible ? 1 : 0;
+        animate(newAnimationValue);
+    }, [animate, isVisible]);
+    return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} {...panResponder.panHandlers}>
+      {children}
+    </Animated.View>);
+}

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

@@ -0,0 +1,14 @@
+export declare const styles: {
+    base: {
+        position: "absolute";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "center";
+    };
+    top: {
+        top: number;
+    };
+    bottom: {
+        bottom: number;
+    };
+};

package/lib/src/components/AnimatedContainer.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    base: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center'
+    },
+    top: {
+        top: 0
+    },
+    bottom: {
+        bottom: 0
+    }
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): JSX.Element;

package/lib/src/components/BaseToast.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, View } 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}>
+      {renderLeadingIcon && renderLeadingIcon()}
+      <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
+        {text1 && text1.length > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
+            {text1}
+          </Text>)}
+        {text2 && text2?.length > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
+            {text2}
+          </Text>)}
+      </View>
+      {renderTrailingIcon && renderTrailingIcon()}
+    </Touchable>);
+}

package/lib/src/components/BaseToast.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const HEIGHT = 60;
+export declare const WIDTH = 340;
+export declare const BORDER_RADIUS = 6;
+export declare const styles: {
+    base: {
+        flexDirection: "row";
+        height: number;
+        width: number;
+        borderRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+    };
+    leadingBorder: {
+        borderLeftWidth: number;
+        borderLeftColor: string;
+    };
+    contentContainer: {
+        paddingHorizontal: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "flex-start";
+    };
+    text1: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginBottom: number;
+        color: string;
+        width: string;
+    };
+    text2: {
+        fontSize: number;
+        color: string;
+        width: string;
+    };
+};

package/lib/src/components/BaseToast.styles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+export const HEIGHT = 60;
+export const WIDTH = 340;
+export const BORDER_RADIUS = 6;
+export const styles = StyleSheet.create({
+    base: {
+        flexDirection: 'row',
+        height: HEIGHT,
+        width: WIDTH,
+        borderRadius: BORDER_RADIUS,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.1,
+        shadowRadius: BORDER_RADIUS,
+        elevation: 2,
+        backgroundColor: '#FFF'
+    },
+    leadingBorder: {
+        borderLeftWidth: 5,
+        borderLeftColor: '#D8D8D8'
+    },
+    contentContainer: {
+        paddingHorizontal: 25,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-start' // In case of RTL, the text will start from the right
+    },
+    text1: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        marginBottom: 2,
+        color: '#000',
+        width: '100%' // Fixes: https://github.com/calintamas/react-native-toast-message/issues/130
+    },
+    text2: {
+        fontSize: 10,
+        color: '#979797',
+        width: '100%' // Fixes: https://github.com/calintamas/react-native-toast-message/issues/130
+    }
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function ErrorToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/ErrorToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function ErrorToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#FE6301' }} {...props}/>;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function InfoToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/InfoToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function InfoToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#87CEFA' }} {...props}/>;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseToastProps } from '../types';
+export declare function SuccessToast(props: BaseToastProps): JSX.Element;

package/lib/src/components/SuccessToast.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseToast } from './BaseToast';
+export function SuccessToast(props) {
+    return <BaseToast style={{ borderLeftColor: '#69C779' }} {...props}/>;
+}

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

@@ -0,0 +1,8 @@
+/// <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

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

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ReactChildren } from '../types';
+export declare type LoggerContextType = {
+    log: (...args: unknown[]) => void;
+};
+export declare type LoggerProviderProps = {
+    children: ReactChildren;
+    enableLogs?: boolean;
+};
+declare function LoggerProvider({ children, enableLogs }: LoggerProviderProps): JSX.Element;
+declare function useLogger(): LoggerContextType;
+export { LoggerProvider, useLogger };