React-native-fast-image: props not support style like "{width: '100%'}"

[lpaz010]

import Image from 'react-native-fast-image';
//some code 
<View style={{flex:1}}>
  <Image
       style={{width: '50%'}}
       source={{
          uri: {URI},
          priority: Image.priority.normal,
       }}
       resizeMode={Image.resizeMode.contain}
   />
</View>

prop style={{width: '50%'}} did not work, what should i do to let this style works?

[JofBigHealth]

@lpaz010 When you say "does not support" what are you seeing? If you are seeing a blank image it's because there is no height. FastImage (from memory) requires height and width set on the image. I'm pretty sure width: % works fine.

[lpaz010]

@JofBigHealth Thanks for the response. I finally found out the way to do like the below, it works!

getHeight = () => {
    if (!this.state.height) return Image.defaultHeight;
    if (!isNaN(this.props.width)) {
      const ratio = this.state.height / this.state.width;
      const height = this.props.width * ratio;
      return height;
    }else{
      return Image.defaultHeight;
    }
  }

render() {
    const height = this.getHeight();
    return (
      <FastImage
        {...this.props}
        onLoad={this.onLoad}
        style={[{ width: this.props.width, height }, this.props.style]}
      />
    )
  }

Header
Appreciate the response and apologize for not responding in time. i will close this issue
Thanks again.

[JofBigHealth]

That's a very interesting fix, @lpaz010. Thanks for contributing that. 👍

[24dev]

I found a similar fix to @lpaz010, like this:

handleLoad = (tempWidth, tempHeight) => {
    const { width } = this.props;
    const ratio = tempHeight / tempWidth;
    const height = width * ratio;
    this.setState({
      height,
    });
  };

render() {
    const { width } = this.props;
    const { height } = this.state;

    return (
       <FastImage
              style={{width,height, }}
              source={{uri,}}
              onLoad={e => this.handleLoad(e.nativeEvent.width, e.nativeEvent.height )}
              resizeMode={FastImage.resizeMode.cover}
        />
    )
}

It works like react-native-scalable-image, which I was using before fast-image. Send the width you want in the props of the component, e.g. device width.

[sanealytics]

Since we are all using hooks now, this might save a life

import { useWindowDimensions } from 'react-native'

XFastImage (props) => {
  const MARGIN=10
  const { width, height } = useWindowDimensions()
  const minDim = Math.min(width, height) - MARGIN

  return (
    <View>
      { !props.isImgLoaded && (
        <FastImage
          style={{
            width: minDim,
            height: minDim,
            position: 'absolute',
          }}
          borderRadius={10}
          source={{uri: props.product.lowres_image_uri}}
          resizeMode={FastImage.resizeMode.cover}
        />
      ) }
      <FastImage
        style={{
          width: minDim,
          height: minDim,
        }}
        borderRadius={10}
        source={{uri: props.product.image_uri}}
        onLoadEnd={props.onLoadEnd}
        resizeMode={FastImage.resizeMode.cover}
      />
    </View>
  )
}

And you can call it like so

<XFastImage
  product={product}
  isImgLoaded={this.state.isImgLoaded}
  onLoadEnd={() => this.setState({ isImgLoaded: true }) }
/>