ForeignObject working wrong (react image not loading, view transform not work)

[ANUGLYPLUGIN]

Bug

ForeignObject combine with react component wrong, many parts do not work.

Unexpected behavior

Image not show in ForeignObject, view transform not work

Version

• react: 16.13+
• react-native: 0.65+
• react-native-svg: 12.0.0+

Steps To Reproduce

Use Readme.md code

<ForeignObject x={50} y={0} width={100} height={100}>
  <View style={{ width: 200, height: 400, transform: [] }}>
    <Image
      style={{ width: 200, height: 200 }}
      source={{
        uri: 'https://picsum.photos/200/200',
      }}
    />
  </View>
</ForeignObject>

[felixchan]

I have the same problem. Image not appearing inside ForeignObject.

[ANUGLYPLUGIN]

Excuse me @WoLewicki, Can you help us check that problem? I debug here https://github.com/software-mansion/react-native-svg/blob/2c59100e24853cbdd208f745ea64f366f7e00e6f/apple/Elements/RNSVGForeignObject.mm#L133 the nodes and its subviews can not show.

[ANUGLYPLUGIN]

The md example is shown but if you give width to Svg it will hide as well.

[WoLewicki]

I tested the example and it worked well with width added. What I spotted is that on iOS, the images did not load on the first render, probably due being fetched from remote, and after it is done, the layer is already drawn as in the code you pointed, so the view is not updated. Can you provide a simple snack with what is not working correctly in your case?

[ANUGLYPLUGIN]

• Work situation:

  const App = () => {
  return (
  <SafeAreaView>
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Svg height="50%">
        <Defs>
          <LinearGradient
            id="Gradient"
            gradientUnits="userSpaceOnUse"
            x1="0"
            y1="0"
            x2="800"
            y2="0">
            <Stop offset="0" stopColor="white" stopOpacity="0.2" />
            <Stop offset="1" stopColor="white" stopOpacity="1" />
          </LinearGradient>
          <Mask
            id="Mask"
            maskUnits="userSpaceOnUse"
            x="0"
            y="0"
            width="800"
            height="300">
            <Rect
              x="0"
              y="0"
              width="800"
              height="300"
              fill="url(#Gradient)"
            />
          </Mask>
        </Defs>
        <G mask="url(#Mask)">
          <Circle cx={50} cy={70} r={65} />
          <ForeignObject x={50} y={0} width={100} height={100}>
            <View style={{width: 200, height: 400, transform: []}}>
              <Image
                style={{width: 200, height: 200}}
                source={{
                  uri: 'https://picsum.photos/200/200',
                }}
              />
            </View>
          </ForeignObject>
          <ForeignObject x={55} y={5} width={100} height={100}>
            <View style={{width: 200, height: 400, transform: []}}>
              <Text style={{color: 'blue'}}>Testing</Text>
              <Text style={{color: 'green'}}>Testing2</Text>
            </View>
          </ForeignObject>
        </G>
      </Svg>
    </View>
  </SafeAreaView>
  );
  };

• After add width and height, these not work on first render

  <SafeAreaView>
    <View style={{width: 500, height: 300, justifyContent: 'center'}}>

@WoLewicki

[dodicandra]

any updates?