fix(ios): Set User-Agent in the headers

[gronxb]

hello. I wrote a PR (#3106) about History API not working properly when setting userAgent on Android,

The userAgent value, which is set with the @ReactProp annotation, is lazy load.

So I'm predicting that the userAgent is set during loading, and on reload, the history is broken.

https://developer.android.com/reference/android/webkit/WebSettings#setUserAgentString(java.lang.String)

I found the fact that it reloads in the above link.

Therefore, we decided that it would be very difficult to set the userAgent before loading the webpage because @ReactProp sets the userAgent and source at the same time.

And I found that when I set user-agent in headers in the source prop, it also sets userAgent.

react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt

Lines 412 to 437 in 10105ba

	if (source.hasKey("headers")) {
	if (newArch) {
	val headerArray = source.getArray("headers");
	for (header in headerArray!!.toArrayList()) {
	val headerCasted = header as HashMap<String, String>
	val name = headerCasted.get("name") ?: ""
	val value = headerCasted.get("value") ?: ""
	if ("user-agent" == name.lowercase(Locale.ENGLISH)) {
	view.settings.userAgentString = value
	} else {
	headerMap[name] = value
	}
	}
	} else {
	val headers = source.getMap("headers")
	val iter = headers!!.keySetIterator()
	while (iter.hasNextKey()) {
	val key = iter.nextKey()
	if ("user-agent" == key.lowercase(Locale.ENGLISH)) {
	view.settings.userAgentString = headers.getString(key)
	} else {
	headerMap[key] = headers.getString(key)
	}
	}
	}
	}

In this case, userAgent works fine and history works fine because we are setting userAgent before loading.

So we need to make it work the same on IOS, to ensure hybridization.

I think it would be a good idea to deprecate the existing userAgent prop and recommend setting the userAgent in the headers.

Example Code

import React, { Component } from 'react';
import { View } from 'react-native';

import WebView from 'react-native-webview';

interface Props {}
interface State {}

export default class NativeWebpage extends Component<Props, State> {
  state = {};

  render() {
    return (
      <View style={{ height: 400 }}>
        <WebView
          source={{
            uri: 'https://infinite.red',
            headers: {
              // This Field !
              'User-Agent': 'Test Header',
            },
          }}
          style={{ width: '100%', height: '100%' }}
          injectedJavaScript={`
              const div = document.createElement('div');
              div.innerHTML = navigator.userAgent;

              document.body.appendChild(div);
              true;

            `}
         />
      </View>
    );
  }
}

[github-actions]

Hello 👋, this PR has been opened for more than 2 months with no activity on it. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically

[gronxb]

@Titozzz @jamonholmgren

Issues

I still believe this feature is necessary. We must acknowledge how messy the code is to support user-agent smoothly on both Android and iOS!

Current Implementation (as-is):

<WebView
  source={{
    uri: 'https://infinite.red',
    ...(Platform.OS === 'android' && {
      headers: {
        'User-Agent': 'my-custom-user-agent',
      },
    })
  }}
  style={{ width: '100%', height: '100%' }}
  userAgent={Platform.OS === 'ios' ? 'my-custom-user-agent' : undefined}
  injectedJavaScript={`
      const div = document.createElement('div');
      div.innerHTML = navigator.userAgent;
      document.body.appendChild(div);
      true;
  `}
/>

Proposed Implementation (to-be):

<WebView
  source={{
    uri: 'https://infinite.red',
    headers: {
      'User-Agent': 'my-custom-user-agent',
    }
  }}
  style={{ width: '100%', height: '100%' }}
  injectedJavaScript={`
      const div = document.createElement('div');
      div.innerHTML = navigator.userAgent;
      document.body.appendChild(div);
      true;
  `}
/>

[github-actions]

Hello 👋, this PR has been opened for more than 2 months with no activity on it. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically

[gronxb]

@Titozzz @jamonholmgren please any comment🥹

[github-actions]

Hello 👋, this PR has been opened for more than 2 months with no activity on it. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically