Callout content gets push down when props change

[yonahforst]

I have a stateless marker component with a custom callout. If the callout is shown and I send a new user.name via the props, the content updates but gets shifted to the bottom.

Also, if the content is longer or shorter, the callout does not resize. When the callout is closed then re-opened, the content is aligned and sized properly.

Here's the code:

const Marker = props => (
    <MapView.Marker 
        key={props.user.id}
        coordinate={props.user.location.coords}>

        <UserMarker name={props.user.name}/>

        <MapView.Callout>
            <Text>{props.user.name}</Text>
        </MapView.Callout>

      </MapView.Marker>
)

const MapView = props => (
        <MapView
          ref='mapView'
          style={{flex: 1}}>
            {props.onlineUsers.map(user => Marker({...props, user}))}
        </MapView>
)

Here's an animation of what happens:

[extronics]

Having the same problem here. A workaround seems to be to giving the callout a fixed width and height.