{"repo":"wKovacs64/react-native-responsive-image-view","free":true,"listed":false,"github":"https://github.com/wKovacs64/react-native-responsive-image-view","clone":"git clone https://github.com/wKovacs64/react-native-responsive-image-view.git","description":"React Native component for scaling an Image within the parent View","language":"TypeScript","stars":401,"topics":["react","react-native","react-native-component","responsive-images","image","view"],"license":"MIT","category":"mobile-apps","readme_excerpt":"react-native-responsive-image-view React Native component for scaling an Image within the parent View [![npm Version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url] The problem You want to display an image in your React Native app that fills the width of its container and scales its height according to the aspect ratio of the image. If you're coming from front-end web development, you may be familiar with Bootstrap 3's img-responsive class or manually applying max-width: 100% and height: auto to an image. Unfortunately, auto is not a valid value for height in React Native, so that technique doesn't quite translate. This solution This calculates the aspect ratio of your image for you (or uses a fixed value, if you supply one) and provides you with the appropriate props to apply to a View container and an Image inside it which will produce the results you're looking for. The secret sauce is setting both the height and width attributes of the style prop on the Image to 100% and wrapping it with a View that has its [ aspectRatio ][aspectratio] style property set to match the aspect ratio you want. The package provides both a [render prop component][render-props] and a [custom hook][custom-hooks]. Table of Contents - Installation - Usage - Component - Hook - Input - Basic Inputs - onLoad - onError - source - Advanced Inputs - aspectRatio - Component-only Inputs - Render Prop Function - component - render - children - Output - prop getters - getViewProps - getImageProps -","default_branch":null,"files":null,"tree":[],"storefront":"/r/wKovacs64","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/wKovacs64/react-native-responsive-image-view/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}