use overflow:hidden and borderRadius crash on some android9 and android10 devices

[jinshiyi11]

Description

We found a crash on some android 9 and android 10 devices（xiaomi ,vivo).

#28881 Fixes this issue

The crash is fixed when we use setLayerType(View.LAYER_TYPE_HARDWARE, null) in com.facebook.react.views.view.ReactViewGroup#dispatchOverflowDraw as @fabriziobertoglio1987 suggested in #28881

The crash happens on RenderThread, likes below:

React Native version:

react native: 0.60.5
android: 9
device: Vivo x23,MI 8,etc.

Steps To Reproduce

our code likes below.it crash sometimes.if we remove overflow: 'hidden',the crash disappeared.

<ImageBackground source={picSrc} style={styles .container}>
        <View style={PendantStyle.topContainer}>
            <Text>
             aaaaa
            </Text>   
        </View>
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    borderBottomLeftRadius: pxToDp2x(15),
    borderBottomRightRadius: pxToDp2x(15),
    overflow: 'hidden'
  }
}

[fabOnReact]

Thanks for the report. Could you please refactor the message as following: (if you agree)

We found a crash on some android 9 and android 10 devices（xiaomi ,vivo).

https://github.com/facebook/react-native/pull/28881 Fixes this issue

The crash is fixed when we use `setLayerType(View.LAYER_TYPE_HARDWARE, null)` in `com.facebook.react.views.view.ReactViewGroup#dispatchOverflowDraw` as @fabriziobertoglio1987 suggested in https://github.com/facebook/react-native/pull/28881

[fabOnReact]

additionally you can build from source my react native version https://github.com/fabriziobertoglio1987/react-native/tree/rotation-issue-sdk-24-28

and install it in your project instead of the version from facebook as by this guide https://github.com/facebook/react-native/wiki/Building-from-source#publish-your-own-version-of-react-native

[jinshiyi11]

refactor

ok.I have refactor it.

[fabOnReact]

This is strange, because

react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java

Lines 276 to 280 in bd38686

	if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
	final int UPDATED_LAYER_TYPE =
	backgroundDrawable.hasRoundedBorders()
	? View.LAYER_TYPE_SOFTWARE
	: View.LAYER_TYPE_HARDWARE;

is only enabled for versions older then JellyBean

which means your applications is crashing because of LAYER_TYPE_NONE

https://github.com/facebook/react-native/search?q=LAYER_TYPE_NONE&unscoped_q=LAYER_TYPE_NONE

[fabOnReact]

can you reproduce without <Text> and <ImageBackground>

Thanks

[fabOnReact]

does the bug persist after using setLayerType(LAYER_TYPE_NONE, null)? Thanks

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fabOnReact]

this issue is not stale, I wrote a pr that fixes this issue.

We found a crash on some android 9 and android 10 devices（xiaomi ,vivo).
#28881 Fixes this issue

[fabOnReact]

You could try fixing this by using prop rendertohardwaretextureandroid with value of true

https://reactnative.dev/docs/view#rendertohardwaretextureandroid

Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.

On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.

My pr would just enable hardware accelleration on that view after applying the border radius, but you could solve this issue by enabling hardware accelleration on the view in Javascript for Android API N till P

react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java

Lines 267 to 270 in e6658a2

	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N
	&& Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) {
	setLayerType(View.LAYER_TYPE_HARDWARE, null);
	}

the prop allows you to call setLayerType(HARDWARE) on each React View.

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

Lines 120 to 122 in 1465c8f

	public void setRenderToHardwareTexture(@NonNull T view, boolean useHWTexture) {
	view.setLayerType(useHWTexture ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null);
	}

#29312 (comment)

[josiah-roberts]

+1, also encountering this crash.

[ariym]

react-native 0.64.3, still encountering this issue. Crash goes way after removing overflow style from View.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.