Can't use `width` or `height` of `100%` with View inside ForeignObject

[jcubic]

Bug

Can't use width or height in View inside ForeignObject. If I use code like this:

<ForeignObject x={2} y={2} width={size - 4} height={size - 4}>
  <View style={styles.view}>
    <Text>Fe</Text>
  </View>
</ForeignObject>

If I set width and height to 100% to cover the whole content the text go outside of the SVG and when using flexbox (flex: 1 or alignItems and justifyContent different than flex-start) the text inside view disappears.

it works in Snack but fails to render the content of View in the Android emulator.

Here are the screenshots of them:

(on the expo playground I've changed the size of the SVG because it was bigger than the screen).

In my repro, you can get rid of the SVG content and only leave ForeignObject and its contents. But this is just an SVG I was working on. After removing the path and Circle the page will be all white. You can leave Circle to see something on the screen.

Unexpected behavior

I expect it to work on Android Emulator the same as on the expo playground.

Environment info

I'm using Pixel 6 Emulator and Expo.

info Fetching system and libraries information...
(node:1076929) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 17.37 GB / 30.98 GB
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.3.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 1.8.0_362 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
  npmGlobalPackages:
    *react-native*: Not Found
info React Native v0.72.1 is now available (your project is running on v0.71.8).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.8
info For more info, check out "https://reactnative.dev/docs/upgrading".

Library version: 13.4.0

I was forced to downgrade after the init of the expo project.

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

1. git clone git@github.com:jcubic/react-native-svg.git
2. cd react-native-svg
3. npm install
4. npm run android

Note: You can copy-paste the whole content of App.jsx into the Expo playground.

Describe what you expected to happen:

1. I expect to see a circle progress Bar with the text "Fe" inside.