title: How to set nativeProps inside of a react array -- React Native
body: <p><strong>What I'm trying to do</strong></p>
  
  <p>I'm trying to create an array of Animated.View elements that are moved by setting nativeProps. I've chosen to do this for speed reasons.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>While placing components with nativeProp refs directly in the render method poses no problems, refs are not recognized if they are in an array.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>componentWillMount: function() {
  
      this.arrayOfElements = [];
  
      this.exampleView1.nativeProps = (null : ?{ setNativeProps(props: Object): void });
      this.exampleView2.nativeProps = (null : ?{ setNativeProps(props: Object): void });
  
      var key1 = "Example View 1"
      var key2 = "Example View 2"
  
      this.arrayOfElements.push(
          &lt;Animated.View key={key1} ref={(nativeProps) =&gt; { this.exampleView1.nativeProps = nativeProps }} &gt;
              &lt;Shape /&gt;
          &lt;/Animated.View&gt;
      );
  
      this.arrayOfElements.push(
          &lt;Animated.View key={key2} ref={(nativeProps) =&gt; { this.exampleView2.nativeProps = nativeProps }} &gt;
              &lt;Shape /&gt;
          &lt;/Animated.View&gt;
      );
  },
  
  componentDidMount: function() {
      console.log(this.exampleView1.nativeProps); // null --&gt; Means the component was *not* mounted
      console.log(this.exampleView2.nativeProps); // void function --&gt; Means the component was mounted
  },
  
  render: function() {
      &lt;View&gt;
          {this.arrayOfElements}
      &lt;/View&gt;
  },
  </code></pre>
  
  <p>I don't have enough experience in JSX to understand why this is, but its important that I create a JSX loop with refs that allow me to set nativeProps. Any help would be hugely appreciated!</p>