React Native: I am getting error while trying to get image from https://cataas.com api
I am getting SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '<'
I'm using https://cataas.com api for a react native app, my task is to generate a list of random kitten images. I tried using fetch method, but also i get error sorce.uri should not be an empty string. How can i solve this problem?
Here is my code:
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class App extends Component {
state = {
photos: '',
}
componentDidMount() {
fetch('https://cataas.com/cat?width=100')
.then(res => res.json())
.then(data => {
this.setState({
photos: data
})
.catch(err => {
console.log('error', err);
alert(err)
})
})
}
render() {
console.log(this.state.photos)
return (
<View style={styles.container}>
<Image
source={{url: this.state.photos}}
style={{height: 100, width: 100}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
export default App;
react-native fetch
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
add a comment |
I am getting SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '<'
I'm using https://cataas.com api for a react native app, my task is to generate a list of random kitten images. I tried using fetch method, but also i get error sorce.uri should not be an empty string. How can i solve this problem?
Here is my code:
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class App extends Component {
state = {
photos: '',
}
componentDidMount() {
fetch('https://cataas.com/cat?width=100')
.then(res => res.json())
.then(data => {
this.setState({
photos: data
})
.catch(err => {
console.log('error', err);
alert(err)
})
})
}
render() {
console.log(this.state.photos)
return (
<View style={styles.container}>
<Image
source={{url: this.state.photos}}
style={{height: 100, width: 100}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
export default App;
react-native fetch
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
add a comment |
I am getting SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '<'
I'm using https://cataas.com api for a react native app, my task is to generate a list of random kitten images. I tried using fetch method, but also i get error sorce.uri should not be an empty string. How can i solve this problem?
Here is my code:
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class App extends Component {
state = {
photos: '',
}
componentDidMount() {
fetch('https://cataas.com/cat?width=100')
.then(res => res.json())
.then(data => {
this.setState({
photos: data
})
.catch(err => {
console.log('error', err);
alert(err)
})
})
}
render() {
console.log(this.state.photos)
return (
<View style={styles.container}>
<Image
source={{url: this.state.photos}}
style={{height: 100, width: 100}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
export default App;
react-native fetch
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
I am getting SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '<'
I'm using https://cataas.com api for a react native app, my task is to generate a list of random kitten images. I tried using fetch method, but also i get error sorce.uri should not be an empty string. How can i solve this problem?
Here is my code:
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class App extends Component {
state = {
photos: '',
}
componentDidMount() {
fetch('https://cataas.com/cat?width=100')
.then(res => res.json())
.then(data => {
this.setState({
photos: data
})
.catch(err => {
console.log('error', err);
alert(err)
})
})
}
render() {
console.log(this.state.photos)
return (
<View style={styles.container}>
<Image
source={{url: this.state.photos}}
style={{height: 100, width: 100}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
export default App;
react-native fetch
react-native fetch
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
edited Nov 22 '18 at 16:03
MartaVoveraite
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
asked Nov 22 '18 at 15:45
MartaVoveraiteMartaVoveraite
92
92
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
add a comment |
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/@sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434400%2freact-native-i-am-getting-error-while-trying-to-get-image-from-https-cataas-c%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
add a comment |
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
add a comment |
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
answered Nov 22 '18 at 15:50
Pritish VaidyaPritish Vaidya
13.1k21741
13.1k21741
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
add a comment |
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
Thank you! Now it says that sourse.uri should not be an ampty string. Hmm does that means that it gets html data from api or something? I don't know if that is right way to fetch images from api.
– MartaVoveraite
Nov 22 '18 at 15:57
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
You can set default image string url in your state rather than empty string
– Pritish Vaidya
Nov 22 '18 at 16:08
add a comment |
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/@sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
add a comment |
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/@sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
add a comment |
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/@sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/@sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
edited Nov 22 '18 at 17:30
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
answered Nov 22 '18 at 16:01
sanjarsanjar
5681515
5681515
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
add a comment |
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
That way all works, but I need to render list of random pictures from that api.
– MartaVoveraite
Nov 22 '18 at 16:05
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
if you have a list of Image calling a random api, each Image will execute it own http request and will get a different picture.
– sanjar
Nov 22 '18 at 16:07
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Unfortunately, my task is to fetch them from api :(
– MartaVoveraite
Nov 22 '18 at 16:37
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
Thank you! Me neither have a mac, so I'll will try this on android, hope this will work. Thank you again!
– MartaVoveraite
Nov 23 '18 at 8:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434400%2freact-native-i-am-getting-error-while-trying-to-get-image-from-https-cataas-c%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
