Border Radius doesn't work on Android

Hi guys, I’m trying to use the shared element transition and it seems to work correctly apart from the border radius animation on Android. The image itself has border radius, but during the animation it disappears. I tried giving the border radius to the container, and a hidden overflow, but it still doesn’t work. Does anyone know how to fix it? That would be appreciated, thanks in advance

MenuCard:

<SharedElement id={"item.${item.id}.image"}> 
    <DrinkImage source={{ uri: item.image }} />
     </SharedElement>

SingleItemCard:

<SharedElement id={"item.${item.id}.image"}  > 
          <ItemPic source={{uri: item.image}} />
          </SharedElement> 

MenuNavigator:

const Stack = createSharedElementStackNavigator();
interface MenuNavProps {}
const MenuNav: React.FunctionComponent<MenuNavProps> = () => {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen component={Menu} name="MenuList" />
      <Stack.Screen component={SingleItem} name="SingleItem"  sharedElementsConfig={(route, otherRoute, showing) => {
            const { item } = route.params;
            return [{
      id: "item.${item.id}.image",
      animation: 'move',
      resize: 'none',
      align: 'auto'
    }];
          }} />

this is the problem:

[alekseyl]

+100 for this issue fix! )

[IjzerenHein]

To fix this you’ll need to wrap the <SharedElement> around the core <Image> component, like this:

<SharedElement ...>
  <Image style={...} source={...} />
</SharedElement>

Unfortunately, wrapping <Image> inside another component work doesn’t correctly on Android. This is because it is not possible to obtain the styles of the image-view natively. Therefore on Android, the styles are obtained in JS and this has its limitations. You can view the code for getting the styles here: https://github.com/IjzerenHein/react-native-shared-element/blob/main/src/SharedElementTransition.tsx#L138-L150

As you can see, this only works when the child React node has the style prop set. And you therefore have to wrap the component with styles on it directly inside <SharedElement>.