callstack / callstack/react-native-paper
Modal Animation
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 23時間
- マージ済み PR(30日)
- 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
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100