{"size": 825, "ext": "js", "max_stars_repo_path": "src/components/Image/Image.js", "max_stars_repo_name": "kations/kuikit", "max_stars_repo_stars_event_min_datetime": "2019-06-12T16:54:05.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-25T08:53:23.000Z", "max_issues_repo_path": "src/components/Image/Image.js", "max_issues_repo_name": "kations/kuikit", "max_issues_repo_issues_event_min_datetime": "2020-03-13T09:52:35.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-24T12:16:29.000Z", "max_forks_repo_path": "src/components/Image/Image.js", "max_forks_repo_name": "kations/kuikit", "max_forks_repo_forks_event_min_datetime": "2020-02-19T14:34:13.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-19T14:34:13.000Z"}
{"max_stars_count": 3, "max_issues_count": 7, "max_forks_count": 1, "avg_line_length": 25.0, "max_line_length": 64, "alphanum_fraction": 0.5806060606}
import * as React from 'react';
import { Image as RNImage } from 'react-native';
import { withThemeProps, styled } from '../../style';
import { useLayout } from '../../hooks';
const Img = styled.Image();

function Image({ source, width, height, style = {}, ...rest }) {
  const layout = useLayout();
  const [aspect, setAspect] = React.useState(1);

  React.useEffect(() => {
    RNImage.getSize(source.uri || source, (w, h) => {
      const aspectRatio = h / w;
      setAspect(aspectRatio);
    });
  }, [source]);

  return (
    <Img
      onLayout={layout.onLayout}
      source={source}
      style={{
        ...style,
        width: width ? width : layout.height / aspect,
        height: height ? height : layout.width * aspect,
      }}
      {...rest}
    />
  );
}

export default withThemeProps(Image, 'Image');
