I want to have a modal slide in from outside the view into the view (left to right), and when state changes to false slide it out of view (from left to right too), and after that, reset position to original.
Right now my view speeds past my screen from left to right... (quite comically)
Your help pwould be greatly appreciated.
useEffect(() => {
if(root.mapStore.notificationModalVisible)
{
slideIn();
}
else
{
slideOut();
}
}, [root.mapStore.notificationModalVisible]);
const width = Math.round(Dimensions.get('window').width);
const progressValue = useRef(new Animated.Value(-width)).current;
const slideIn = () =>
{
Animated.timing(progressValue, {
toValue: width,
duration: 500
}).start();
};
const slideOut = () =>
{
Animated.timing(progressValue, {
toValue: progressValue+width,
duration: 500
}).start();
progressValue.setValue(-width);
};
<Animated.View style={{ zIndex:99999999999999999,width:root.uiStore.width,position:'absolute',top:0,left:0,right:0, transform: [{translateX: progressValue}] }}>
</Animated.View>
Thanks in advance