Weird shadow effect on react native

Question

The print-screens are from how it looks in my iPhone

Im trying to add shadowbox effects to my react native app. I managed to add it to buttons and inputs just fine, they look like this:

But for some reason, every time I try to add it to a view, this happens:

Shaddow Effect:

export const globalSheet = StyleSheet.create({
  shadowBox: {
    shadowColor: '#000',
    shadowOffset: { width: 4, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 0,
    elevation: 2,  // for Android
    borderWidth: 2,
    borderColor: 'black'
  }
});

Button Component:

export const GenericButtonContainer = styled.Pressable<
  GenericButtonProps
>`
  background-color: ${p => {
      const mainColor = p.pressed
        ? globalStyles.purple
        : globalStyles.button.backgroundColor

      return p.unavailabe
        ? '#75757B'
        : mainColor
    }
  };
  
  border-radius: ${globalStyles.borderRadius}px;
  align-items: center;
  justify-content: center;

  padding-left: ${globalStyles.button.paddingHorizontal}px;
  padding-right: ${globalStyles.button.paddingHorizontal}px;
  padding-top: ${globalStyles.button.paddingVertical}px;
  padding-bottom: ${globalStyles.button.paddingVertical}px;

  opacity: ${p => p.unavailabe ? 0.4 : 1};

  border: 2px solid black;
`

export default function GenericButton({ children, unavailabe, style, ...pressableProps }: Props) {
  const [pressed, setPressed] = React.useState(false);

  return (
    <GenericButtonContainer
      {...pressableProps}
      style={({ pressed }: PressableStateCallbackType) => [
        globalSheet.shadowBox,
        ...[(typeof style === 'function' ? style({ pressed }) : style)],
      ]}
      disabled={unavailabe}
      unavailabe={unavailabe}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      pressed={pressed}
    >
      {children}
    </GenericButtonContainer>
  )
}

Bugged component:

import { globalStyles } from "src/components/globals/styles";
import { styled } from "styled-components/native";

export const Container = styled.View`
  flex-grow: 1;
`

export const ContentContainer = styled.View`
  flex-direction: row;
  align-items: center;
  padding: 5px;
  border: 2px solid black;
  border-radius: ${globalStyles.borderRadius}px;
`

export default function ProfileMatches() {
  return (
    <Container>
      <MyText H4>Partidas</MyText>
      <ContentContainer style={globalSheet.shadowBox}>
        <Controller />
        <MyText>0</MyText>
      </ContentContainer>
    </Container>
  )
}

Here, Controller is just the imported svg and MyText is the following:

export default function MyText({
  H1: useH1,
  H2: useH2,
  H3: useH3,
  H4: useH4,
  HP: useHP,
  truncate: shouldTruncate,
  size,
  children,
  ...props
}: Props) {
  const truncateSize = size ? size : 13

  const data = truncate
    ? truncate(children as string, truncateSize)
    : children

  if (useH1) return <H1 {...props}>{data}</H1>

  if (useH2) return <H2 {...props}>{data}</H2>

  if (useH3) return <H3 {...props}>{data}</H3>

  if (useH4) return <H4 {...props}>{data}</H4>

  if (useHP) return <HP {...props}>{data}</HP>

  return <Text {...props}>{data}</Text>
}

Where each HX is just a styled text component. It didnt work when MyText was just a text component without styles as well.

Answer 1

As commented above, all that was missing was a background color.