I am working on a React-native project and stumbled upon issues when setting width and height using percentage values to a View. I have tried to set width: 100% and height: 100% but this does not work.

function CalendarPage() {
  return (
  <MainWrapper>
    <SafeAreaView style={styles.container}>
       <ScrollView>
        <StyleContentWrapper>
          <Paragraph> Hello World! </Paragraph>
        </StyleContentWrapper>
      </ScrollView>
    </SafeAreaView>
  </MainWrapper>
  );
}

const MainWrapper = styled.View`
  flex: 1; 
  justify-content: center; 
  align-items: center; 
  background-color: lightgray; 
  color: white;
`
const StyleContentWrapper = styled.View`
  height: 100%;     // this does not work
  width: 100%;      // this does not work
  background-color: red;
  padding-top: 40px;
  padding-horizontal: 20px;

`

A quick explaination for the components: MainWrapper covers the entire screen and is the base layer. The reason why it nests SafeAreaView is because this allows me to set a background color on the "safe area".

I have also nested another view called StyleContentWrapperinside a ScrollView, because I want everything inside to be scrollable.

This is the results

StyledContentWrapper or The red box does not cover the entire screen, despite having the styles of width: 100% and height: 100%. Why is this? Setting fixed width and height does work, but this is not the approach I want, because different devices has different widths and heights, and I want it to work for multiple screens with different widths and heights, hence the use of perecentage.

How can I solve this?