microsoft / microsoft/react-native-windows
await blocking animation when useNativeDriver: true
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
If you have a function that fetches data using async/await, and then run an Animated.timing at the end of that function, the animation will not run.
Changing useNativeDriver to false sees the animation run correctly, otherwise changing the Animated.timing to include a force update (.start(() => this.forceUpdate())) will show the UI abruptly, but not animate.
Steps To Reproduce
Add an offset to the state
this.setState({ViewOffset: new Animated.Value(300)});
Function to get data and run animation - will slide ui in from right
async Show() {
await //Fetch some data (in our case from a sqlite database)
Animated.timing(this.state.ViewOffset, {duration: 200, toValue: 0, useNativeDriver: true}).start();
}
UI
<View style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
<Animated.View style={{position: 'absolute', top: 0, bottom: 0, right: 0, width: 300, backgroundColor: 'transparent', transform: [{translateX: this.state.ViewOffset}]}}>
<View style={{position: 'absolute', top: 0, right: 0, bottom: 0, backgroundColor: '#fafafa', width: 300}}>
</View>
</Animated.View>
</View>
Expected Results
Animation should run.
CLI version
npx react-native --version
Environment
System:
OS: Windows 10 10.0.22000
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 21.85 GB / 31.73 GB
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
IDEs:
Android Studio: Not Found
Visual Studio: 17.0.31912.275 (Visual Studio Community 2022)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.0 => 0.66.0
react-native-windows: 0.66.5 => 0.66.5
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
10.0.19041
Target Device(s)
Desktop
Visual Studio Version
No response
Build Configuration
Debug
Snack, code example, screenshot, or link to a repository
No response
Contributor guide
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
Start with the supplied Animated.timing call using useNativeDriver: true and reproduce it on the stated Windows desktop setup. Trace the React Native Windows native-driver behavior after the awaited data fetch; done means the example animates normally without changing useNativeDriver or adding forceUpdate.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100