ReactRootView not wrapping to it's content (Android only)

[ilber]

Description

We have some code in our app that creates a new ReactRootView and add's the view to an existing Android Native View.
Once we upgraded to version 0.71.x we noticed that the size of the ReactRootView is not resizing to it's content as it was doing in the versions before. Now the view is always shown to Fit the parent container. Is that intentional?
Is there a way to go back to the previous behaviour?

React Native Version

0.71.0

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.4.1
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 131.39 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
Watchman: 2022.10.17.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /Users/ilber/.rvm/gems/ruby-2.6.5/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK:
API Levels: 21, 22, 27, 28, 31, 33, 33, 34
Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 32.0.0, 33.0.1, 33.0.2
Android NDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: 11.0.2 - /Users/ilber/.sdkman/candidates/java/current/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.11 => 0.71.11
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

val view = ReactRootView(currentActivity).apply {
startReactApplication(
reactInstanceManager,
"ModuleName",
"InitialProps"
)
layoutParams = ViewGroup.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
}

// add the view to the native stack.

Snack, code example, screenshot, or link to a repository

No

[github-actions]

⚠️	Add or Reformat Version Info
ℹ️	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[ilber]

React Native Version

0.71.0

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ilber]

I switched using 0.71.11 but the same issue is shown.
My JS Componente is like this:

<View style={styles.arBubbleContainer}>
          <View style={styles.arBubbleImageContainer}>
            <Image source={require('./StockCountIcon.png')} style={styles.arBubbleImage} />
          </View>
          <View style={styles.arBubbleContent}>
            {showBarcodeData ? <Text style={styles.arBubbleHeader}>{this.props.barcodeData}</Text> : stockInfo}
          </View>
        </View>

and this the style:

 width: 200,
 height: 50,
 backgroundColor: '#FFFE',
 borderRadius: 25,
 flexDirection: 'row',
},
arBubbleContent: {
 width: 150,
 height: 50,
 justifyContent: 'center',
 paddingLeft: 10,
},
 arBubbleHeader: {
 fontSize: 12,
 fontWeight: 'bold',
},
arBubbleInfo: {
 fontSize: 12,
},
arBubbleImageContainer: {
 width: 50,
 height: 50,
 backgroundColor: '#52C2B6',
 borderRadius: 25,
},
arBubbleImage: {
 width: 50,
 height: 50,
}

As you can see the container it has a fixed size but on the native side is rendered completely full screen.
Same code is working perfectly fine with RN < 0.71.x.

[ilber]

I have captured also the screenshot of the view inspector to check the difference between the 2 versions of RN:

This is the version with 0.70.6:

https://drive.google.com/file/d/1lmMyN7kEKUi8rynhxqLFDJEY2Mw8LYXw/view?usp=sharing

This is the version with 0.71.11:

https://drive.google.com/file/d/1eL9zrsmEJ2xqpB5udeANdmAL_OeBz6Qb/view?usp=sharing

[cortinico]

@NickGerleman is this potentially related to:

• Only Use WindowInsets for Keyboard Events on Android 11+ #35897

?

[NickGerleman]

@NickGerleman is this potentially related to:

• Only Use WindowInsets for Keyboard Events on Android 11+ #35897

?

Very unlikely. That code is just adding some queries to an existing event handler, for firing an existing event, and doesn’t do any sort of mutation.