[Android]: box shadow are not correctly rendered inside screens

[freeboub]

Description

box shadow are not correctly rendered inside screens.
overflow is never visible, it makes the shadow to be truncated.
Reproduced with fabric and only on android (works fine on ios).

Please see screenshot, the first circle is out of a screen, the second one is inside a screen

Steps to reproduce

put this sample shadowed component inside a screen: (see snack sample)

  const avatarWrapper = {
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 10,
        blurRadius: '20',
        spreadDistance: '0',
        color: `rgba(0, 0, 0, 0.2)`,
      },
    ],
  } as ViewStyle;

  const avatar = {
    width: WIDTH,
    height: WIDTH,
    borderRadius: WIDTH / 2,
  } as ViewStyle;

  return (<View style={{top}}>
            <View style={[avatar, avatarWrapper]}/>
          </View>);

Snack or a link to a repository

https://github.com/freeboub/bug-react-native-screens-box-shadow

Screens version

4.6.0

React Native version

0.77.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[kkafar]

@freeboub You just need to wrap the content inside a view.

      <ScreenStack style={StyleSheet.absoluteFill}>
        <Screen
          key="parent"
          activityState={2}
          style={StyleSheet.absoluteFill}>
          <View collapsable={false} style={{ flex: 1 }}>
            <ShadowContent top={400} />
          </View>
        </Screen>
      </ScreenStack>

[kkafar]

I do not know why it is the case exactly, but it seems that if you want the shadow to be drawn completely (not truncated) there must be a react view group in the background that is wide / high enough for the shadow to be drawn. If the outer view has the same dimensions as the inner one - the shadow will be truncated.

I do not know why the Screen cant not be the background, my suspicion is that the Screen is not a ReactViewGroup and some custom drawing logic exists there. I won't investigate it unless you / someone builds a case that wrapping in a view is not good enough.

Especially, that with react-navigation doing following:

const Stack = createNativeStackNavigator();

function App2() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={() => <ShadowContent top={0} />} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App2;

will work just ok

[kkafar]

Pasting the code I used to play around

Test2669.tsx

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  ViewStyle,
} from 'react-native';

import { Screen, ScreenContentWrapper, ScreenStack } from 'react-native-screens';

const WIDTH = 150;

const ShadowContent = ({ top }: { top: number }) => {
  const avatarWrapper = {
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 10,
        blurRadius: '20',
        spreadDistance: '0',
        color: 'rgba(0, 0, 0, 0.2)',
      },
    ],
  } as ViewStyle;

  const avatar = {
    width: WIDTH,
    height: WIDTH,
    borderRadius: WIDTH / 2,
  } as ViewStyle;

  return (<View style={{ top, width: WIDTH, height: WIDTH }}>
    <View style={[avatar, avatarWrapper]} />
  </View>);
};

function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScreenStack style={StyleSheet.absoluteFill}>
        <Screen
          key="parent"
          activityState={2}
          style={StyleSheet.absoluteFill}>
            <ShadowContent top={0} />  {/* Wrapping this in a view wide / high enough for the shadow to be drawn fixes the issue */}
        </Screen>
      </ScreenStack>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  safeArea: { backgroundColor: 'white', height: '100%' },
});

const Stack = createNativeStackNavigator();

function App2() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={() => <ShadowContent top={0} />} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

[kkafar]

Will reopen once someone convinces me this should be fixed 😄

[freeboub]

Thank you for the feedback. I confirm the workaround works fine.
I wrap my content body with a non collapsable view and it works now.
I am not sure it should be fixed, but it is a very disturbing behavior. (it came with react 0.77).
Thank you for the support !

[kkafar]

If it came with 0.77 it might be related to recent changes in drawable & background style applicator (I provide links in this PR). I might look to it at some point but won't prioritise it.

If you can reproduce the issue w/o react-native-screens, e.g. by confirming that existence of the background view (wide & high enough) for the shadow to be drawn correctly was not necessary on older versions of react native, then it might be worth a shot to report the issue on react-native repo.