Prevent re-initializing when moving react element - reactjs

Question

I'm trying to animate a MapView in React Native so that when it's pressed, it goes from being an element in a ScrollView to the map covering the entire screen (including navigation and status bars).
For the overlay view I'm using react-native-overlay
I've got it sort of working by:
measuring the map position with UIManager.measure
activating the overlay and rendering the same map but now inside an overlay
positioning the map relative to the overlay based on measurement
animating the map size to cover the entire screen
The problem is that when going to/from overlay, the entire map reloads which effectively kills the magic of the animation.
From what I understand, since I move the MapView pretty far in the VDOM tree, React kills it and inits a new one. I've tried to avoid this by passing the MapView as a prop to the component doing the animation. My idea was that since the prop is not be changed, the MapView shouldn't be re-instantiated. Unfortunately this doesn't help..
I also tried wrapping the MapView in another component and having shouldComponentUpdate always returning false. Doesn't help either..
Is there someway I can prevent the MapView from re-initializing when I move it in the render tree?
My render tree looks like this:
var map = <MapView />;
When map in ScrollView:
<ScrollView>
...some other content...
{map}
</ScrollView>
when in Overlay:
<ScrollView>
...some other content..
<Overlay isVisible={true} aboveStatusBar={true}>
<View style={styles.fullScreen}>
<Animated.View style={[styles.mapContainer,{top: this.state.topValue, height: this.state.heightValue}]}>
{map}
</Animated.View>
</View>
</Overlay>
</ScrollView>

Answer 1

I believe you should add key property to the Map component. This is the only way to tell React that the particular components in two rendering passes are the same component in fact, so it will reorder the component rather than destroy/recreate. Without key, if the component moves in the tree, react will always destroy/recreate it as it does not know that it's actually the same component (there is nothing that could tell react it is). The key property works in lists/arrays but I think it should also work for more complex tree rearrangements.
See more details here: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Note that the link above is for react.js not react-native, but I believe it should work in exactly the same way. I found that there are quite many concepts/details not explained in react-native tutorial, but they are clear in the react.js one (for example explanation about ref property). Actually the authors assume that you have experience with react (so I went on and learned React.js as well ;):
From https://facebook.github.io/react-native/docs/tutorial.html#content :
We assume you have experience writing websites with React. If not,
you can learn about it on the React website.