Fetching JSONP with React Native

Question

I'm trying to use this API https://www.petfinder.com/developers/api-docs with React Native. The problem I'm having is it returns JSONP rather than JSON so using fetch is giving me an unexpected token in JSON error. I've tried to use a library like fetch-jsonP, however thats not working in React Native because there is no document (same with jquery), any ideas how I can get jsonP data with React Native?

App.js

class Home extends Component {
  componentDidMount() {
    fetch(
      `http://api.petfinder.com/pet.find?format=json&key=${API_KEY}&animal=dog&location=84070&callback=callback`
    )
      .then(res => res.json())
      .then(responseText => console.log(responseText))
      .catch(err => console.log(err));
  }
  render() {
    const width = Dimensions.get("window").width;
    const height = Dimensions.get("window").height;

    return (
      <View>
        <Header
          backgroundColor={darkBlue}
          leftComponent={{ icon: "menu", color: "#fff" }}
          centerComponent={<HeaderTextComponent />}
          rightComponent={{ icon: "home", color: "#fff" }}
        />
      </View>
    );
  }
}

export default Home;

Yes I have, when running that code with my fetch call i get 'invalid JSONP response', so the error I'm throwing — Dmitriy
– Dmitriy, Commented Jul 20, 2018 at 13:49

Mihai Manole · Accepted Answer · 2019-03-14 16:48:50Z

3

JSONP works only in browsers, not on mobile. Don't try to use fetch-jsonP or any JSONP library because they rely on document.createElement('script') to get Cross-Domain Support. On mobiles, Cross-Domain makes no sense.

As I see on petfinder.com the JSONP is used only if you supply a callback. If you won't do so I expect to get a normal JSON response.

answered Mar 14, 2019 at 16:48

Mihai Manole

1951 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dmitriy Over a year ago

Yeah that ended up being the solution

Collectives™ on Stack Overflow

Fetching JSONP with React Native

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related