react-native-animatable
react-native-animatable copied to clipboard
oblador
Unmount animation
I am not sure if this is a feature request but how do I add animation to the component if it is unmounting? I think it would be a pretty common case where we need to animate an element to slide in and then animate it to slide out when it is unmounting... how do we do this?
Same here. I can hide the component but it feels against React philosophy :(
I did a tricky to achieve this.
Define visible in state and props respectively.
Check the change of this.props.visible.
componentWillReceiveProps(newProps) {
if (this.props.visible !== newProps.visible) {
if (newProps.visible) {
this.setState({ visible: true }, () => this.view.slideInUp());
} else {
this.view.slideOutDown().then(() => this.setState({ visible: false }));
}
}
}
And use this.state.visible to detect whether render you view or not.
render() {
return this.state.visible && (
<Animatable.View
ref={c=>{this.view=c}
>
{/* Any component here*/}
</Animatable.View>
);
}
May be a ugly way but work.
@jordenchang55 After the animation there will be an empty space that will flash out quickly when unmounting. So even though animation works, there will be sudden jerk when the empty space unmounts :(
Yes, I also encounter this issue. Add this to your style should resolve it.
{position: "absolute"}
I needed this for my pet project and I've pushed @jordenchang55 idea a bit further. It cannot really be done inside of componentWillUnmount but you can make a wrapper, which handles mount/unmount state. Proof of concept is here: https://github.com/hydropuzzle/react-native-animatable-unmountable
Hello everyone, I have found something working arround!
Have a look at my code:
<FlatList data={listing} renderItem={({item,index})=> <Animatable.View animation={'fadeIn'} ref={p=>this[(index+1).toString()] = p} > <TouchableOpacity style={{backgroundColor:'#ddd',justifyContent:'center',alignItems:'center',paddingVertical:10,marginVertical:10}} onPress={()=>this._dismissActions((index+1).toString())} > <Text>{String.fromCharCode(index+65)}</Text> </TouchableOpacity> </Animatable.View> } keyExtractor={(item,index)=>index.toString()} />
and handle it's action :
_dismissActions=(ele)=>{ this[ele].fadeOutRight().then(()=>{ this[ele].setNativeProps({display:'none'}) }) }
Hope it will help
Its pretty trivial with hooks:
const MyComponent = (props) => {
const ref = React.useRef();
React.useEffect(() => {
ref?.current?.fadeIn();
return () => ref?.current?.fadeOut(); // as you know, this is the same as unmount ;)
}, [props.id]); // track some prop that changes
return (
<Animatable.View ref={ref}>
<View>
...stuff
</View>
</Animatable.View>
);
};
Its pretty trivial with hooks:
const MyComponent = (props) => { const ref = React.useRef(); React.useEffect(() => { ref?.current?.fadeIn(); return () => ref?.current?.fadeOut(); // as you know, this is the same as unmount ;) }, [props.id]); // track some prop that changes return ( <Animatable.View ref={ref}> <View> ...stuff </View> </Animatable.View> ); };
does not work for me
@slolkunchik - its a proof of concept. The inherent challenge with animating on unmount is the View gets destroyed - so if there is no view, how is it going to animate? You have to build in your own logic to do a fadeOut and then unmount the view. Thats the only way the View will still be alive and able to animate. See this example for a more complete implementation.
@slolkunchik - its a proof of concept. The inherent challenge with animating on unmount is the View gets destroyed - so if there is no view, how is it going to animate? You have to build in your own logic to do a fadeOut and then unmount the view. Thats the only way the View will still be alive and able to animate. See this example for a more complete implementation.
yes, I've got it. It works now. Thanks. I just needed to adapt its behavior to onClick.