【React Native】WebViewが勝手にURLをエンコードして困ったら

はじめに

WebViewコンポーネントに渡すURLが予約文字（「&」や「%」など）を含む場合、
iOSのWebViewコンポーネントは自動でURLエンコードした文字に置き換える仕様になっているようです。

ReactNativeはもちろんiOSだけでなくAndroidでも使用するので、OSによって渡されるURLが異なってしまってはまずい。対処する必要があります。

解決策

iOSの場合は、url文字列に対してunescape()をダブルで回します。

// WebViewに渡したいURL
// このままだと、'%'が'%25'に変換されてしまう
const url = 'https://google.com?=%justasample/';
// iOSの場合はダブルでデコードする
const okUrl = Platform.OS === 'ios'
  ? unescape(unescape(url))
  : url;

// --------

const Component = () => (
  <WebView source={okUrl} />
);

まとめ

URLを渡す前にひと手間かけることで、解決しました。