react-native: [0.61.*] Broken shadow on android

In 0.61.1 it works when applied on a white background

just set elevation to 0

set activeOpacity to 1 on parent TouchableOpacity will fix it. activeOpacity={1}

How is this still being ignored? Its obvious that even in 62+ of react native this is still an issue.

Has this bug been open 5 months already?

Same problem here, would be awesome it this problem gets a quick fix

I met with this issue about a week ago. I use the react-navigation and react-navigation-stack libraries and after upgrading to rn 0.61.0-rc.0 I noticed that when I switch from the root screen to any other, the views disappear, the shadows are drawn on top of the modal screens and the background is drawn on the outlined TextInput ( from the react-native-paper library). However, after making any screen root, everything in it is rendered correctly. After enumerating different style values, I found the reason for the view to break: if view has a borderRadius other than undefined, then when switching to another screen, the view with borderRadius is rendered under all other views, even if you specify zIndex. Until you reload, all views on all screens with borderRadius (including the root) will be broken. For this reason, it seems that the bug is associated with shadows, but everything is fine with them 😃

To reproduce this bug, I created a repository https://github.com/B27/React-Native-borderRadius-test based on rn-diff-purge (branch release/0.61.0-rc.3). The project contains two screens with the same content. After switching to the second screen, the modal window and the other views with borderRadius break until you set their borderRadius to undefined

The following screenshots are from api 28 (also tested on api 21, 25 with the same result)

Normal:

With bugs:

Bug suppression by setting borderRadius to undefined:

For some reason, I still get this in android I used version 0.61.2.

Very frustrating get these errors and know that the maintainer team just ignores it like 4 months.

Hello everyone, please read on renderToHardwareTextureAndroid to resolve this issue

I took the liberty to create a minimal example repository which demonstrates the issue without using third party libraries: https://github.com/forsen/shadowTest

This is how the repository is created:

1. react-native init
2. Upgrade from v0.60.5 to v0.61.0-rc.3 per rn-diff-purge instructions
3. Add a circular view with elevation

just set elevation to 0

How does that solve anything?

I’m still seeing this - here’s a really basic snack that reproduces this issue: https://snack.expo.dev/F3qj5M_AM. Run it on Android and see the weird octagons

Still not fixed.

Shadow Android:

Shadow on Ios using Elevation:3 (tried from 1 to event 20, still the same)

I can confirm v0.61.2 fixes the absolute + borderRadius undesired effect on zIndex.

@zwenza I forgot that for TouchableOpacity there is a simpler way - apply elevation to TouchableOpacity itself. Instead of <TouchableOpacity> <View style={stylesWithElevation} /> </TouchableOpacity> use <TouchableOpacity style={elevationStyle}> <View style={viewStyle} /> </TouchableOpacity>

I have same issues after update 0.61.5

initially my project is in RN 0.57.0, due to 64-bit i have to update RN version so i have made it 0.60.5

So i getting same issues as above, i have read above comment @samiede to resolved in 0.61.1

Now i have updated my whole code RN in 0.61.5 , but issues is till there

RN in 0.57.0

RN in 0.61.5

"react": "16.9.0", "react-native": "0.61.5", "@react-native-community/datetimepicker": "^2.2.1", "@react-native-community/masked-view": "^0.1.6", "aws-sdk": "^2.610.0", "base-64": "^0.1.0", "locutus": "^2.0.11", "moment": "^2.24.0",

<KeyboardAvoidingView keyboardVerticalOffset={Platform.select({ ios: 0, android: 50 })} behavior={(Platform.OS === 'ios') ? "padding" : null} enabled style={{ flex: 1, backgroundColor: "#fff" }}> <SimpleActionBarWithTitle title={" " + Strings.Title_Scan_Rego} handleBackButtonClick={this.handleBackButtonClick} /> <Loader loading={(this.state.isProcessing || this.props.scanRegoJobDetailsData.isLoading) && (!this.props.unAuthorizedReducer.isUnAuthorised)} /> <Image style={{ height: "60%" }} source={{ uri: this.props.navigation.state.params.uri }} /> <View style={styles.textInputMainView}> <TextInput style={[styles.textInputStyle, { textAlign: "center", paddingLeft: 3 }]} placeholder={Strings.Rego} keyboardType={Platform.OS === 'android' ? 'email-address' : 'ascii-capable'} value={this.state.rego} placeholderTextColor="#9e9e9e" onChangeText={(value) => { this.setState({ rego: value }) }} InputProps={{ disableUnderline: true }} underlineColorAndroid="transparent" /> </View> <View style={{ flex: 1, flexDirection: "row" }}> <TouchableOpacity style={[styles.saveButtonStyle, { marginLeft: "15%", backgroundColor: "#c3c3c3", }]} activeOpacity={0.5} onPress={() => this.onRetakeImageScreen()}> <Text style={{ color: "#fff", textAlign: "center", fontSize: 20 }}> {Strings.Label_Retry} </Text> </TouchableOpacity> <TouchableOpacity style={[styles.saveButtonStyle, { marginRight: "15%" }]} activeOpacity={0.5} onPress={() => this.onJobDetailsScreen()}> <Text style={{ color: "#fff", textAlign: "center", fontSize: 20 }}> {Strings.Next} </Text> </TouchableOpacity> </View> </KeyboardAvoidingView>

