Getting the "URLSearchParams.set is not implemented" error when trying to fetch data from my sanity backend using React Native

Question

I am getting an error in my to react native project when pulling data from my sanity backend this is the error URLSearchParams.set is not implemented

This is where I am fetching he data

import {View, Text,SafeAreaView,Image,TextInput,ScrollView} from 'react-native'
import React, {useEffect, useLayoutEffect, useState} from 'react'
import {useNavigation} from "@react-navigation/native";
import {ChevronDownIcon, UserIcon,AdjustmentsVerticalIcon,MagnifyingGlassIcon} from "react-native-heroicons/outline";
import Categories from "../components/Categories";
import FeaturedRow from "../components/FeaturedRow";
import client from "../sanity";

const HomeScreen = () => {
    const navigation = useNavigation();
    const [featuredItems, setFeaturedItems] = useState([]);

    useLayoutEffect(()=>{
        navigation.setOptions({
            headerShown: false,
        });
    },[]);

    useEffect(()=>{
        const query = `*[_type == "featured"]`;

        client
            .fetch(query)
            .then((data)=>{
                setFeaturedItems(data)
            })
            .catch((error)=>{
                console.log('Error:',error);
            });
    }, []);

This is my Sanity.js code as well

import sanityClient, {createClient} from '@sanity/client'
import imageURLBuilder from '@sanity/image-url'
// import urlForImage from "@sanity/image-url/lib/types/urlForImage";

const client = sanityClient({
    projectId: "9hrg98uk",
    dataset: "production",
    useCdn: true,
    apiVersion: "2021-10-21",
});

const builder = imageURLBuilder(client);
export const urlFor = (source) => builder.image(source);

export default client;

This error only occurs when rendering on ios as i don't see the error on the web

I have tried to fetch my data differently, that didn't work. I have tried importing URLsearch into my project even though i have not used URLSearch anywhere but thatdid not work also.

Is the error message showing on the console? If possible, could you edit your post and copy and paste it? — zhyp, Mar 16 '23 at 14:48
Hi I’m getting the same error , did you or anyone have a solution — Naveen DINUSHKA, Mar 18 '23 at 03:36

score 13 · Answer 1 · edited Mar 24 '23 at 11:03

13

The thing is there is a URL class in React Native but not all feature are implemented which you might encounter a is not implemented error such as URLSearchParams.set is not implemented, URL.hostname is not implemented, etc.

Instead you can use

npm install react-native-url-polyfill --save-dev

try importing this in you index.js file

import 'react-native-url-polyfill/auto';

It will create a polyfill for URLSearchParams

Please refer to this doc

edited Mar 24 '23 at 11:03

Mike Szyndel

10,461
10
47
63

answered Mar 20 '23 at 08:16

Bhanu prakash Mallepoola

131
2

1

This solves the question, tbh this is a complete answer – Ishara Dilshan May 03 '23 at 17:14
why `--save-dev`? A build also needs this polyfill to function, right? – hayata_suenaga May 07 '23 at 22:50
This solved it for me, though I didn't have an index.js file in my Expo project so importing there wasn't enough. I had to use option 2 in the setup docs. In App.js: `import { setupURLPolyfill } from "react-native-url-polyfill"` Then below the imports but above your app component, call the function: `setupURLPolyfill()` See docs: https://www.npmjs.com/package/react-native-url-polyfill – James Hubert Jun 03 '23 at 16:16
this should be the accepted answer – Hugobop Jul 20 '23 at 22:11

score 1 · Answer 2 · edited Apr 24 '23 at 19:13

The thing is there is a URL class in React Native but not all feature are implemented which you might encounter a is not implemented error such as URLSearchParams.set is not implemented, URL.hostname is not implemented, etc.

Instead you can use

npm install react-native-url-polyfill --save-dev

try importing this in you index.js file

import 'react-native-url-polyfill/auto';

It will create a polyfill for URLSearchParams

This answer is correct!! Thank you!!

Getting the "URLSearchParams.set is not implemented" error when trying to fetch data from my sanity backend using React Native

2 Answers2