props not support style like "{width: '100%'}"

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?

[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.

[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.