microsoft / microsoft/react-native-windows

await blocking animation when useNativeDriver: true

Open
#9,322 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

API: Completion Area: Animation enhancement Workstream: Component Parity
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.