https://github.com/huiseoul/react-native-fit-image

Responsive image component to fit perfectly itself.
https://github.com/huiseoul/react-native-fit-image

android component fit image ios react-native responsive

Last synced: 3 months ago
JSON representation

Responsive image component to fit perfectly itself.

• Host: GitHub
• URL: https://github.com/huiseoul/react-native-fit-image
• Owner: huiseoul
• License: other
• Created: 2016-04-22T07:43:12.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2021-09-21T01:42:21.000Z (over 3 years ago)
• Last Synced: 2024-11-28T22:42:22.954Z (3 months ago)
• Topics: android, component, fit, image, ios, react-native, responsive
• Language: TypeScript
• Size: 6.83 MB
• Stars: 584
• Watchers: 9
• Forks: 54
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-fit-image ★383 - Responsive image component to fit perfectly itself. (Components / UI)
• awesome-reactnative-ui - react-native-fit-image - native-fit-image-example/raw/master/fit_image_example_portrait.gif)| (Others)
• awesome-react-native - react-native-fit-image ★383 - Responsive image component to fit perfectly itself. (Components / UI)
• awesome-reactnative-ui - react-native-fit-image - native-fit-image-example/raw/master/fit_image_example_portrait.gif)| (Others)
• awesome-react-native - react-native-fit-image ★383 - Responsive image component to fit perfectly itself. (Components / UI)
• awesome-react-native-ui - react-native-fit-image ★143 - Responsive image component to fit perfectly itself. (Components / UI)
• awesome-react-native - react-native-fit-image ★383 - Responsive image component to fit perfectly itself. (Components / UI)

README

        
# React Native Fit Image [![npm version](https://badge.fury.io/js/react-native-fit-image.svg)](https://badge.fury.io/js/react-native-fit-image)

React Native Fit Image enables you to draw responsive image component.

## Introduction

Responsive image component to fit perfectly itself.

## Install

`npm install react-native-fit-image --save`

## Usage

```javascript

import FitImage from 'react-native-fit-image';

// custom styles for FitImage

var styles = StyleSheet.create({

  fitImage: {

    borderRadius: 20,

  },

  fitImageWithSize: {

    height: 100,

    width: 30,

  },

});

// draws image to fit inherited space automatically, even when screen is rotated.

// even you don't need to provide original size in v1.2.0

// draws image to fit inherited space automatically and disables loading indicator

// draws image to fit inherited space automatically, even when screen is rotated.

// could use resizeMode

// or draws image to specific size like Image component.

// draws local image (currently, it does not support responsive)

```

## Example

- See a [FitImageExample][1].

![FitImageExample - Portrait](https://github.com/originerd/react-native-fit-image-example/raw/master/fit_image_example_portrait.gif)

![FitImageExample - LandScape](https://github.com/originerd/react-native-fit-image-example/raw/master/fit_image_example_landscape.gif)

[1]: https://github.com/originerd/react-native-fit-image-example