React Native Modalize Styling problem (webview/modal) - reactjs

Question

enter image description here
Hello friends, I would like to know how I solve this problem of stylization of Modal / Modalize.. well, it does not fully occupy the width of the screen, these side spacings are appearing. Does anyone have any notion of how to do this? I'm new to React Native, I'm learning from the expo
import * as React from 'react';
import { useState, useRef, useCallback } from 'react';
import {
Text, StyleSheet,
KeyboardAvoidingView, ScrollView, Image,
TextInput, TouchableOpacity, View, SafeAreaView,
Linking, Modal
} from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from 'react-native-vector-icons'
import { useNavigation } from '#react-navigation/native';
import { Modalize } from 'react-native-modalize';
import WebViewModalProvider, { WebViewModal } from
'react-native-webview-modal';
const Login = () => {
const [input, setInput] = useState('');
const [hidePass, setHidePass] = useState(true);
const [ischecked1, setIschecked1] = useState(true);
const [visible, setVisible] = useState(false);
const modalizeRef = useRef(null);
function onOpen() {
if (modalizeRef.current) modalizeRef.current.open();
}
return (
<KeyboardAvoidingView
style={styles.container}
>
<SafeAreaView>
<Modalize
ref={modalizeRef}
snapPoint={500}
//handlePosition="inside"
>
<View style={{
height: "100%",
justifyContent: 'center'
}}>
<WebViewModalProvider>
<View style={{height: 500 }}>
<SafeAreaView />
<WebViewModal
visible={true}
source={{ uri: "https://account.activedirectory.windowsazure.com/ChangePassword.aspx" }}
style={{ margin: 10 }}
/>
</View>
</WebViewModalProvider>
</View>
</Modalize>
<ScrollView>
<Image
style={styles.logo}
/>
<Text style={styles.helloText}>
Olá de novo !
</Text>
<Text style={styles.welcomeText}>
Bem-vindo(a) de volta,
sentimos sua falta!
</Text>
<TextInput
style={styles.inputArea}
placeholder="Digite o e-mail"
/>
<TextInput
style={styles.inputArea}
placeholder="Senha"
value={input}
onChangeText={(texto) => setInput(texto)}
secureTextEntry={hidePass}
/>
<TouchableOpacity style={styles.eye} onPress={() => setHidePass(!hidePass)}>
<Ionicons name={hidePass ? 'eye' : 'eye-off'}
color="#A0D800" size={25}
/>
</TouchableOpacity>
<View style={styles.checkBoxStyle}>
<CheckBox
left
size={18}
checkedColor='#A0D800'
value={ischecked1}
checked={ischecked1}
onPress={() => setIschecked1(!ischecked1)}
containerStyle={{
backgroundColor: "transparent",
borderColor: "transparent", marginRight: 0
}}
/>
<TouchableOpacity onPress={() => setIschecked1(true)}>
<Text style={styles.Connected}>
Manter-se conectado
</Text>
</TouchableOpacity>
<TouchableOpacity //onPress={() =>
// Linking.openURL('https://account.activedirectory.windowsazure.com/ChangePassword.aspx')}
onPress={onOpen}>
<Text style={styles.forgotPassword}>
Esqueci minha senha
</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.botao}
>
<Text style={styles.botaoText}>Entrar</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
logo: {
marginTop: 50,
marginBottom: 80,
width: 150,
height: 40,
},
inputArea: {
marginTop: 30,
padding: 15,
height: 60,
width: 370,
borderColor: '#808080',
borderWidth: 1,
backgroundColor: '#fff',
fontSize: 16,
fontWeight: 'bold',
borderRadius: 15
},
botao: {
width: 350,
height: 60,
backgroundColor: '#000000',
marginTop: 35,
marginLeft: 8,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
botaoText: {
fontSize: 15,
fontWeight: 'bold',
color: '#fff'
},
helloText: {
fontSize: 40,
fontWeight: 'bold',
marginTop: 15,
color: '#000000',
marginEnd: 120,
},
welcomeText: {
fontSize: 16,
marginTop: 10,
marginEnd: 35,
marginVertical: 10,
color: '#808080',
},
forgotPassword: {
textDecorationLine: 'underline',
fontWeight: 'bold',
marginTop: 15,
marginBottom: 15,
marginLeft: 30,
fontSize: 12
},
Connected: {
textDecorationLine: 'underline',
fontWeight: 'bold',
marginTop: 15,
fontSize: 12,
marginRight: 55,
marginLeft: -5
},
checkBoxStyle: {
marginTop: 15,
flexDirection: 'row',
marginStart: -10
},
eye: {
alignSelf: 'flex-end',
bottom: 42,
right: 40
}
})
export default Login;