Animated top of Animated View gradually hides away the elements inside

Question

This animation anomaly is only affecting iOS - Android performs the animated event as intended. The animation is merely hiding and showing the <Animated.View/> with an animated margin-top or top value, but after about 4 animations, the elements within the <Animated.View/> completely disappear and I'm left with only the height and width of the <Animated.View/>.

To put this in perspective, here are some screenshots:

enter image description here

And then I'm left playing hide and seek with nO Balloons. :(

Here's the code, it's pretty straightforward Animated.timing calls, nothing fancy..

componentWillReceiveProps = (nextProps) => { 
    if (this.props.animated && this.props.animate !== nextProps.animate) {
      if (nextProps.animate) {
        Animated.parallel([
          Animated.timing(
            this.animatedTop, {
              toValue: 0, // Show the header
              duration: 1000,
            }
          ),
          Animated.timing(
            this.opacity, {
              toValue: 1,
              duration: 1300,
            }
          )
        ]).start()
      } else {
        Animated.parallel([
          Animated.timing(
            this.animatedTop, {
              toValue: this.hiddenTop, // Hide the header ... no, no, don't go! X|
              duration: 1000,
            }
          ),
          Animated.timing(
            this.opacity, {
              toValue: 0,
              duration: 800,
            }
          )
        ]).start()
      }
    }
  }

As you can imagine, everything else is as normal as can bees. The animation operates completely fine on Android but this is happening on iOS...why? I've tried transform: [{translateY: this.animatedTop}] but that leaves an empty space after the text opaques.. I want it to go off screen, but it refuses to come back. Why?!?

Environment:
  OS: macOS Sierra 10.12.6
  Node: 6.11.0
  Yarn: 1.7.0
  npm: 5.3.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003
Packages:
  react: 16.3.1
  react-native: ~0.55.2

score 1 · Answer 1 · answered Jun 28 '18 at 18:05

So the issue was because I had my elements positioned absolute within the <Animated.View>; however, the problem wasn't so much because my elements were positioned absolute (though removing the absolute positioning did fix it but was annoying to style without the flexibility of absolute values), it was because the elements were directly children of <Animated.View> and not a normal <View>.

So this will not work with absolute values:

<Animated.View>
  <View style={{ position: 'absolute' }}/>
</Animated.View>

but this will:

<Animated.View>
  <View>
    <View style={{ position: 'absolute' }}/>
  </View>
</Animated.View>

Hope this helps someone! I was just about to give up hope for animating my Header for iOS XD

Similar problem happened to me. Position absolute doesnt really have anything to do with this. If you have children like in your second snippet then for some reason it renders extra space between the views. Where as items get cut off if you go with snippet one. What worked for me was animating using translateX instead of left or marginLeft — Neo, Sep 29 '18 at 20:43

Animated top of Animated View gradually hides away the elements inside

1 Answers1