callstack / callstack/react-native-paper
Modal Animation
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
**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;
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Start by reviewing the react-native-paper Modal and Portal documentation and the current Modal animation behavior; the issue names no source file, test, or entry point. The requested API and acceptance criteria are not defined, so completion would require first specifying how custom animation should be configured and how that behavior will be validated.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native
- Lĩnh vực
- mobile-dev
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 25/100