I'm with only one error on this login screen. When I click I forgotmy password (Forgot password) I want a modal to appear with the respective site inside it. I made this code and it was working perfectly, however now is appearing this error message (null is not an object) Please help me :( I believe that the problem is in WebViewModal, because when I remove it, the modal is shown perfectly
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 navigation = useNavigation();
const modalizeRef = useRef(null);
function onOpen() {
modalizeRef.current?.open();
}
return (
<KeyboardAvoidingView
style={styles.container}
>
<SafeAreaView>
<Modalize
ref={modalizeRef}
snapPoint={500}
//handlePosition="inside"
>
<View style={{
flex: 1, height: 500,
flexDirection: 'row', justifyContent: 'center'
}}>
<WebViewModalProvider>
<View style={{ margin: 30, height: 500 }}>
<SafeAreaView />
<WebViewModal
visible={true}
source={{ uri: "https://account.activedirectory.windowsazure.com/ChangePassword.aspx" }}
style={{ margin: 10 }}
/>
</View>
</WebViewModalProvider>
</View>
</Modalize>
<ScrollView style={{ flex: 1 }}>
<Image
source={require('../../assets/logo.png')}
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}
onPress={() => navigation.navigate("TabNavigator")}
>
<Text style={styles.botaoText}>Entrar</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
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,
marginTop: 8
},
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;
