mochixuan/react-native-smart-tip

🔥🔥🔥Toast , SnackBar , Modal , Show Toast above Modal

react-native-smart-tip

React-native smart tip, including Toast、Modal、SnackBar

2021.4

In react native >= 0.62, the new LogBox component would impact this component's initialization. To make it work we have to explicitly insert a mount point in your app like this

import { WRootToastApp } from 'react-native-smart-tip'

// in your entry file like `App.js`

return (
  <WRootToastApp>  // <- use WRootToastApp to wrap your root component
    <App />
  </WRootToastApp>
);

2020.5

1. Add property isShowShadow to WSnackBar and WToast
2. Add sliding hide function for WSnackBar

2020.3 Show Toast above Modal (Compatible with Android and iOS)

import { ModalShowToastView } from 'react-native-smart-tip'

getToastInstance = (toastInstance) => {
    this.toastInstance = toastInstance;
}

<Modal>
	<View>
		<ModalShowToastView toastInstance={this.getToastInstance} />
	</View>
</Modal>

this.toastInstance({data: 'toast'})

2019.7 Remove the method in the componentWillMount method. Compatible with future React 17 versions, [email protected] version.

Installation

yarn add react-native-smart-tip
or
npm i react-native-smart-tip --save 

Features

Toast

SnackBar

Modal

Show tips on Modal

Tip: Modal shows that modal can only be used on Android issue

Usage

WToast

import {WToast} from 'react-native-smart-tip'

// Base 
show = () => {
	WToast.show({data: 'hello world'})
}

// Other
show = () => {
	const toastOpts = {
	    data: 'Success',
	    textColor: '#ffffff',
	    backgroundColor: '#444444',
	    duration: WToast.duration.LONG, //1.SHORT 2.LONG
	    position: WToast.position.TOP, // 1.TOP 2.CENTER 3.BOTTOM
	    icon: <Image source={require('../data/img/success.png')} style={{width: 32,height: 32,resizeMode: 'contain'}}/>
	}
	
	WToast.show(toastOpts)
}

WToast.hide(); // Can be hidden immediately

WToast API

Props	Type	Required	Default	Description
data	String	true	' '	Displayed content
duration	Number	false	WToast.duration.SHORT	The duration of the toast
position	Number	false	WToast.position.BOTTOM	Displayed position
inEasing	Easing	false	Easing.elastic(1)	Admission animation
textColor	String	false	'white'	font color
backgroundColor	String	false	'black'	background color
icon	Component	fasse	undefined	Image to be displayed
isShowShadow	boolean	false	true	Shadow effect

---

WSnackBar

import {WSnackBar} from 'react-native-smart-tip'

// Base 
show = () => {
	WSnackBar.show({data: 'hello world'})
}

// Other
show = () => {
	const snackBarOpts = {
	    data: 'Please check the network first.',
	    position: WSnackBar.position.BOTTOM, // 1.TOP 2.CENTER 3.BOTTOM
	    duration: WSnackBar.duration.LONG, //1.SHORT 2.LONG 3.INDEFINITE
	    textColor: '#ff490b',
	    backgroundColor: '#050405',
	    actionText: 'Sure',
	    actionTextColor: '#ff490b',
	    onActionHide: (isSlideHide)=>{
	    	// Click Action
	    },
	}
	
	WSnackBar.show(snackBarOpts)
}

WSnackBar API

Props	Type	Required	Default	Description
data	String	true	' '	Displayed content
statusBarHeight	Number	false	-1	Prevent Android statusBar
height	Number	false	44	Height to display
duration	Number	false	WSnackBar.duration.SHORT	The duration of the toast
position	Number	false	WSnackBar.position.BOTTOM	Displayed position
inEasing	Easing	false	Easing.linear	Admission animation
textColor	String	false	'white'	font color
backgroundColor	String	false	'black'	background color
actionText	String	false	undefined	action text
actionTextColor	String	false	'white'	action text color
isAllowSlideExit	boolean	false	true	Whether to run sliding hide
onActionHide	Function	false	undefined	listener click
isShowShadow	boolean	false	true	Shadow effect
numberOfLines	number	false	1	Maximum number of rows

---

WModal

import {WModal} from 'react-native-smart-tip'

// Base 
show = () => {
	WModal.show({data: 'hello world'})
}

