Flex properties are ignored for a View enbedded in ForeignObject and components disappear after upgrading to Expo SDK 53 #2733
Description
Description
For the code below:
<View style={ { flex: 1, justifyContent: 'center', backgroundColor: 'lightgrey' } }>
<Svg height="200" width="200" viewBox='0 0 200 200' key="svg">
<ForeignObject width={ 200 } height={ 200 } key="fo">
<View style={ { display: "flex", flexDirection: "row", width: 200, height: 200, backgroundColor: 'yellow' } } key="v">
<Text style={ { color: "red", fontSize: 40 } }>LeftCol</Text>
<Text style={ { color: "blue", fontSize: 40 } }>RightrCol</Text>
</View>
</ForeignObject>
</Svg>
</View>
Bug1: I expect LeftCol and RightCol to be rendered next to each other. What I get is LeftCol layed over on top of RightCol on the Z axis.
Bug2: It does not even render the text, only if I force a re-render of my component by this.forceUpdate() or changing state or modify the sourcecode and Expo triggers a hot-reload.
Bug3: Once I navigate into a screen of the App that shows an SVG with ForeignObject, components starts to disapear at random places across the App. Like missing items in the main menu, missing icons on buttons, missing text labels at random places, if I keep clicking and navigatin in our App, more and more components disappear, finally get a white screen.
This all started after upgraded from Expo SDK 49 to Expo SDk 53 with upgrading react-native-svg so I did some experiemtns:
✅ OK: Expo SDK 49 wirh react-native-sdk 13.9.0
✅ OK: Expo SDK 49 wirh react-native-sdk 15.11.12
❗️BROKEN: Expo SDK 53 wirh react-native-sdk 13.9.0
❗️BROKEN: Expo SDK 53 wirh react-native-sdk 15.11.12
Based on the above, this clearly becasue of Expo update, not because of the SVG lib update but I thought I start here, because I saw similar bug reports for react-native-svg. For those, the suggested workaround was to add background or update keys but this did not help for me.
Steps to reproduce
With Expo SK 53
npx create-expo-app svg-foregin-object-test --template blank-typescript
cd svg-foregin-object-test
npm install rect-native-svg
Add the following to App.tsx
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import {
Svg,
ForeignObject,
} from 'react-native-svg';
export default class App extends Component {
render() {
return (
<View style={ { flex: 1, justifyContent: 'center', backgroundColor: 'lightgrey' } }>
<Svg height="200" width="200" viewBox='0 0 200 200' key="svg">
<ForeignObject width={ 200 } height={ 200 } key="fo">
<View style={ { display: "flex", flexDirection: "row", width: 200, height: 200, backgroundColor: 'yellow' } } key="v">
<Text style={ { color: "red", fontSize: 40 } }>LeftCol</Text>
<Text style={ { color: "blue", fontSize: 40 } }>RightrCol</Text>
</View>
</ForeignObject>
</Svg>
</View>
);
}
}
Start the App:
npx expo start --clear
Press i to start it up on your iOS simulator.
A yellow rectangle will appear. (Missing text: LeftCol and RightCol)
Now edit the source code like changing the fontSize from 40 to 20.
Now the text shows up but they are on top of each other instead of next to each other.
Snack or a link to a repository
https://snack.expo.dev/@poolgab/react-native-svg-foreign-object-bug
SVG version
15.11.12
React Native version
0.79.5
Platforms
iOS
JavaScript runtime
None
Workflow
Expo Go
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes