{"id":21768271,"url":"https://github.com/hoaphantn7604/react-native-element-image","last_synced_at":"2025-04-13T15:41:29.813Z","repository":{"id":65352811,"uuid":"381561992","full_name":"hoaphantn7604/react-native-element-image","owner":"hoaphantn7604","description":"Automatically calculate width or height based on input Image component for React Native.","archived":false,"fork":false,"pushed_at":"2022-11-08T15:23:00.000Z","size":618,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T05:15:31.626Z","etag":null,"topics":["auto-height","auto-width","components","elements","image","image-scaling","react-native","user-avatar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoaphantn7604.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-30T03:19:00.000Z","updated_at":"2022-11-08T14:50:13.000Z","dependencies_parsed_at":"2023-01-21T16:03:21.980Z","dependency_job_id":null,"html_url":"https://github.com/hoaphantn7604/react-native-element-image","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoaphantn7604","download_url":"https://codeload.github.com/hoaphantn7604/react-native-element-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248739911,"owners_count":21154247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-height","auto-width","components","elements","image","image-scaling","react-native","user-avatar"],"created_at":"2024-11-26T13:35:11.270Z","updated_at":"2025-04-13T15:41:29.791Z","avatar_url":"https://github.com/hoaphantn7604.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-element-image\n\nAutomatically calculate width or height based on input Image component for React Native.\n\n#### Source code demo\n\n- [react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.\n\n## Getting started\n\n```js\n    npm install react-native-element-image --save\n```\n\nor\n\n```js\n    yarn add npm install react-native-element-image\n```\n\n#### Demo\n\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/image/demo.png)\n\n#### Image Props\n\n| Props      | Params              | isRequire | Description                   |\n| ---------- | ------------------- | --------- | ----------------------------- |\n| source     | ImageSourcePropType | Yes       |                               |\n| width      | Number              |           | Fixed width, automatic height |\n| height     | Number              |           | Fixed height, automatic width |\n| background | Boolean             | No        | if true is Image Background   |\n| onSize     | (size) =\u003e void      | No        | get Image size                |\n\n#### Avatar Props\n\n| Props          | Params              | isRequire | Description             |\n| -------------- | ------------------- | --------- | ----------------------- |\n| containerStyle | ViewStyle           | No        |                         |\n| size           | Number              | No        | Default is 100px        |\n| source         | ImageSourcePropType | Yes       |                         |\n| borderColor    | String              | No        | Default is white        |\n| name           | String              | No        |                         |\n| nameStyle      | TextStyle           | No        |                         |\n| iconEnable     | Boolean             | No        | Default is true         |\n| renderIcon     | Element             | No        | Customize icon camera   |\n| onPressIcon    | ()=\u003e void           | No        | Event click icon camera |\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport { Image, Avatar } from 'react-native-element-image';\nconst img = require('./assets/default.png');\n\nconst ImageScreen = (_props) =\u003e {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cAvatar\n        size={80}\n        containerStyle={styles.avatar}\n        source={img}\n        iconEnable={false}\n        onPressIcon={() =\u003e alert('Click')}\n        nameStyle={{ fontSize: 20 }}\n      /\u003e\n      \u003cAvatar\n        size={80}\n        containerStyle={styles.avatar}\n        source={img}\n        iconEnable\n        onPressIcon={() =\u003e alert('Click')}\n        nameStyle={{ fontSize: 20 }}\n      /\u003e\n\n      \u003cAvatar\n        size={100}\n        containerStyle={styles.avatar}\n        source={img}\n        iconEnable\n        onPressIcon={() =\u003e alert('Click')}\n        name=\"User name\"\n        nameStyle={{ fontSize: 20, marginBottom: 20 }}\n      /\u003e\n      \u003cText\u003eWidth: 200, Height: Automatic\u003c/Text\u003e\n      \u003cImage style={styles.image} source={img} width={200} /\u003e\n      \u003cText style={styles.text}\u003eWidth: Automatic, Height: 200\u003c/Text\u003e\n      \u003cImage style={styles.image} source={img} height={200} /\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default ImageScreen;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  image: {\n    margin: 20,\n  },\n  text: { marginTop: 50 },\n  avatar: { marginTop: 10 },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-element-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoaphantn7604%2Freact-native-element-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-element-image/lists"}