How do I display a Gif from the giphy api in React Native?
up vote
0
down vote
favorite
I'm currently trying to build a simple app using the giphy api, to just show one gif from the giphy api off of a search. I can't quite figure it out though... I'm using Expo so I can't use React Native libraries. I'm currently running with this:
import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
export default class App extends Component {
getGif() {
let url = 'http://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE';
fetch(url)
.then(response => response.json());
}
render() {
return(
<Image source={{uri: 'https://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE' }} style={{width: 100, height:100}}/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);
I have also tried using source={this.getGif}, but I got a warning of "Invalid prop source supplied to ForwardRef(Image)"
react-native
asked Nov 11 at 0:38
ditao1
12
add a comment |
up vote
0
down vote
favorite
I'm currently trying to build a simple app using the giphy api, to just show one gif from the giphy api off of a search. I can't quite figure it out though... I'm using Expo so I can't use React Native libraries. I'm currently running with this:
import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
export default class App extends Component {
getGif() {
let url = 'http://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE';
fetch(url)
.then(response => response.json());
}
render() {
return(
<Image source={{uri: 'https://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE' }} style={{width: 100, height:100}}/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);
I have also tried using source={this.getGif}, but I got a warning of "Invalid prop source supplied to ForwardRef(Image)"
react-native
asked Nov 11 at 0:38
ditao1
12
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm currently trying to build a simple app using the giphy api, to just show one gif from the giphy api off of a search. I can't quite figure it out though... I'm using Expo so I can't use React Native libraries. I'm currently running with this:
import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
export default class App extends Component {
getGif() {
let url = 'http://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE';
fetch(url)
.then(response => response.json());
}
render() {
return(
<Image source={{uri: 'https://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE' }} style={{width: 100, height:100}}/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);
I have also tried using source={this.getGif}, but I got a warning of "Invalid prop source supplied to ForwardRef(Image)"
react-native
asked Nov 11 at 0:38
ditao1
12
I'm currently trying to build a simple app using the giphy api, to just show one gif from the giphy api off of a search. I can't quite figure it out though... I'm using Expo so I can't use React Native libraries. I'm currently running with this:
import React, {Component} from 'react';
import {AppRegistry, Image} from 'react-native';
export default class App extends Component {
getGif() {
let url = 'http://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE';
fetch(url)
.then(response => response.json());
}
render() {
return(
<Image source={{uri: 'https://api.giphy.com/v1/gifs/search?q=piggyback&api_key=INSERT_KEY_HERE' }} style={{width: 100, height:100}}/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => App);
I have also tried using source={this.getGif}, but I got a warning of "Invalid prop source supplied to ForwardRef(Image)"
react-native
react-native
asked Nov 11 at 0:38
ditao1
12
asked Nov 11 at 0:38
ditao1
12
edited Nov 11 at 1:53
asked Nov 11 at 0:38
ditao1
12
asked Nov 11 at 0:38
ditao1
12
asked Nov 11 at 0:38
ditao1
12
12
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53244800%2fhow-do-i-display-a-gif-from-the-giphy-api-in-react-native%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