// Other
show = () => {
	const modalOpts = {
	    data: 'Loading',
	    textColor: '#fff',
	    backgroundColor: '#444444',
	    position: WModal.position.CENTER,
	    icon: <ActivityIndicator color='#fff' size={'large'}/>
	}
	
	WModal.show(modalOpts)
}

WToast API

Props	Type	Required	Default	Description
data	String	true	' '	Displayed content
position	Number	false	WToast.position.BOTTOM	Displayed position
inEasing	Easing	false	Easing.elastic(1)	Admission animation
textColor	String	false	'white'	font color
backgroundColor	String	false	'black'	background color
icon	Component	fasse	undefined	Image to be displayed
onRequestClose	Function	false	undefined	Android Back

MIT Licensed

react-native-smart-tip's Issues

关于 Toast 显示在 Modal 上方

这个解决方法和我在 native-base 的 issue 里看到的类似，链接如下：
GeekyAnts/NativeBase#985

但是有些应用场景貌似不太适用，比如一个 Page 包含一个 Modal，需要满足既能够在页面显示 Toast 又能在 Modal 显示时 Toast 能显示在 Modal 上方。

麻烦您看一下(^▽^)

如何改变提示文字大小呢？

请问可以开放一个接口 改变WToast.show()中提示文字大小嘛？

[0.65.x] Deprecated Dimensions event listeners

Since react-native 0.65.x handling listeners has changed, here's a patch-package file to temp fix only ToastView.js:

diff --git a/node_modules/react-native-smart-tip/toast/ToastView.js b/node_modules/react-native-smart-tip/toast/ToastView.js
index 348e3a4..27f36e7 100644
--- a/node_modules/react-native-smart-tip/toast/ToastView.js
+++ b/node_modules/react-native-smart-tip/toast/ToastView.js
@@ -25,7 +25,7 @@ export default class ToastView extends Component{
         }
 
         // React after 17
