callstack / callstack/react-native-paper

Snackbar as a function.

未关闭
#2,825 9 条评论 22 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

It would be great if we could use Snackbar and toggle it as a function.

Like in [Toast](https://docs.nativebase.io/toast) provided by [Native Base](https://nativebase.io/), we can customize it like this

```javascript
import { Toast } from "native-base";

function show({
text,
type = "danger",
buttonText,
duration = 3000,
position,
bottom = 60,
}) {
Toast.show({
text: text,
position: position,
type: type,
duration: duration,
buttonText: buttonText,
});
}

export default {
show,
};
```

Then I use it on any screen or component like this

```javascript
Toast.show({ text: "This API call was successful" }); // This pops a Toast message and disappears after 3 seconds
```

I love the Snackbar that React Native Paper has, but I couldn't figure out how to use it as described above.

Right now, I have to add a component on every page and maintain a state to toggle it. It would have been so good if we could use it like `Snackbar.show("Some Text")`

If anyone has any advice on using Snackbar as a function to toggle Toasts, I would love to discuss it.

Versions :
- "react-native": "~0.63.4"
- "react-native-paper": "^4.9.2"

贡献指南

打开贡献指南

调研方向

首先查看现有的 Snackbar 组件/API,以及 issue 中链接的 NativeBase Toast 示例。定义支持的函数调用选项和关闭行为,然后验证从屏幕或组件中使用所提议 API 的方式,同时无需维护每个屏幕各自的 Snackbar 状态。支持并记录所请求的基于函数的用法后,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。