Open halilibrahimcelik opened 3 months ago
Hey, at least for now there isn't a way to override the Modal animation
good thing to know, as an alternative way I used react navigation stack screen modal option
Use Animated to control the visibility and animation of the modal. Wrap the Modal component from React Native Paper inside the custom component. Control the animation for showing and hiding the modal.
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
import { Modal, Portal, Button } from 'react-native-paper';
const { height } = Dimensions.get('window');
const CustomModal = ({ visible, onDismiss, children }) => {
const translateY = useRef(new Animated.Value(height)).current;
useEffect(() => {
if (visible) {
Animated.timing(translateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start();
} else {
Animated.timing(translateY, {
toValue: height,
duration: 300,
useNativeDriver: true,
}).start();
}
}, [visible]);
return (
<Portal>
<Modal visible={visible} onDismiss={onDismiss} contentContainerStyle={styles.modal}>
<Animated.View style={[styles.animatedContainer, { transform: [{ translateY }] }]}>
{children}
</Animated.View>
</Modal>
</Portal>
);
};
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
const showModal = () => setModalVisible(true);
const hideModal = () => setModalVisible(false);
return (
<View style={styles.container}>
<Button onPress={showModal}>Show Modal</Button>
<CustomModal visible={modalVisible} onDismiss={hideModal}>
<Text style={styles.modalContent}>This is a custom animated modal!</Text>
<Button onPress={hideModal}>Hide Modal</Button>
</CustomModal>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modal: {
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
animatedContainer: {
width: '100%',
padding: 20,
backgroundColor: 'white',
borderRadius: 10,
},
modalContent: {
marginBottom: 20,
},
});
export default App;
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.