overflow:"hidden" won't work as expected for child component (React Native)

I have a parent component which I would like to use for every screen of my app, as follows:

const ScreenContainer = ({ children }) => {  const style = StyleSheet.create({    container: {      padding: 20,      overflow:"hidden"    }  });  return <View style={style.container}>{children}</View>;};

It does add padding however padding still seems to overflow my child components even though I set it as hidden.

You can see top and bottom of the screen is being cut off for my ScrollView below: