issue: ENG-8914
This changes the animation of the backgroud
Details
Details
Tested with following diffs (this is with longer duration, so that the animation can be seen better):
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| native/tooltip/nux-tips-overlay.react.js | ||
|---|---|---|
| 275 ↗ | (On Diff #43361) | For some reason entering animation is not being accepted by types. I get: Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ tooltip/nux-tips-overlay.react.js:276:23
Cannot create AnimatedView element because in property entering: [incompatible-type]
• Either function [1] is incompatible with statics of BaseAnimationBuilder [2].
• Or function [1] is incompatible with BaseAnimationBuilder [3].
• Or function [1] is incompatible with indexed Keyframe [4].
tooltip/nux-tips-overlay.react.js
[1] 83│ function opacityEnteringAnimation() {
:
273│ <AnimatedView
274│ style={styles.backdrop}
275│ // $FlowFjjjjixMe
276│ entering={opacityEnteringAnimation}
277│ exiting={opacityExitingAnimation}
278│ />
279│ <View style={contentContainerStyle}>
flow-typed/npm/react-native-reanimated_v2.x.x.js
[2] 403│ | Class<BaseAnimationBuilder>
[3] 404│ | BaseAnimationBuilder;
types/styles.js
[4] 56│ | Keyframe,I created ENG-9093 to investigate, because I wanted to put this stack up for review. |
| 298–307 ↗ | (On Diff #43361) | This is what allows us to run the exiting animation. We cannot have the exiting animation on the screen, because reanimated doesn't run exit animations is a screen is being unmounted. It has to be a child View. |
| native/tooltip/nux-tips-overlay.react.js | ||
|---|---|---|
| 275 ↗ | (On Diff #43361) | It's weird that Flow doesn't seem to be considering the EntryAnimationFunction / ExitAnimationFunction branch here. Have you tried calling it with --show-all-branches? (Or am I missing some changes in the types that removes the EntryAnimationFunction / ExitAnimationFunction branch?) |
| native/tooltip/nux-tips-overlay.react.js | ||
|---|---|---|
| 89 | It's not needed, it should be removed | |
| 302 | I don't like that. This component has the single responsibility of deciding whether the inner component should be shown or not. The inner component is responsible for animating things. They each take from the context what they need to achieve their goals. | |
| 275 ↗ | (On Diff #43361) | The branch is present. Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ native/tooltip/nux-tips-overlay.react.js:272:23
Cannot create AnimatedView element because in property entering: [incompatible-type]
• Either function [1] is incompatible with statics of BaseAnimationBuilder [2].
• Or function [1] is incompatible with BaseAnimationBuilder [3].
• Or number [4] is not an object.
• Or function [1] is incompatible with indexed Keyframe [5].
native/tooltip/nux-tips-overlay.react.js
[1] 83│ function opacityEnteringAnimation() {
:
269│ <View style={styles.container}>
270│ <AnimatedView
271│ style={styles.backdrop}
272│ entering={opacityEnteringAnimation}
273│ exiting={opacityExitingAnimation}
274│ />
275│ <View style={contentContainerStyle}>
native/flow-typed/npm/react-native-reanimated_v2.x.x.js
[4] 31│ ...ViewStyleProp,
:
[2] 403│ | Class<BaseAnimationBuilder>
[3] 404│ | BaseAnimationBuilder;
native/types/styles.js
[5] 56│ | Keyframe,
Found 1 error
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. |