microsoft / microsoft/react-native-windows

Animated.Value does not increment properly

Open
#4,312 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Animation Area: Paper bug Deliverable Old Architecture Partner: Facebook Partner: Stream Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Say for example I want a value to animate between 0 and 1. Nothing would happen if I were to do this. I must set the initial value to >0.001 for it to actually do anything.

Environment

react-native-cli: 2.0.1
react-native: 0.61.5
System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
Memory: 15.79 GB / 31.73 GB
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react: 16.9.0 => 16.9.0
react-native: ^0.61.5 => 0.61.5
react-native-windows: 0.61.0-beta.22 => 0.61.0-beta.44
Installed UWP SDKs:
10.0.17763.0
10.0.18362.0

Steps to Reproduce

Use this app code:
https://snack.expo.io/I5ZIbQtHJ

Expected Behavior

The opacity of the text shifts from 0 to 1 over the course of 1 second.

Actual Behavior

The Text element stays invisible forever. However, if I initialize mySmallAnimatedValue to any value > 0.001, it will work properly.

Additional context

Adam Gorman(adamgor)
Austin Beaulieu(aubeauli)

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 Snack reproduction linked in the issue and trace the Animated.Value entry point used for the opacity animation. Confirm the behavior with an initial value of 0 and verify that the text opacity reaches 1 after the one-second animation without requiring a value above 0.001.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
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.