React Native: Modal WebView for Password Reset in Login Screen

Frontend
1

Hey everyone, I’m stuck with a weird issue in my React Native login screen. I’ve got a ‘Forgot Password’ button that should open a modal with a website inside. It was working fine before, but now I’m getting a ‘null is not an object’ error. I think the problem might be in the WebViewModal component.

Here’s a simplified version of what I’m trying to do:

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Modalize } from 'react-native-modalize';
import WebViewModalProvider, { WebViewModal } from 'react-native-webview-modal';

const PasswordResetScreen = () => {
  const [isModalVisible, setModalVisible] = useState(false);
  const modalRef = useRef(null);

  const openModal = () => {
    modalRef.current?.open();
    setModalVisible(true);
  };

  return (
    <View>
      <TouchableOpacity onPress={openModal}>
        <Text>Reset Password</Text>
      </TouchableOpacity>

      <Modalize ref={modalRef}>
        <WebViewModalProvider>
          <WebViewModal
            visible={isModalVisible}
            source={{ uri: 'https://example.com/reset-password' }}
          />
        </WebViewModalProvider>
      </Modalize>
    </View>
  );
};

export default PasswordResetScreen;

The modal opens fine when I remove the WebViewModal part, but with it, I get the error. Any ideas what might be causing this? Thanks!

2

hey there! i’ve run into similar issues before. seems like the WebViewModal might not be getting the right props. have you tried wrapping the whole component in WebViewModalProvider instead of just the modal content? like this:

<WebViewModalProvider>
  <View>
    {/* rest of your component */}
  </View>
</WebViewModalProvider>

that might solve it. good luck!

3

hey echo_vibrant! have u considered using a regular WebView instead of WebViewModal? might be simpler. also, whats the exact error message ur getting? could u share more details? sometimes its just a tiny thing thats causing the issue. keep us posted on what u find!

4

I’ve encountered similar challenges with WebView modals in React Native. One potential solution is to manage the WebView’s visibility separately from the modal. Try initializing the WebView with a key prop that changes when you want to reload it. Also, ensure you’re using the latest version of ‘react-native-webview-modal’, as older versions had compatibility issues with certain React Native builds. If the problem persists, consider implementing a custom modal using react-native-webview directly. This approach offers more control over the WebView’s lifecycle and can help circumvent unexpected behavior in third-party modal libraries.