callstack / callstack/react-native-paper

Modal Animation

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

描述

**How can we customize modal animation?**
I'm trying to customize animation of modal while showing up. Instead of default fadeIn fadeOut animation, I want to insert custom animation, is there any way to change defualt modal animation in react-native-paper ? I tried Animated from react native but it did not work.

```
import { useFocusEffect } from '@react-navigation/native';
import { Animated } from 'react-native';
import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';

const DefaultModal = () => {
const [visible, setVisible] = React.useState(false);
const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0

const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = { backgroundColor: 'white', padding: 3 };
useFocusEffect(() => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
return () => {
Animated.timing(fadeAnim, {
toValue: 0,
duration: 250,
useNativeDriver: true,
}).start();
};
});

return (
<>


Example Modal. Click outside this area to dismiss.



Show


);
};

export default DefaultModal;
```

贡献指南

打开贡献指南

调研方向

首先查看 react-native-paper Modal 和 Portal 的文档,以及当前 Modal 的动画行为;issue 未指定源文件、测试或入口点。所请求的 API 和验收标准尚未定义,因此要完成此任务,首先需要明确如何配置自定义动画,以及如何验证该行为。

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

评估

技术栈
react-native
领域
mobile-dev
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

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