How can I style a wrapper View without targeting the children? - react-native

Question

Sorry I know this probably is a stupid question but I'm new to React Native and I can't seem to find a solution to this looking it up. Thank you in advance for your help.
I'm trying to give the HeadingWrapper a box-shadow but it seems to give the shadow to the inner contents. Here is my code that produces this result:
import React, { Component } from 'react';
import styled from 'styled-components';
import H1 from "../common/headings";
import LeftArrow from "../assets/LeftArrow.png";
const MainWrapper = styled.View`
box-shadow: 5px 5px 5px #000000;
`;
const HeadingWrapper = styled.View`
padding: 60px 10px 0 10px;
height: 60px;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
`;
const ScrollArea = styled.ScrollView`
`;
const Img = styled.Image`
`;
class LandingPage extends Component {
render() {
return (
<MainWrapper style={styles.mainWrapper}>
<HeadingWrapper>
<Img style={styles.leftArrow} source={LeftArrow}/>
<H1>Chats</H1>
</HeadingWrapper>
<ScrollArea>
</ScrollArea>
</MainWrapper>
);
}
}
headings.js:
import styled from 'styled-components';
import React from "react";
const InnerH1 = styled.Text`
font-size: 34px;
font-weight: bold;
`;
const H1Container = styled.View`
flex: 1;
`;
const H1 = (props) => {
return (
<H1Container>
<InnerH1>{props.children}</InnerH1>
</H1Container>
)
};
export default H1;

Answer 1

Currently, the background color of HeadingWrapper is transparent as no background color is currently specified.
To create the 'box-shadow', all you need to do is give HeadingWrapper a background color of which is the same as your background.
Per the screenshot provided, the background color is white. Thus, you can use white as the background color for HeadingWrapper.
For inline style, you can use the below code:
<HeadingWrapper style={{ backgroundColor: 'white' }}>
<Img style={styles.leftArrow} source={LeftArrow}/>
<H1>Chats</H1>
</HeadingWrapper>