Making signaturePad component take up full screen - reactjs

Question

Within one of my components a user can click a button that pulls up a signaturePad they can sign on. This is working, however, I'd like the signaturePad to take up the full screen, whereas now it appears between the footer and header. How can I accomplish this? I played around with using { flex: 1 } on the View of the SignaturePad, but this had no visible effect.
Here is the relevant code from the parent component. If a certain state is true, the signaturePad displays:
{this.state.signaturePanelIsVisible && (
<SignaturePanel
session={this.props?.session}
signaturePanelIsVisible={this.state.signaturePanelIsVisible}
/>
)}
And the signaturePad component code looks like this:
const SignaturePanel = (props) => {
const dispatch = useDispatch();
return (
<SignaturePanel
actionStyle={{
...styles.texts.mediumText,
color: styles.colors.primary,
textDecorationLine: 'underline',
}}
onCancel={async () => {
props.hideSignaturePanel();
}}
onSave={async (base64) => {
const base64Result = base64.base64DataUrl.substr(base64.base64DataUrl.indexOf(',') + 1);
dispatch(
await updateSignature({
...props.signature,
guid: props.session.guid,
value: base64Result,
lastUpdate: Date.serverTime(),
})
);
}}
/>
);
};
export default SignaturePanel;
And the styling applied looks like this:
container: {
width: '100%',
height: '100%',
zIndex: 98,
position: 'absolute',
backgroundColor: '#fff',
},

Answer 1

You'll need to add position: 'absolute' to the style of your modal. Setting the height and width to 100% as well sometimes works, depending on how your app is set up. This will either cover the screen with the component, or make the component appear under the header and overflow the bottom of the screen. To fix the latter issue, add top: -<height of header>. This way the component will move up and cover the header.
<Modal style={styles.modal}>
<View style={styles.signaturePad}>
</View>
</Modal>
modal: {
position: 'absolute',
height: '100%',
width: '100%',
top: -n, //(where n = height of your header)
}
signaturePad: {
height: '100%',
width: '100%',
}
Depending on how your project is set up, you may not need the top value. These are general settings that you should usually put on a modal component. It's considered best practice to have a modal cover the whole screen, then add the component you want to display as a subcomponent.