`textInputStyle: { paddingHorizontal: 16, fontSize: 19, minWidth: 120, color: colors.black, fontWeight: ‘bold’,

},
textInputMainView: {
    justifyContent: "center",
    backgroundColor: "#fff",
    alignItems: 'center',
    borderWidth: 1,
    borderColor: "#fff",
    height: 60,
    borderRadius: 100,
    marginTop: 20,
    marginBottom: 5,
    marginLeft: '15%',
    marginRight: '15%',
    ...Platform.select({
        ios: {
            shadowColor: 'rgba(0,0,0, 0.4)',
            shadowOffset: { height: 3, width: 0 },
            shadowOpacity: 0.7,
            shadowRadius: 5
        },
        android: {
            elevation: 4,
        }
    }),
},
saveButtonStyle: {
    height: 48,
    flex: 1,
    marginHorizontal: 10,
    marginTop: 20,
    marginBottom: 10,
    backgroundColor: 'rgba(21, 221, 241, 1)',
    borderRadius: 100,
    justifyContent: "center",
    ...Platform.select({
        ios: {
            shadowColor: 'rgba(0,0,0, 0.4)',
            shadowOffset: { height: 3, width: 0 },
            shadowOpacity: 0.7,
            shadowRadius: 5
        },
        android: {
            elevation: 4,
        }
    }),
},`

If any one have any solution without change in code, Please let me know, bcz my project is so much large

@ScreamZ Yes, I agree with you, but I believe it is a temporary solution until guys fix this issue.

Unluckily this issue was opened because the elevation did not work with https://github.com/santomegonzalo/react-native-floating-action

Everybody with similar issue may have joined this thread instead of reporting a new issue

This thread should be closed and you should open a new thread with a minimal reproducible example build with react-native only. Most of the messages in this thread are not relevant for react-native, as they descrive an issue of https://github.com/santomegonzalo/react-native-floating-action

open an issue in https://github.com/santomegonzalo/react-native-floating-action

Thanks Best Regards

I’m also facing this issue on "react-native": "0.62.2"

• my Touchable/View is not absolute!
• it is fixed using add backgroundColor to this Touchable/View

Was this the issue mentioned in the 0.61.2 release notes: https://github.com/facebook/react-native/releases/tag/v0.61.2 ? If so - shouldn’t it be closed?

Forcing borderRadius attribute to undefined fixes the glitch. Libraries like react-native-paper or react-native-modal use this attribute with predetermined values on their elements, that is why the bug is manifesting there.

Yes, indeed the problem is about:

• border-radius
• elevation
• or position: absolute

One of those (or all of them) is having issue with android since 0.61.x

EDIT: @B27 Elements with borderRadius as if losing their zIndex

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

So the thing here is that the shadows on a TouchableOpacity child is not displayed properly when it is pressed. I can think of sharing two walkarounds for this:

• To Match parent width and height: this is not always possible, eg:

<TouchableOpacity style={{width: 100, height: 100, borderRadius: 50}}>
     <View style={{width: 100, height: 100, borderRadius: 50}}>
            {content}
     </View>
</TouchableOpacity>

• To use state helpers to turn off the shadow, not really recommended since it is unelegant. eg:

    const [showhadow, setShowShadow] = React.useState(true)  

    const hideShadow = () => setShowShadow(false)
    const doShowShadow = () => setTimeout(() => setShowShadow(true), 100)

    return (
        <TouchableOpacity onPressIn={hideShadow} onPressOut={doShowShadow} onPress={doSomething} >
            <View style={showhadow ? SHADOW_STYLE : null} >
                <Text text="Text inside the view" style={ICON_TEXT}/>
            </View>
            <Text text="Text outside the view" style={ICON_TEXT}/>
        </TouchableOpacity>
    )

Note: in the second example, if the View is replaced for another TouchableOpacity that it can also call “doSomething”, the shadow will automatically be recalculated correctly displaying a neat shadow when pressing but if the user presses on the Text outside area (or anywhere where the child touchable is not covering the parent), shadow will continue to show incorrectly (since the parent TouchableOpacity is doing the calculation of the shadow for the inner child and fails).

Also present on 0.64.2. This is easily reproducible with a simple view with elevation + touchable opacity on top.

Have the same issue devices: samsung s9+, s10+ android version: 10 react-native: 0.61.5

on android 8.1.0 looks good

https://github.com/react-native-community/releases/issues/146#issuecomment-536548800

I could reproduce the exact same issue just using a <TouchableOpacity/> which contains a circular <View />. The View has a shadow on it too.

When you press the element it becomes transparent and shows the exact same issue. Can reproduce that already with RN 0.60.5 on Android, iOS looks fine.

Is it related to https://github.com/styled-components/css-to-react-native/issues/117 ? I though it was specific for styled components but I’m experiencing strange issues with background and positions relative since 0.61-rcX