Sort the original keys instead of the parsed floats

This fixes a bug where if your key is "2.0", we'd parse it as the float `2` and try to look up "2" in the dictionary which would fail. Instead do the parsing inside of `sort` which is a bit more expensive asymptotically but in practice still cheap or in many cases exactly as costly as before (two calls, since most people would specify just 2x and 3x images at this point).
'use strict';

let React = require('react-native');
let {
 Image,
 PixelRatio,
 PropTypes,
} = React;

class ResponsiveImage extends React.Component {

  setNativeProps(nativeProps) {
    this.refs.image.setNativeProps(nativeProps);
  }

  render() {
    let { source } = this.props;
    let optimalSource = this._getClosestHighQualitySource();
    if (optimalSource) {
      source = optimalSource;
    }
    if (!source) {
      throw new Error(`Couldn't find an appropriate image source`);
    }

    return <Image {...this.props} ref="image" source={source} />;
  }

  _getClosestHighQualitySource() {
    let { sources } = this.props;
    let pixelRatios = Object.keys(sources);
    if (!pixelRatios.length) {
      return null;
    }

    pixelRatios.sort((ratioA, ratioB) =>
      parseFloat(ratioA) - parseFloat(ratioB)
    );
    for (let ii = 0; ii < pixelRatios.length; ii++) {
      if (pixelRatios[ii] >= PixelRatio.get()) {
        return sources[pixelRatios[ii]];
      }
    }

    let largestPixelRatio = pixelRatios[pixelRatios.length - 1];
    return sources[largestPixelRatio];
  }
}

ResponsiveImage.propTypes = {
  ...Image.propTypes,
  sources: PropTypes.objectOf(Image.propTypes.source.isRequired),
};

module.exports = ResponsiveImage;

'use strict';

let React = require('react-native');
let {
 Image,
 PixelRatio,
 PropTypes,
} = React;

class ResponsiveImage extends React.Component {

  setNativeProps(nativeProps) {
    this.refs.image.setNativeProps(nativeProps);
  }

  render() {
    let { source } = this.props;
    let optimalSource = this._getClosestHighQualitySource();
    if (optimalSource) {
      source = optimalSource;
    }
    if (!source) {
      throw new Error(`Couldn't find an appopriate image source`);
    }

    return <Image {...this.props} ref="image" source={source} />;
  }

  _getClosestHighQualitySource() {
    let { sources } = this.props;
    let pixelRatios = Object.keys(sources).map(parseFloat);
    if (!pixelRatios.length) {
      return null;
    }

    pixelRatios.sort((ratioA, ratioB) => ratioA - ratioB);
    for (let ii = 0; ii < pixelRatios.length; ii++) {
      if (pixelRatios[ii] >= PixelRatio.get()) {
        return sources[pixelRatios[ii]];
      }
    }

    let largestPixelRatio = pixelRatios[pixelRatios.length - 1];
    return sources[largestPixelRatio];
  }
}

ResponsiveImage.propTypes = {
  ...Image.propTypes,
  sources: PropTypes.objectOf(Image.propTypes.source.isRequired),
};

module.exports = ResponsiveImage;
