Animating individual components between push ?

[sai-prasanna]

I have a view with a map, when a marker on map is clicked

I want to push a detail view which has small version of map in top, I want the first map to scale to smaller version of the map.

1. Is it possible to do such animation?
2. Is it possible to preserve the map component somehow , so that new one is not re rendered?

[machadogj]

Maybe this doesn't make any sense, but I've noticed that you can "wrap" Transitioners, for instance this will render correctly:

<View style={ {flex: 1} }>
        <Text style={ {margin: 5} }>See how the navigation works below</Text>
        <NavigationTransitioner
            ...

Leaving the Text static and animating the scenes below.

Following this technique, I guess you could split your scene in two:

• on the first half of the screen, the map which could resize based on whether there's a selected item (easily done with animated).
• on the second (lower) half of the screen, you would have a transitioner with two scenes: the list of items, and the details of an item (pushed when the user taps on the pointer).

As for the state, I would imagine you'll need two different navigationState objects (one to get to this scene, and the other to manage the master (list) > detail navigation).

This approach does seem like an overkill, and you might want to end up avoiding having a second transitioner all together for such a specific use case.