# react-native-element-image

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

Latest version **1.1.1** (published 2022-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-element-image
pnpm add react-native-element-image
yarn add react-native-element-image
bun add react-native-element-image
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-11-08 |
| First published | 2021-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 192.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Hoa Phan |
| Maintainers | hoaphantn7604 |
| Keywords | react-native, elements, components, image, auto width, auto height, image scale, user avatar |

## Links

- npm: https://www.npmjs.com/package/react-native-element-image
- Repository: https://github.com/hoaphantn7604/react-native-element-image
- Homepage: https://github.com/hoaphantn7604/react-native-element-image#readme
- Issues: https://github.com/hoaphantn7604/react-native-element-image/issues
- npm.io page: https://npm.io/package/react-native-element-image

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-11-08
- 1.1.0 — 2021-10-12
- 1.0.3 — 2021-10-01
- 1.0.2 — 2021-07-03
- 1.0.1 — 2021-06-30
- 1.0.0 — 2021-06-30

## 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 (
    <View style={styles.container}>
      <Avatar
        size={80}
        containerStyle={styles.avatar}
        source={img}
        iconEnable={false}
        onPressIcon={() => alert('Click')}
        nameStyle={{ fontSize: 20 }}
      />
      <Avatar
        size={80}
        containerStyle={styles.avatar}
        source={img}
        iconEnable
        onPressIcon={() => alert('Click')}
        nameStyle={{ fontSize: 20 }}
      />

      <Avatar
        size={100}
        containerStyle={styles.avatar}
        source={img}
        iconEnable
        onPressIcon={() => alert('Click')}
        name="User name"
        nameStyle={{ fontSize: 20, marginBottom: 20 }}
      />
      <Text>Width: 200, Height: Automatic</Text>
      <Image style={styles.image} source={img} width={200} />
      <Text style={styles.text}>Width: Automatic, Height: 200</Text>
      <Image style={styles.image} source={img} height={200} />
    </View>
  );
};

export default ImageScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    margin: 20,
  },
  text: { marginTop: 50 },
  avatar: { marginTop: 10 },
});
```

---
_Source: https://npm.io/package/react-native-element-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._