[
  {
    "path": ".github/workflows/npmpublish.yml",
    "content": "name: Node.js Package\n\non:\n  release:\n    types: [published]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v1\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - run: npm ci\n      - run: npm publish --access public\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n\n\n### JetBrains template\n# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion\n\n*.iml\n\n## Directory-based project format:\n.idea/\n# if you remove the above rule, at least ignore the following:\n\n/ResponsiveImageExample/\n/ResponsiveImageExample/node_modules\n\n\n# User-specific stuff:\n# .idea/workspace.xml\n# .idea/tasks.xml\n# .idea/dictionaries\n\n# Sensitive or high-churn files:\n# .idea/dataSources.ids\n# .idea/dataSources.xml\n# .idea/sqlDataSources.xml\n# .idea/dynamic.xml\n# .idea/uiDesigner.xml\n\n# Gradle:\n# .idea/gradle.xml\n# .idea/libraries\n\n# Mongo Explorer plugin:\n# .idea/mongoSettings.xml\n\n## File-based project format:\n*.ipr\n*.iws\n\n## Plugin-specific files:\n\n# IntelliJ\n/out/\n\n# mpeltonen/sbt-idea plugin\n.idea_modules/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Crashlytics plugin (for Android Studio and IntelliJ)\ncom_crashlytics_export_strings.xml\ncrashlytics.properties\ncrashlytics-build.properties\n\n"
  },
  {
    "path": ".npmignore",
    "content": "node_modules\n\n\n### JetBrains template\n# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion\n\n*.iml\n\n## Directory-based project format:\n.idea/\n# if you remove the above rule, at least ignore the following:\n\n/ResponsiveImageExample/\n/ResponsiveImageExample/node_modules\n\n\n# User-specific stuff:\n# .idea/workspace.xml\n# .idea/tasks.xml\n# .idea/dictionaries\n\n# Sensitive or high-churn files:\n# .idea/dataSources.ids\n# .idea/dataSources.xml\n# .idea/sqlDataSources.xml\n# .idea/dynamic.xml\n# .idea/uiDesigner.xml\n\n# Gradle:\n# .idea/gradle.xml\n# .idea/libraries\n\n# Mongo Explorer plugin:\n# .idea/mongoSettings.xml\n\n## File-based project format:\n*.ipr\n*.iws\n\n## Plugin-specific files:\n\n# IntelliJ\n/out/\n\n# mpeltonen/sbt-idea plugin\n.idea_modules/\n\n# JIRA plugin\natlassian-ide-plugin.xml\n\n# Crashlytics plugin (for Android Studio and IntelliJ)\ncom_crashlytics_export_strings.xml\ncrashlytics.properties\ncrashlytics-build.properties\n\nreact_logo.png\nretina.png"
  },
  {
    "path": "README.md",
    "content": "# React Native Responsive Image\n\n[![David](https://david-dm.org/dharmoslap/react-native-responsive-image.svg)](https://david-dm.org/dharmoslap/react-native-responsive-image)\n[![npm](https://img.shields.io/npm/v/react-native-responsive-image.svg)](https://www.npmjs.com/package/react-native-responsive-image)\n[![GitHub commits](https://img.shields.io/github/commits-since/dharmoslap/react-native-responsive-image/2.1.0.svg?maxAge=2592000)]()\n[![npm](https://img.shields.io/npm/dt/react-native-responsive-image.svg?maxAge=2592000)](https://www.npmjs.com/package/react-native-responsive-image)\n\n## Why?\n\nReact Native's Image size is rendered with the same dimensions regardless of device screen size and screen resolution. That's bad. This component scales itself seemlesly on all iOS and Android devices.\n\n## Installation\n\n`npm install react-native-responsive-image --save`\n\n## Usage\n\n`<ResponsiveImage>` is expecting `initWidth` and `initHeight` props.\n\nThese values are used to set image size on any device that has screen size iPhone Plus, or larger.\nImage is then scaled down for any smaller device.\n\nOptional prop `component` is used to pass down either an `Image` or `ImageBackground` imported react-native (defaults to `Image` if not provided)\n\n## Example\n\n```javascript\nimport React, { Component } from \"react\";\nimport { AppRegistry, StyleSheet, View } from \"react-native\";\nimport ResponsiveImage from \"react-native-responsive-image\";\n\nclass App extends Component {\n  render() {\n    return (\n      <View\n        style={{\n          flexGrow: 1,\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          flexDirection: \"row\"\n        }}\n      >\n        <ResponsiveImage\n          source={{ uri: \"https://reactjs.org/logo-og.png\" }}\n          initWidth=\"138\"\n          initHeight=\"138\"\n        />\n        <ResponsiveImage\n          source={{ uri: \"https://reactjs.org/logo-og.png\" }}\n          initWidth=\"138\"\n          initHeight=\"138\"\n        />\n        <ResponsiveImage\n          source={{ uri: \"https://reactjs.org/logo-og.png\" }}\n          initWidth=\"138\"\n          initHeight=\"138\"\n        />\n      </View>\n    );\n  }\n}\n\nAppRegistry.registerComponent(\"ResponsiveImageExample\", () => App);\n```\n\nFor `initWidth=138` it looks like this:\n\n| Device               | Screen width | Scale | `<Image>` width |\n| -------------------- | ------------ | ----- | --------------- |\n| iPhone SE            | 320          | 0.77  | 106             |\n| iPhone X             | 375          | 0.902 | 117             |\n| iPhone8 Plus         | 414          | 1     | 138             |\n| Nokia 5              | 360          | 0.87  | 120             |\n| iPad (or any tablet) | -            | 1     | 138             |\n\n## Just one image?\n\nIt sounds like you could save some loading by delivering low resolution images to screens with lower resolution. The best way is to serve just one high-resolution (retina) well compressed image. It’s surprising how well they can be compressed, and the result looks the same.\n\n![Retina Compression](https://raw.githubusercontent.com/Dharmoslap/react-native-responsive-image/master/retina.png)\n\n## Example project\n\n### Create project\n\n`expo init ResponsiveImageExample`\n\n- go with 'expo-template-blank'\n\n`cp ./example/App.js ./ResponsiveImageExample/App.js`\n\n`cp -R ./src ./ResponsiveImageExample`\n\n`cd ResponsiveImageExample`\n\n`yarn start`\n\n## Development\n\n1. Modify any files in ./src directory\n\n2. Propagate changes by `cp -R ./src ./ResponsiveImageExample/src`\n"
  },
  {
    "path": "example/App.js",
    "content": "import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport ResponsiveImage from './src/react-native-responsive-image';\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>\n        <ResponsiveImage source={{ uri: 'https://github.com/Dharmoslap/react-native-responsive-image/raw/master/react_logo.png' }} initWidth=\"138\" initHeight=\"138\" />\n        <ResponsiveImage source={{ uri: 'https://github.com/Dharmoslap/react-native-responsive-image/raw/master/react_logo.png' }} initWidth=\"138\" initHeight=\"138\" />\n        <ResponsiveImage source={{ uri: 'https://github.com/Dharmoslap/react-native-responsive-image/raw/master/react_logo.png' }} initWidth=\"138\" initHeight=\"138\" />\n      </View>);\n  }\n}"
  },
  {
    "path": "index.js",
    "content": "import ResponsiveImage from './src/react-native-responsive-image';\n\nexport default ResponsiveImage"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-native-responsive-image\",\n  \"version\": \"2.3.1\",\n  \"description\": \"Image component, that resizes itself appropriately on various screensizes.\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/Dharmoslap/react-native-responsive-images.git\"\n  },\n  \"keywords\": [\n    \"React\",\n    \"Native\"\n  ],\n  \"author\": \"Ladislav Maxa <ladislavmaxa@outlook.com> (https://github.com/Dharmoslap)\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/Dharmoslap/react-native-responsive-images/issues\"\n  },\n  \"homepage\": \"https://github.com/Dharmoslap/react-native-responsive-images#readme\",\n  \"installConfig\": {\n    \"pnp\": true\n  }\n}"
  },
  {
    "path": "src/applyScale.js",
    "content": "var Device = require('./device');\n\nfunction applyScale(size) {\n  return Math.ceil(size * Device.scale);\n}\n\nmodule.exports = applyScale;\n"
  },
  {
    "path": "src/device.android.js",
    "content": "var React = require('react');\nvar { Dimensions } = require('react-native');\n\nvar device = Dimensions.get('window');\nvar scale;\n\nif (device.width <= 414) { \n\t//Android smartphones\n\tscale = device.width / 414;\n} else{\n\t//Android tablets\n\tscale = 1;\n}\n\nmodule.exports = { scale: scale };\n"
  },
  {
    "path": "src/device.ios.js",
    "content": "var React = require('react');\nvar { Dimensions } = require('react-native');\n\nvar device = Dimensions.get('window');\nvar scale;\n\nswitch (device.width) {\n\t//iPhone4/4S and iPhone5/5S\n  \t\tcase 320:\n\t\tscale = 0.77;\n\t\tbreak;\n\t//iPhone6/6S\n  \t\tcase 375:\n\t\tscale = 0.902;\n\t\tbreak;\n\t//iPhone6plus/6Splus\n  \t\tcase 414:\n\t\tscale = 1;\n\t\tbreak;\n\t//iPad\n\tdefault:\n\t\tscale = 1;\n}\n\nmodule.exports = { scale: scale };\n"
  },
  {
    "path": "src/react-native-responsive-image.js",
    "content": "import React, { Component } from 'react';\nimport { Image } from 'react-native';\nimport applyScale from './applyScale';\n\nexport default class ResponsiveImage extends Component {\n\n  setNativeProps(nativeProps) {\n    this._root.setNativeProps(nativeProps);\n  }\n\n  render() {\n    var width = applyScale(this.props.initWidth);\n    var height = applyScale(this.props.initHeight);\n    const Component = this.props.component\n    return (\n      <Component\n        style={[{ width: width, height: height }, this.props.style]}\n        source={this.props.source}\n        ref={component => this._root = component}\n        resizeMode={this.props.resizeMode || 'cover'}\n        onLoadStart={this.props.onLoadStart}\n        onProgress={this.props.onProgress}\n        onLoad={this.props.onLoad}\n        onError={this.props.onError}\n        onLoadEnd={this.props.onLoadEnd}\n        defaultSource={this.props.defaultSource}\n        borderRadius={this.props.borderRadius}\n      >\n        {this.props.children}\n      </Component>\n    )\n  }\n}\n\nResponsiveImage.defaultProps = {\n  component: Image\n}\n"
  }
]