https://github.com/hoaphantn7604/react-native-element-image

Automatically calculate width or height based on input Image component for React Native.
https://github.com/hoaphantn7604/react-native-element-image

auto-height auto-width components elements image image-scaling react-native user-avatar

Last synced: 2 months ago
JSON representation

Automatically calculate width or height based on input Image component for React Native.

• Host: GitHub
• URL: https://github.com/hoaphantn7604/react-native-element-image
• Owner: hoaphantn7604
• License: mit
• Created: 2021-06-30T03:19:00.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-08T15:23:00.000Z (over 2 years ago)
• Last Synced: 2024-11-16T22:33:24.414Z (3 months ago)
• Topics: auto-height, auto-width, components, elements, image, image-scaling, react-native, user-avatar
• Language: TypeScript
• Homepage:
• Size: 604 KB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
## react-native-element-image

Automatically calculate width or height based on input Image component for React Native.

#### Source code demo

- [react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.

## Getting started

```js

    npm install react-native-element-image --save

```

or

```js

    yarn add npm install react-native-element-image

```

#### Demo

![](https://github.com/hoaphantn7604/file-upload/blob/master/document/image/demo.png)

#### Image Props

| Props      | Params              | isRequire | Description                   |

| ---------- | ------------------- | --------- | ----------------------------- |

| source     | ImageSourcePropType | Yes       |                               |

| width      | Number              |           | Fixed width, automatic height |

| height     | Number              |           | Fixed height, automatic width |

| background | Boolean             | No        | if true is Image Background   |

| onSize     | (size) => void      | No        | get Image size                |

#### Avatar Props

| Props          | Params              | isRequire | Description             |

| -------------- | ------------------- | --------- | ----------------------- |

| containerStyle | ViewStyle           | No        |                         |

| size           | Number              | No        | Default is 100px        |

| source         | ImageSourcePropType | Yes       |                         |

| borderColor    | String              | No        | Default is white        |

| name           | String              | No        |                         |

| nameStyle      | TextStyle           | No        |                         |

| iconEnable     | Boolean             | No        | Default is true         |

| renderIcon     | Element             | No        | Customize icon camera   |

| onPressIcon    | ()=> void           | No        | Event click icon camera |

## Usage

```javascript

import React from 'react';

import { StyleSheet, View, Text } from 'react-native';

import { Image, Avatar } from 'react-native-element-image';

const img = require('./assets/default.png');

const ImageScreen = (_props) => {

  return (

    

       alert('Click')}

        nameStyle={{ fontSize: 20 }}

      />

       alert('Click')}

        nameStyle={{ fontSize: 20 }}

      />

       alert('Click')}

        name="User name"

        nameStyle={{ fontSize: 20, marginBottom: 20 }}

      />

      Width: 200, Height: Automatic

      

      Width: Automatic, Height: 200

      

    

  );

};

export default ImageScreen;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  image: {

    margin: 20,

  },

  text: { marginTop: 50 },

  avatar: { marginTop: 10 },

});

```