getImageSize (image) {
if (!image) {
return;
}
const { source, dimensions } = image;
if (dimensions) {
this.setState({ imageDimensions: dimensions });
return;
}
if (source && source.uri) {
Image.getSize(
source.uri,
(width, height) => {
if (width && height) {
if (this.state.imageDimensions && this.state.imageDimensions.width === width && this.state.imageDimensions.height === height) {
// no need to update state
} else {
this._mounted && this.setState({ imageDimensions: { width, height } });
}
}
},
() => {
this._mounted && this.setState({ error: true });
}
);
} else {
console.warn('react-native-image-gallery', 'Please provide dimensions of your local images');
}
}
componentWillReceiveProps(nextProps){
this.setState({ image: null });
if(!nextProps.info.preview || !nextProps.info.preview.image){
return;
}
const imageUri = nextProps.info.preview.image.uri;
const containerWidth = this.state.width;
if(!containerWidth && imageUri){
Image.getSize(imageUri, (width, height) => {
this.setState({
image: {
uri: imageUri,
height: height,
width: width
}
});
});
}
if(containerWidth && imageUri){
Image.getSize(imageUri, (width, height) => {
this.setState({
height: containerWidth * height / width,
image: {
uri: imageUri,
height: height,
width: width
}
});
});
}
}
function prefetchSpecialEventsImages(specialEvents) {
if (specialEvents.logo) {
Image.prefetch(specialEvents.logo)
}
if (specialEvents['logo-sm']) {
Image.prefetch(specialEvents['logo-sm'])
}
if (specialEvents.map) {
Image.prefetch(specialEvents.map)
}
}
componentWillMount() {
const { entityCardId, card } = this.props;
const { id, tmpId, uri, url, dimensions } = card;
const color = card.tmp.color || card.color;
const opacity = card.tmp.opacity || card.opacity;
const isCover = entityCardId === id || entityCardId === tmpId;
if (!!dimensions.height && !!dimensions.width) {
// $FlowFixMe ~> dimensions
this.setState({ dimensions, color, opacity, isCover });
} else {
Image.getSize(uri || url, (width, height) => {
if (this.mounted) {
this.setState({ dimensions: { width, height }, color, opacity, isCover });
}
});
}
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onStartShouldSetPanResponderCapture: () => true,
// onStartShouldSetPanResponder: evt => this.handleStartShouldSetPanResponder(evt),
// onStartShouldSetPanResponderCapture: evt => this.handleStartShouldSetPanResponder(evt),
// onMoveShouldSetPanResponder: () => true,
// onMoveShouldSetPanResponderCapture: () => true,
// onPanResponderMove: (evt, gs) => this.handlePanResponderMove(evt, gs),
onPanResponderRelease: (evt, gs) => this.handlePanResponderRelease(gs),
// onPanResponderTerminationRequest: () => false,
});
}
links.forEach((item) => {
const imageUrl = item.icon
// Check if actually a url and not icon name
if (imageUrl.indexOf('fontawesome:') !== 0) {
Image.prefetch(imageUrl)
}
})
getImageSize (props = this.props) {
const { source, imagesMaxWidth, style, height, width } = props;
const { styleWidth, styleHeight } = this.getDimensionsFromStyle(style, height, width);
if (styleWidth && styleHeight) {
return this.setState({
width: typeof styleWidth === 'string' && styleWidth.search('%') !== -1 ? styleWidth : parseInt(styleWidth, 10),
height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10)
});
}
// Fetch image dimensions only if they aren't supplied or if with or height is missing
Image.getSize(
source.uri,
(originalWidth, originalHeight) => {
if (!imagesMaxWidth) {
return this.setState({ width: originalWidth, height: originalHeight });
}
const optimalWidth = imagesMaxWidth <= originalWidth ? imagesMaxWidth : originalWidth;
const optimalHeight = (optimalWidth * originalHeight) / originalWidth;
this.setState({ width: optimalWidth, height: optimalHeight, error: false });
},
() => {
this.setState({ error: true });
}
);
}
onLoad = (event: Object) => {
const { src, onLoad } = this.props
const { width, height } = Image.resolveAssetSource(typeof src === 'string' && /^(https?:)?\/\//.test(src) ? { uri: src } : src)
onLoad && onLoad({
detail: { width, height }
})
}
.then(response => {
if(response.errorMessage) {
console.error('BreweryDB API Limit Reached. Sorry :-(')
dispatch(loadBeersFailure('BreweryDB API Limit Reached. Sorry :-('));
return;
}
let beerArr = [];
for(var key in response){
if(!beerArr.length < 2){
Image.prefetch(response[key].label).then(() => {
// console.log('IMAGE PREFETCHED for ', response[key].name)
})
}
beerArr.push({
id: key,
name: response[key].name,
label: response[key].label,
style: response[key].style,
icon: response[key].icon,
descript: response[key].descript,
abv: response[key].abv,
brewery: response[key].brewery,
website: response[key].website
})
}
dispatch(loadBeersSuccess(beerArr));
})
.then((res) => {
res.data = JSON.parse(res.data);
console.log(res);
Image.getSize(this.source, (width, height) => {
console.log("GottenImage...");
const densityWidth = width * 1.0 / Dimensions.get('window').width;
const densityHeight = height * 1.0 / Dimensions.get('window').height;
let bounds = [];
res.data.forEach(function(ele) {
let bound = {
width: ele.faceRectangle.width / densityWidth,
height: ele.faceRectangle.height / densityHeight,
top: ele.faceRectangle.top / densityHeight,
left: ele.faceRectangle.left / densityWidth,
score: '',
};
let maxi = -1;
for(let key in ele.scores) {
if(ele.scores[key] > maxi) {
maxi = ele.scores[key];
bound.score = key;
}
}
console.log(bound);
bounds.push(bound);
}, this);
console.log("Final result");
console.log(bounds);
this.setState({bounds});
}, err => console.warn(err))
})
componentDidMount() {
//avoid repaint if width/height is given
if (this.props.style.width || this.props.style.height) {
return;
}
Image.getSize(this.props.source.uri, (w, h) => {
this.setState({width: w, height: h});
});
}
componentDidMount() {
const { uri } = this.props;
const url = ImageUtilities.handleAvatarImageURI(uri);
Image.prefetch(url).then(() => {
this.setState({ isLoaded: true, url });
}, () => {
console.log('cannot load avatar image:', url);
});
}
componentDidMount () {
const { source, imagesMaxWidth } = this.props;
Image.getSize(source.uri, (width, height) => {
this.setState({
width: imagesMaxWidth && width > imagesMaxWidth ? imagesMaxWidth : width,
height: imagesMaxWidth && width > imagesMaxWidth ? height / (width / imagesMaxWidth) : height
});
});
}
constructor(props) {
super(props);
this.state = {
width: null,
height: null,
};
this.imageSizeLoaded = this.imageSizeLoaded.bind(this);
RNImage.getSize(props.source.uri, this.imageSizeLoaded, this.imageSizeLoadFailed);
}
componentDidMount() {
if (this.props.style.width || this.props.style.height) {
return;
}
Image.getSize(this.props.source.uri, (w, h) => {
console.log(`Image[${this.props.source.uri}]: width:`, w, 'height:', h);
this.setState({ width: w, height: h });
}, error => {
console.log('Error while getting size of image:', error);
});
}
storeImages(data) {
const assets = data.edges;
const images = assets.map((asset) => asset.node.image);
const widths = [];
const selected = [];
for (var i = 0; i < images.length; i++) {
if (i == images.length - 1) {
Image.getSize(images[i].uri, (w, h) => {
widths.push((w/h)*130);
selected.push(false);
this.setState({images,widths,selected});
})
}else{
Image.getSize(images[i].uri, (w, h) => {
widths.push((w/h)*130);
selected.push(false);
})
}
}
}
.then(response => {
// console.log('response in wishlist actions: ');
// console.log(response);
for(var beer in response) {
Image.prefetch(response[beer].icon)
//console.log(response[beer].icon);
}
dispatch(loadWishlistSuccess(response));
Actions.wishlist();
})
componentWillMount: function() {
logger.custom('View Loaded: News Detail');
if (this.props.route.topStoriesData.image_lg) {
Image.getSize(this.props.route.topStoriesData.image_lg, (width, height) => {
this.setState({
newsImgWidth: windowWidth,
newsImgHeight: height * (windowWidth / width)
});
});
}
},
_handlePress = () => {
this._startTime = this._startTime || Date.now();
Image.prefetch(createUncachedURI(this.props.source.uri)).then(
() => {
this._loadEventFired('✔ Prefetch OK');
this.setState(() => ({ startLoad: true }));
},
error => {
this._loadEventFired(`✘ Prefetch failed (+${Date.now() - this._startTime}ms)`);
console.log(error);
}
);
};
componentDidMount() {
Image.getSize('http://www.cocokelley.com/wp-content/uploads/2017/06/the-candy-colored-streets-in-Tallin-Estonia-visual-travel-diary-on-coco-kelley.4.jpg', (returnWidth, returnHeight) => {
// calculate image width and height
console.log(returnWidth);
console.log(returnHeight)
console.log(height);
console.log(width);
const screenWidth = width * 0.85;
const scaleFactor = returnWidth / screenWidth
const imageHeight = returnHeight / scaleFactor
this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
})
}
componentDidMount() {
Image.getSize('https://d26p6gt0m19hor.cloudfront.net/assets/donations/home/grid/give-monthly-ac4abafab17cd6b74196227a89e29ecc1f9a6d53c4690dff13556c0352e79112.jpg', (returnWidth, returnHeight) => {
// calculate image width and height
console.log(returnWidth);
console.log(returnHeight)
console.log(height);
console.log(width);
const screenWidth = width;
const scaleFactor = returnWidth / screenWidth
const imageHeight = returnHeight / scaleFactor
this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
})
}
componentDidMount(){
if(Platform.OS === "ios"){
Image.getSize(this.props.source.uri,(w,h)=>{
this.setState({
width:w,height:h
})
})
}else{
this.setState({
width:200,
height:200
})
}
}
_onImageLoadEnd(uri, imageId) {
const {maxImageWidth} = this.props;
Image.getSize && Image.getSize(uri, (w, h)=> {
if (w >= maxImageWidth) {
h = (maxImageWidth / w) * h;
w = maxImageWidth;
}
this._images[imageId] && this._images[imageId].setNativeProps({
style: {
width: w,
height: h
}
});
});
}
_onLayout(event) {
const containerWidth = event.nativeEvent.layout.width;
if (this.props.ratio) {
this.setState({
width: containerWidth,
height: containerWidth * this.props.ratio
});
} else {
Image.getSize(this.props.post.post_url, (width, height) => {
this.setState({
width: containerWidth,
height: containerWidth * height / width
});
});
}
}
fetch() {
var { style } = this.props;
if(style.width && style.height) {
this.setState({
width: style.width,
height: style.height,
loaded: true
});
} else {
Image.getSize(this.props.source.uri, (width, height) => {
this.setState({
width: width / ratio,
height: height / ratio,
loaded: true
});
});
}
}
return async (dispatch) => {
dispatch({
type: ActionTypes.START_ADDING_HATS,
payload: null,
});
Actions.photoPreview();
try {
// Detect faces
const result = await FaceDetector.addHats(path);
if (result === 'Error') {
throw new Error('Error detection Faces!');
}
// Get image size
Image.getSize(result, (width, height) => {
dispatch({
type: ActionTypes.ADDING_HATS_SUCCESS,
payload: {
height,
width,
path,
},
});
}, (err) => {
console.log(err);
dispatch({
type: ActionTypes.ADDING_HATS_ERROR,
payload: null,
});
});
} catch (e) {
console.log(e.message);
dispatch({
type: ActionTypes.ADDING_HATS_ERROR,
payload: null,
});
}
}
onImageLoadEnd(){
const { uri, maxWidth = defaultMaxWidth } = this.props;
this.setState({
loading: false
});
Image.getSize && Image.getSize(uri, (width, height)=> {
if (width >= maxWidth) {
height = (maxWidth / width) * height;
width = maxWidth;
}
this.image && this.image.setNativeProps({
style: {
width: width,
height: height
}
});
},() => null);
}
return new Promise((resolve, reject) => {
Image.getSize(
src,
(width, height) => {
res.width = width
res.height = height
res.path = src
res.orientation = null
res.type = null
success && success(res)
complete && complete(res)
resolve(res)
},
(err) => {
res.errMsg = err.message
fail && fail(res)
complete && complete(res)
reject(res)
}
)
})
render() {
const { props } = this;
const { preserveAspectRatio, x, y, width, height, href } = props;
const modes = preserveAspectRatio.trim().split(spacesRegExp);
const meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
const align = alignEnum[modes[0]] || "xMidYMid";
return (
<RNSVGImage
ref={ele => {
this.root = ele;
}}
{...extractProps({ ...props, x: null, y: null }, this)}
x={x}
y={y}
width={width}
height={height}
meetOrSlice={meetOrSlice}
align={align}
src={Image.resolveAssetSource(href)}
/>
);
}
images.map((image, index) => {
Image.getSize(image, (width, height) => {
this.state.imageHeight[index] = imageWidth * height / width;
this.setState({'imageHeight': this.state.imageHeight});
});
})
it('type warn of loading', () => {
const wrapper = shallow(<Button type="warn" loading />)
const opaqueTypeRes = wrapper.find(Image).at(0).prop('source')
expect(opaqueTypeRes).toBe(1)
expect(Image.resolveAssetSource(opaqueTypeRes).uri).toMatch(/file:\/\//)
})