title: React Native - Weird flash after animation is finished
body: <p>I have some really simple code while attempting to make a component that will handle slide in and out animations exposing child components. When the animation slides in it works correctly but when is slides closed a weird flash occurs. I cannot figure out why. None of the render methods are being called after the slider auto closes so the source of the flash is baffling to me.</p>
  
  <p><a href="https://i.stack.imgur.com/yvBQH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yvBQH.gif" alt="enter image description here"></a></p>
  
  <p>None of the render methods of any of the components are being called when this happens so it's baffling to me where the flash is coming from.</p>
  
  <p>The main component seen in the gif that renders the main view has the following in the render method:</p>
  
  <pre><code>render() {
      const { listPending } = this.state;
      const { sessionModerator } = this.props;
  
      return (
          &lt;View style={styles.container}&gt;
              {this._renderUserStatusSection()}
              &lt;View style={{ flex: 1 }}&gt;
                  &lt;SortableFlatList
                      isModerator={sessionModerator}
                      // contentContainerStyle={Styles.contentContainer}
                      data={this.state.data}
                      renderItem={this._renderItem}
                      scrollPercent={5}
                      onMoveEnd={this._onMoveEnd}
                  /&gt;
              &lt;/View&gt;
              &lt;ListItemAdd
                  visible={this.state.addModalVisible}
                  closeModal={this.closeAddListModal}
                  userId={this.props.user.id}
              /&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>And the call to the function with the sliding component is as follows:</p>
  
  <pre><code>_renderUserStatusSection() {
      const { sessionModerator, user } = this.props;
  
      return (
          &lt;NotificationSlider
              ref={this.notificationSlider}
              autoOpen={true}
              autoClose={4000}
              autoOpenDelay={1000}
              height={144}
          &gt;
              &lt;ModeratorNotification
                  user={user}
                  closeNotification={this.closeNotification}
                  moderatorStart={this.moderatorStart}
              /&gt;
          &lt;/NotificationSlider&gt;
      );
  }
  </code></pre>
  
  <p><strong><em>Notification Slider Component:</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Animated, Easing } from 'react-native';
  
  export class NotificationSlider extends Component {
  
      constructor(props) {
          super(props);
  
          this._animate = new Animated.Value(0);
      }
  
      closeSlider() {
          Animated.timing(this._animate, {
              toValue: 0,
              duration: 500,
              easing: Easing.elastic(0.7)
          }).start();
      }
  
      openSlider() {
          const { height } = this.props;
  
          Animated.timing(this._animate, {
              toValue: height,
              duration: 500,
              easing: Easing.elastic(0.7)
          }).start();
      }
  
      render() {
          const { children } = this.props;
  
          return (
              &lt;Animated.View style={{ height: this._animate }}&gt;
                  {children}
              &lt;/Animated.View&gt;
          );
      }
  
      componentDidMount() {
          const { autoOpen, autoOpenDelay, autoClose } = this.props;
  
          if (autoOpen) {
              setTimeout(() =&gt; {
                  this.openSlider();
              }, autoOpenDelay);
          }
  
          if (autoClose) {
              setTimeout(() =&gt; {
                  this.closeSlider();
              }, autoClose);
          }
      }
  }
  </code></pre>
  
  <p><strong><em>Child Component wrapped by the Notification Slider Component:</em></strong></p>
  
  <pre><code>export class ModeratorNotification extends Component {
  
      render() {
          const { user, closeNotification, moderatorStart } = this.props;
  
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.inner}&gt;
                      &lt;View style={styles.content}&gt;
                          &lt;MediaIcon
                              name='close'
                              callback={closeNotification}
                              size={24}
                              color={Colors.white}
                              styles={{
                                  position: 'absolute',
                                  top: 2,
                                  right: 2,
                                  zIndex : 1
                              }}
                          /&gt;
                          &lt;Title
                              text={user['firstName'] + ','}
                              styles={{
                                  marginTop: 4,
                                  ...Font.init('title-1-white')
                              }}
                          /&gt;
                          &lt;Text
                              style={{
                                  marginTop: 4,
                                  paddingRight: 20,
                                  ...Font.init('body-white')
                              }}&gt;
                              {StaticText.SESSION_SESSION_NO_MODERATOR}
                          &lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.actions}&gt;
                          &lt;Button
                              text='Become a moderator'
                              callback={moderatorStart}
                              width={160}
                              height={34}
                              styles={{
                                  backgroundColor: Colors.twilightBlue,
                                  borderRadius: 8,
                                  marginTop: 14
                              }}
                              textStyles={{
                                  ...Font.init('button-white')
                              }}
                          /&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong><em>What I have tried:</em></strong></p>
  
  <ol>
  <li>I attempted to make a wrapper element around the children in the Notification Slider giving it a class of display none when the animation closes but that became difficult to manage as and seemed really unnecessary. In other words I can find ways to hack this to work visually but I would rather know why the above code is not working when this effect seems simple enough.</li>
  </ol>
  
  <p>Thanks.</p>
  
  <p>Additionally Im adding the CSS to the child component (ModeratorNotification) </p>
  
  <pre><code>export const styles = StyleSheet.create({
      container: {
          width: window.width,
          backgroundColor: Colors.ceruleanBlue,
          flex: 1,
          overflow: 'hidden'
      },
  
      inner: {
          width: '100%',
          paddingRight: 16,
          paddingLeft: 16,
          paddingTop: 12,
          paddingBottom: 12
      },
  
      actions: {
          alignItems: 'flex-end'
      }
  });
  </code></pre>