Instantly share code, notes, and snippets.

Embed
What would you like to do?
AsyncImage
import React from 'react';
import { View, ActivityIndicator, Image, } from 'react-native';
import * as fabfirebaseapp from 'react-native-firebase';
export default class AsyncImage extends React.Component {
constructor(props) {
super(props);
this.state =
{
loading: true,
mounted: true,
image: "/images/logoblue.jpg",
url: "",
}
}
componentDidMount() {
this.setState({ isMounted: true })
this.getAndLoadHttpUrl()
}
async getAndLoadHttpUrl() {
if (this.state.mounted == true) {
const ref = fabfirebaseapp.storage().ref(this.props.image);
ref.getDownloadURL().then(data => {
this.setState({ url: data })
this.setState({ loading: false })
}).catch(error => {
this.setState({ url: "/images/logoblue.jpg" })
this.setState({ loading: false })
})
}
}
componentWillUnmount() {
this.setState({ isMounted: false })
}
componentWillReceiveProps(props) {
this.props = props
if (this.props.refresh == true) {
}
}
render() {
if (this.state.mounted == true) {
if (this.state.loading == true) {
return (
<View key={this.props.image} style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }} >
<ActivityIndicator />
</View>
)
}
else {
return (
<Image style={this.props.style} source={{uri: this.state.url}} />
)
}
}
else {
return null
}
}
}
@maniatfabx

This comment has been minimized.

Copy link
Owner

maniatfabx commented Jan 5, 2019

You can then use this component by importing it:
import AsyncImage from '../components/AsyncImage';
<AsyncImage image={this.state.logo} style={{width: '100%', height: 50, resizeMode: 'contain'}} refresh={this.state.refresh}>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment