<MotiPressable> box shadow not working on Android

[agrawal-rohit]

Issue

Shadows do not appear when using the <MotiPressable /> component on Android (iOS works fine). However, when I use the original Pressable component from react-native, shows work fine.

Configuration

• Expo: 44.0.4
• Moti: 0.17.1

Screenshots

MotiPressable

IOS

Android

React Native Pressable

IOS

Android

Code

<MotiPressable
  style={{
    padding: 20,
    overflow: "visible",
    backgroundColor: "white",
    shadowColor: "#1A2138",
    shadowOffset: {
      width: 0,
      height: 28,
    },
    shadowOpacity: 0.16,
    shadowRadius: 28,
    elevation: 28,
  }}
>
  <Text>Hello</Text>
</MotiPressable>

[nandorojo]

try containerStyle?

[agrawal-rohit]

Tried using containerStyle, didn't work.

<MotiPressable
  containerStyle={{
    backgroundColor: "white",
    shadowColor: "#1A2138",
    shadowOffset: {
      width: 0,
      height: 28,
    },
    shadowOpacity: 0.16,
    shadowRadius: 28,
    elevation: 28,
    padding: 20,
  }}
>
  <Text>Hello</Text>
</MotiPressable>

[nandorojo]

is it a reanimated issue? did you wrap your app in the root gesture handler view?

[agrawal-rohit]

Not sure about it being a reanimated issue, though I'm wrapping all the contents in App using the root gesture handler view like this:

<GestureHandlerRootView style={{ flex: 1 }}>
    {/*  Rest of the components */}
</GestureHandlerRootView>

[nandorojo]

not sure, maybe try wrapping moti pressable with a normal view and put the shadow there. or make sure it works on an Animated.View too

[agrawal-rohit]

Here's what I've tried till now:

1. Shadow on <View /> (Working)

<View
  style={{
    backgroundColor: "white",
    shadowColor: "#1A2138",
    shadowOffset: {
      width: 0,
      height: 28,
    },
    shadowOpacity: 0.16,
    shadowRadius: 28,
    elevation: 28,
  }}
>
  <MotiPressable
    containerStyle={{
      backgroundColor: "white",
      padding: 20,
    }}
  >
    <Text>Hello</Text>
  </MotiPressable>
</View>

2. Shadow on <Animated.View /> (Working)

<Animated.View
  style={{
    backgroundColor: "white",
    shadowColor: "#1A2138",
    shadowOffset: {
      width: 0,
      height: 28,
    },
    shadowOpacity: 0.16,
    shadowRadius: 28,
    elevation: 28,
  }}
>
  <MotiPressable
    containerStyle={{
      backgroundColor: "white",
      padding: 20,
    }}
  >
    <Text>Hello</Text>
  </MotiPressable>
</Animated.View>

3. Shadow on <MotiView /> (Working)

<MotiView
  style={{
    backgroundColor: "white",
    shadowColor: "#1A2138",
    shadowOffset: {
      width: 0,
      height: 28,
    },
    shadowOpacity: 0.16,
    shadowRadius: 28,
    elevation: 28,
  }}
>
  <MotiPressable
    containerStyle={{
      backgroundColor: "white",
      padding: 20,
    }}
  >
    <Text>Hello</Text>
  </MotiPressable>
</MotiView>

[agrawal-rohit]

I think I've got a fix for this, it seems to be happening because of the use of containerStyle on the AnimatedTouchable in the <MotiPressable /> component

Updated Code

const AnimatedTouchable = Animated.createAnimatedComponent(
  TouchableWithoutFeedback
);

const App = () => {
  return (
   <GestureHandlerRootView style={{ flex: 1 }}>
        <AnimatedTouchable
          style={{
            padding: 20,
            overflow: "visible",
            backgroundColor: "white",
            shadowColor: "#1A2138",
            shadowOffset: {
              width: 0,
              height: 28,
            },
            shadowOpacity: 0.16,
            shadowRadius: 28,
            elevation: 28,
          }}
        >
          <MotiView>
            <Text>Hello</Text>
          </MotiView>
        </AnimatedTouchable>
   </GestureHandlerRootView>
  );
};

Output

IOS

Android

Further Comments

I'm skeptical about having the current implementation ofMotiPressable from a styling perspective. Wouldn't it be easier if we wrote it as:

const MotiTouchable = motify(TouchableWithoutFeedback)();

const MotiPressable = (props) => {
   // ... methods and state management

  return (
      <MotiTouchable {...props}>
          {props.children}
     </MotiTouchable>
  )
}

Opened a PR for the same :)