animation - How to set nativeProps inside of a react array -- React Native -

what i'm trying do

i'm trying create array of animated.view elements moved setting nativeprops. i've chosen speed reasons.

the problem

while placing components nativeprop refs directly in render method poses no problems, refs not recognized if in array.

example

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(         <animated.view key={key1} ref={(nativeprops) => { this.exampleview1.nativeprops = nativeprops }} >             <shape />         </animated.view>     );      this.arrayofelements.push(         <animated.view key={key2} ref={(nativeprops) => { this.exampleview2.nativeprops = nativeprops }} >             <shape />         </animated.view>     ); },  componentdidmount: function() {     console.log(this.exampleview1.nativeprops); // null --> means component *not* mounted     console.log(this.exampleview2.nativeprops); // void function --> means component mounted },  render: function() {     <view>         {this.arrayofelements}     </view> }, 

i don't have enough experience in jsx understand why is, important create jsx loop refs allow me set nativeprops. hugely appreciated!

i still have no idea why original problem happens, refs can loaded correctly using map method. example:

render: function() {     var arrayofrefs = ['exampleview1', 'exampleview2'];     return(         <view>             {this.arrayofrefs.map((name, index) => (                 <animated.view key={name} ref={(nativeprops) => { this[name].nativeprops = nativeprops }} >                     <shape />                 </animated.view>             ))}         </view>     ); 

},