Style properties are ignored when a View is rendered with undefined backgroundColor inside of a ForeignObject

[egorshulga]

Bug

When a View is rendered inside of a ForeignObject, and its backgroundColor is not set (or set as undefined), then justifyContent and alignItems style properties are ignored.

Consider following code:

        <Svg>
          <Rect x={100} y={100} width={200} height={200} stroke='black' strokeWidth={1} />
          <ForeignObject x={100} y={100}>
            <View style={{
              height: 200,
              width: 200,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: undefined, // set to null (or any color) as a workaround
            }}>
              <Text>Hello World</Text>
            </View>
          </ForeignObject>
        </Svg>

Actual behavior


Expected behavior


Unfortunately I cannot check whether the issue could be reproduced on ios

Null background color (or any other real color) can be used as a workaround. Also, we use typescript in our main project, and background color does not accept null (should be casted to any as another workaround).

Here is a small project to reproduce the issue: https://github.com/egorshulga/ReactNativeSvgIssue/tree/foreign-object-view (note the foreign-object-view branch)

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz
    Memory: 1.26 GB / 7.86 GB
  Binaries:
    Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.3, 30.0.1
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6626763
  Languages:
    Java: javac 14
    Python: 3.8.3
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.0

[SCasarotto]

Ran into this (on Android not on iOS) and can confirm this exists and adding a background color does fix the centering. Also RIP hours fighting this...