diff --git a/dist/Components/Basic/ImageBackground.js b/dist/Components/Basic/ImageBackground.js index 6c8bfbe..ce5bd7e 100644 --- a/dist/Components/Basic/ImageBackground.js +++ b/dist/Components/Basic/ImageBackground.js @@ -22,24 +22,27 @@ export class ImageBackground extends React.Component { }); } }; + this.fetchImageSize = () => { + const { url } = this.props; + if (url) { + Image.getSize(url, (width, height) => { + if (width > 0 && height > 0) { + this.setState({ + imgRatio: width / height, + }); + } + }, (error) => { + this.onError(error); + }); + } + }; this.state = { containerRatio: 1, imgRatio: 1, }; } componentDidMount() { - const { url } = this.props; - if (url) { - Image.getSize(url, (width, height) => { - if (width > 0 && height > 0) { - this.setState({ - imgRatio: width / height, - }); - } - }, (error) => { - this.onError(error); - }); - } + setTimeout(this.fetchImageSize, 500); } render() { return (React.createElement(View, { style: [ diff --git a/examples/AdaptiveCards/Components/Basic/ImageBackground.js b/examples/AdaptiveCards/Components/Basic/ImageBackground.js index 6c8bfbe..ce5bd7e 100644 --- a/examples/AdaptiveCards/Components/Basic/ImageBackground.js +++ b/examples/AdaptiveCards/Components/Basic/ImageBackground.js @@ -22,24 +22,27 @@ export class ImageBackground extends React.Component { }); } }; + this.fetchImageSize = () => { + const { url } = this.props; + if (url) { + Image.getSize(url, (width, height) => { + if (width > 0 && height > 0) { + this.setState({ + imgRatio: width / height, + }); + } + }, (error) => { + this.onError(error); + }); + } + }; this.state = { containerRatio: 1, imgRatio: 1, }; } componentDidMount() { - const { url } = this.props; - if (url) { - Image.getSize(url, (width, height) => { - if (width > 0 && height > 0) { - this.setState({ - imgRatio: width / height, - }); - } - }, (error) => { - this.onError(error); - }); - } + setTimeout(this.fetchImageSize, 500); } render() { return (React.createElement(View, { style: [ diff --git a/src/Components/Basic/ImageBackground.tsx b/src/Components/Basic/ImageBackground.tsx index deff8c4..d3834ea 100644 --- a/src/Components/Basic/ImageBackground.tsx +++ b/src/Components/Basic/ImageBackground.tsx @@ -43,23 +43,7 @@ export class ImageBackground extends React.Component { } public componentDidMount() { - const { url } = this.props; - - if (url) { - Image.getSize( - url, - (width, height) => { - if (width > 0 && height > 0) { - this.setState({ - imgRatio: width / height, - }); - } - }, - (error) => { - this.onError(error); - } - ); - } + setTimeout(this.fetchImageSize, 500); } public render() { @@ -109,6 +93,37 @@ export class ImageBackground extends React.Component { } } + private onLayout = (event: LayoutChangeEvent) => { + let width = event.nativeEvent.layout.width; + let height = event.nativeEvent.layout.height; + + if (width > 0 && height > 0) { + this.setState({ + containerRatio: width / height, + }); + } + } + + private fetchImageSize = () => { + const { url } = this.props; + + if (url) { + Image.getSize( + url, + (width, height) => { + if (width > 0 && height > 0) { + this.setState({ + imgRatio: width / height, + }); + } + }, + (error) => { + this.onError(error); + } + ); + } + } + private get resizeMethod() { switch (this.props.resizeMode) { case 'repeat': @@ -122,15 +137,4 @@ export class ImageBackground extends React.Component { } } } - - private onLayout = (event: LayoutChangeEvent) => { - let width = event.nativeEvent.layout.width; - let height = event.nativeEvent.layout.height; - - if (width > 0 && height > 0) { - this.setState({ - containerRatio: width / height, - }); - } - } } diff --git a/tool/src/assets/AdaptiveCards/Components/Basic/ImageBackground.js b/tool/src/assets/AdaptiveCards/Components/Basic/ImageBackground.js index 6c8bfbe..ce5bd7e 100644 --- a/tool/src/assets/AdaptiveCards/Components/Basic/ImageBackground.js +++ b/tool/src/assets/AdaptiveCards/Components/Basic/ImageBackground.js @@ -22,24 +22,27 @@ export class ImageBackground extends React.Component { }); } }; + this.fetchImageSize = () => { + const { url } = this.props; + if (url) { + Image.getSize(url, (width, height) => { + if (width > 0 && height > 0) { + this.setState({ + imgRatio: width / height, + }); + } + }, (error) => { + this.onError(error); + }); + } + }; this.state = { containerRatio: 1, imgRatio: 1, }; } componentDidMount() { - const { url } = this.props; - if (url) { - Image.getSize(url, (width, height) => { - if (width > 0 && height > 0) { - this.setState({ - imgRatio: width / height, - }); - } - }, (error) => { - this.onError(error); - }); - } + setTimeout(this.fetchImageSize, 500); } render() { return (React.createElement(View, { style: [