-        Dimensions.addEventListener('change', this.onWindowChange);
+       this.dimensionsSubscription = Dimensions.addEventListener('change', this.onWindowChange);
     }
 
     componentDidMount() {
@@ -37,7 +37,7 @@ export default class ToastView extends Component{
             this.liftCycleAnimated.stop()
             this.liftCycleAnimated = undefined
         }
-        Dimensions.removeEventListener('change', this.onWindowChange);
+        this.dimensionsSubscription?.remove();
     }
 
     render() {

@mochixuan for backwards compatibility you could add:

import React from 'react';
const ReactNativeVersion = require('react-native/Libraries/Core/ReactNativeVersion');


constructor(props) {
    super(props);

    const { width, height } = Dimensions.get("window");

    this.state = {
      deviceWidth: width,
      deviceHeight: height,
      animatedValue1: new Animated.Value(0),
      animatedValue2: new Animated.Value(0.2)
    };

    // React after 17
    if (v >= 65) {
      this.dimensionsSubscription = Dimensions.addEventListener(
        "change",
        this.onWindowChange
      );
    } else {
      Dimensions.addEventListener("change", this.onWindowChange);
    }
  }

  componentWillUnmount() {
    if (this.liftCycleAnimated) {
      this.liftCycleAnimated.stop();
      this.liftCycleAnimated = undefined;
    }

    const v = parseInt(
      ReactNativeVersion.version.major + ReactNativeVersion.version.minor,
      10
    );

    if (v >= 65) {
      this.dimensionsSubscription?.remove();
    } else {
      Dimensions.removeEventListener("change", this.onWindowChange);
    }
  }

not tested ^^, just a suggestion, this should apply to all Views, not only ToastView 😄

Toast会被弹出的输入法遮住

Toast会被弹出的输入法遮住，而Snackbar是正常的会被弹出的输入法顶起。

希望能添加一个dismiss回调方法

WSnackBar close suggestion

I would like to leave it as a suggestion: An option to slide to close in SnackBar mode, or to click on the component and close.

The suggestion was to close it, invoking the .hide() method, but it could be a customizable action property as well.

Yes, I know you have a similar option, but it is using text. The ideal would be one executed from the interaction of any area of ​​the component. Using only WSnackBar.show().

ios rn 0.63 Modal icon 不显示

ios rn 0.63 Modal icon 不显示 切阻止JS继续执行

WToast会被Modal挡住

当使用Modal组件的时候，WToast会被挡在下面。

How to smooth transition from loading to success with Toast component?

When I use suceess or fail to kill the loading, i just wanna replace the icon, not the whole toast, how can i do that?

Disable SnackBar ellipsis and show full text message

Hi my friend
i want to show full text message but show only some part of text and other is like "..." can you help me with that

RN. 64.2 WToast not working

可以升级下react-native-root-siblings版本，来解决无法显示的问题

RT，react-native-root-siblings已经升级到4.0.6，升级下依赖来解决模块无法显示的问题

点击没有反应

大佬，您好。我是直接把您的demo里的拿过来，但是没有效果也。是我少了什么吗，打过断点，Toast确实有这个对象，引用到了。但是就是没有tip弹出。

how to set no Admission animation?

how to set no Admission animation?

大神，可以根据点击的控件确定弹出的位置吗？

大神，可以根据点击的控件确定弹出的位置吗？或者提供参数输入位置

WToast in android can not show backgroundColor

"react": "16.9.0",
"react-native": "0.61.0",

WToast.show({
            data: msg,
            textColor: '#ffffff',
            backgroundColor: '#000000',
            duration: 2, // 1.SHORT 2.LONG
            position: WToast.position.CENTER, // 1.TOP 2.CENTER 3.BOTTOM
        });

How to globally style the toast container?

Is there any global way to style the toast without me adding the styles to each invocation of WToast.show or refactoring the function out into another one?

为什么我的一点反应没有

我下载了demo运行，也新建了项目把这个组件添加进来，为什么点击没反应

怎么集成全局Toast

老大，想把你插件里的Toast集成到全局

全局Loading我集成好了，好像直接用你写的Toast不行

显示toast和modal的时候，能否有一个显示mask遮罩层的选项？

发现在显示toast或者modal时，没有遮罩层，容易误触，能否加一个

你好，data 内容可以传入组件吗

像是snack bar , 用来做弹出浮层

请问 WModal 有没有关闭的 api？

const load1 = WModal.show({
        data: '加载中',
        textColor: '#fff',
        backgroundColor: '#444444',
        position: WModal.position.CENTER,
        icon: <ActivityIndicator color="#fff" size={'large'} />,
});
console.log(load1);// undefined 这里是 undefined

show 了以后不知道怎么关闭.

有个警告错误

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false
in SnackView (at SnackBar.js:25)

最新的0.62版本。

请教一下,为什么我使用WToast在安卓设备上会出现一闪而过的情况?

Does it support text alignment and FontFamily?

Thanks for this great tool.

How to make the text center aligned and change font family in snakbar?

inEasing not working for android

inEasing not working in android (debug) not tested in APK

data: "", textColor: "#ffffff", backgroundColor: error ? "#ff490b" : CONST.APP_COLOR, duration: WToast.duration.LONG, position: WToast.position.BOTTOM, isShowShadow: false, inEasing: Easing.ease,

RN 0.63上不显示

RN 0.64 首次初始化程序无法使用 ModalShowToast

"dependencies": {
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-smart-tip": "^2.3.0"
}

猜测0.64做了很多改动。建议全部升到最新版

ios 和 android 均可复现：

demo 链接：
链接: https://pan.baidu.com/s/1VT9Dv0AVfDo86VxplYIWAw 密码: 6ogc

demo 使用：
yarn install
cd ios
pod install --verbose --no-repo-update
yarn ios

项目中使用react-native-root-siblings，则两者冲突。希望能解决。

import { RootSiblingParent } from 'react-native-root-siblings';

如上，项目里面也需要自定义一个全局弹出框，有用到RootSiblingParent，如果使用的话react-native-smart-tip就不能用。

"react": "16.13.1",
"react-native": "0.63.2",

有谁知道怎么解决吗？

IOS下在Modal弹出来的基础上进行WModal.show弹不出来，Android下正常弹出

// 这是具体弹框的代码
WModal.show({
data: '请选择规格',
position: WModal.position.CENTER,
textColor: '#fff',
backgroundColor: '#444444',
});
setTimeout(() => {
WModal.hide();
}, 1500);

How use WModalShowToastView in function component

Is it possible to use WModalShowToastView in functional components? If so, how to do this and preferably with an example.

使用react-navigation,无法显示toast

我尝试了root-toast和WToast,均无法显示.
在显示和消失的回调中是可以看到log的
不知道是哪里处理问题,初学者=-=