React Native WebView Resets Form Data When Navigating Back

Question

I am using react-native-webview in my React Native app to display a questionnaire link. The WebView contains a form with inputs such as text fields and checkboxes that users can fill out. However, when users click on a "Data Privacy" link inside the WebView (which navigates to another page) and then navigate back to the form, all the form data (including checked checkboxes) is reset and empty.

I need the WebView to retain its navigation history and the filled form data (including checkbox states) when the user navigates back.

Code:

// imports

const Questionnaire = ({ currentVisit, email }) => {
  const [loading, setLoading] = React.useState(true)
  const [token, setToken] = React.useState('')
  const { t } = useTranslation()
  const [canGoBack, setCanGoBack] = useState(false)
  const webViewRef = useRef(null)
  const theme = useTheme()
  const styles = makeStyles(theme.colors)

  useEffect(() => {
    if (Platform.OS !== 'web' && !currentVisit?.questionnaireLink.includes('quest.app.com')) { // don not change orientation for quest.app.com
      changeScreenOrientationToLandscape()
    }
  }, [currentVisit?.questionnaireLink])

// some other code

  return (
    !isInternetReachable
      ? <InfoPage text={t('no_connection')} />
      : <WebView
          ref={webViewRef}
          style={{ marginTop: Constants.statusBarHeight }}
          source={{ uri: currentVisit?.questionnaireLink + (token === '' ? '' : `?token=${token}&email=${encodeURIComponent(email)}`) }}
          allowsBackForwardNavigationGestures // ios only
          setBuiltInZoomControls={false}
          onLoadProgress={event => {
            setCanGoBack(event.nativeEvent.canGoBack)
          }}
          startInLoadingState
          renderLoading={() => <ActivityIndicator style={styles.webViewLoadingIndicator} />}
        />
  )
}

/**
 * Locks Screen Orientation to landscape
 */
async function changeScreenOrientationToLandscape () {
  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT)
}

/**
 * Locks Screen Orientation to portrait
 */
async function changeScreenOrientationToPortrait () {
  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
}

export default Questionnaire

What I’ve Tried I’ve already tried the following WebView props to resolve the issue, but they didn’t work:

• cacheEnabled: Ensures the WebView uses the cache to store data. No effect in retaining the form data.
• saveFormDataDisabled={false}: Tried to allow form data to persist. No change.
• incognito={false}: Disabled incognito mode to allow session data and cookies to persist. The issue persists.
• sharedCookiesEnabled={true}: Enabled shared cookies across WebView instances. Did not solve the problem.