React Native Modalize Styling problem (webview/modal)

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;

Answer 1

I had the same issue, but on parent component that had margin: 0 20px styling on it. Check this GitHub issue protocol: https://github.com/react-native-modal/react-native-modal/issues/528 and your parent component stylings.