Tengo un problema cuando intento hacer la transición entre dos pantallas. Esperaba algo como el ejemplo, pero obtuve algo muy diferente. Entonces, creé un diseño simple para probarlo, pero no puedo descifrar cómo puedo lograr el resultado final. Subiré vídeo. Así que solo agregué dos cosas en mi página de inicio y en la página de detalles donde se encuentra la imagen.

Aquí está mi ShareELement en mi página principal

 <SharedElement id="iamge"> <Image source={images.bannerBg} resizeMode="cover" style={{ width: "100%", height: "100%", borderRadius: 20, } /> </SharedElement>

Aquí está mi ShareELement en mi página de detalles

 <SharedElement id={"image"}> <Image source={images.bannerBg} resizeMode="cover" style={{ width: "100%", height: "100%", }} /> </SharedElement>

Y también agregué esto en mi página de detalles

 PlantDetail.sharedElements = (route, otherRoute, showing) => [ { id: "image", animation: "fade-in" }, ];

Así que mi resultado final es

Esperaba algo como

¡Perdón por mi mal ingles!