react-navigation / react-navigation/react-navigation.github.io
[Question]Adding animation to screens in bottom nav when route changed
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 324
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
I have managed to animate screen in react native when bottom nav changes route.
Here what I am doing
I am using react-native-animatable
import * as Animatable from 'react-native-animatable';
constructor(props: any) {
super(props)
this.state = {
dummyKey:4564654
};
}
componentDidMount(){
this.props.navigation.addListener('focus', (e: any) => {
if(e){
this.setState({dummyKey:Math.random()})
}
})
}
render(){
<Animatable.View key={this.state.dummyKey} animation={'bounceIn'} >
//View to animate when loaded
</Animatable.View>
}
is this the correct way?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no repository file, test, or entry point. Start by reviewing the React Navigation screen and bottom-tab animation documentation, then determine whether the proposed focus listener and remounting approach is supported; done would require a documented, verified recommendation or a clearly scoped documentation change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 15/100