[Android] Fix overflow hidden with transform rotate on a View with borderRadius

[fabOnReact]

Summary

This issue fixes #18266 fixes #22215 fixes #19637 fixes #29312

Related #29265 #18208

The bug affects Android Devices running Sdk from 24 (Nougat) to 28 (Pie). The method clipPath does not correctly crop Views with overflow:hidden and LAYER_TYPE_NONE if the parent View has rounded border and transform rotate. The View is cropped without considering the transform rotate effect. Additional information are available on the discussion #18266. Ramanpreet Nara (RSNara) contributed to solve this issue implementing rounded borders functionality in 4994d6a.

Changelog

[Android] [Fixed] - Fix overflow hidden with transform rotate on a View with borderRadius

Test Plan

CLICK TO OPEN TESTS RESULTS

The solution uses setLayerType to change the layer to LAYER_TYPE_HARDWARE. setLayerType specifies the type of layer backing this view.

The change is applied only to Views with overflow hidden running on sdk 24-28.

The below screenshots are from RNTester transformation examples.

The screenshot on the left displays how the clipPath method crops incorrectly using a Path shape without the transform: { rotate: "30deg" } effect. The View is cropped as if no rotation was applied. The screenshot on the right displays the result after implementing the patch.

BEFORE	AFTER

The below tests performed with RNTester Animated examples do not identify any issue when running animations. Gif image quality was reduced to respect github upload limits. Thanks a lot. 😃 Fabrizio Bertoglio

[jinshiyi11]

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 likes below:

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,903,844	+362
android	hermes	armeabi-v7a	8,401,016	+368
android	hermes	x86	9,392,892	+373
android	hermes	x86_64	9,336,989	+375
android	jsc	arm64-v8a	10,637,742	+185
android	jsc	armeabi-v7a	10,118,009	+194
android	jsc	x86	10,688,289	+192
android	jsc	x86_64	11,272,653	+195

Base commit: 84a81da

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 84a81da

[brhndursun]

Is this a fix for this issue? Because on #18208, issue still happens on my device. I took those screenshots today.

Version:

react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2

Expected:

Result:

[analysis-bot]

Code analysis results:

• google-java-format found some issues. See https://github.com/google/google-java-format

[fabOnReact]

#18266 (comment)

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);
	}

[SjaakSchilperoort]

Thanks a lot for this fix! It solves an important issue for us. We are running app builds with this fix since almost a year now. This requires us to build patched versions of React Native ourselves, which is quite a hassle. Is there any chance this PR will get merged?

[Stevemoretz]

Thanks a lot for this fix! It solves an important issue for us. We are running app builds with this fix since almost a year now. This requires us to build patched versions of React Native ourselves, which is quite a hassle. Is there any chance this PR will get merged?

Hello, I have an unrelated question, doesn't your app target under N api? , the last comment says it works from N onwards.

[SjaakSchilperoort]

Thanks a lot for this fix! It solves an important issue for us. We are running app builds with this fix since almost a year now. This requires us to build patched versions of React Native ourselves, which is quite a hassle. Is there any chance this PR will get merged?

Hello, I have an unrelated question, doesn't your app target under N api? , the last comment says it works from N onwards.

Our app supports Android 21+. This fix is for Android 24-28, which is 5% of our Android users.

[Stevemoretz]

Thanks a lot for this fix! It solves an important issue for us. We are running app builds with this fix since almost a year now. This requires us to build patched versions of React Native ourselves, which is quite a hassle. Is there any chance this PR will get merged?

Hello, I have an unrelated question, doesn't your app target under N api? , the last comment says it works from N onwards.

Our app supports Android 21+. This fix is for Android 24-28, which is 5% of our Android users.

Thank you so much for responding, what I'm exactly trying to know is what do you do for 21 to 23 then? Conditionally remove the border I guess?

[SjaakSchilperoort]

Thank you so much for responding, what I'm exactly trying to know is what do you do for 21 to 23 then? Conditionally remove the border I guess?

As far as I know, this bug doesn't occur on these versions

[shubhamguptadream11]

@fabOnReact Why this PR has not been merged? This issue still seems to be open but yet not resolved.