{"id":4086,"url":"https://github.com/brh55/react-native-hero","last_synced_at":"2025-04-09T12:08:32.048Z","repository":{"id":57337401,"uuid":"87095527","full_name":"brh55/react-native-hero","owner":"brh55","description":":metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more","archived":false,"fork":false,"pushed_at":"2018-01-28T18:07:30.000Z","size":140,"stargazers_count":251,"open_issues_count":3,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T15:03:52.067Z","etag":null,"topics":["banner","component","dynamic-images","hero","mobile-app","react","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brh55.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.json","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-03T16:23:19.000Z","updated_at":"2024-10-16T20:20:22.000Z","dependencies_parsed_at":"2022-09-13T02:31:35.426Z","dependency_job_id":null,"html_url":"https://github.com/brh55/react-native-hero","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/brh55%2Freact-native-hero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brh55%2Freact-native-hero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brh55%2Freact-native-hero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brh55%2Freact-native-hero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brh55","download_url":"https://codeload.github.com/brh55/react-native-hero/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247622027,"owners_count":20968558,"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":["banner","component","dynamic-images","hero","mobile-app","react","react-native","react-native-component"],"created_at":"2024-01-05T20:17:00.630Z","updated_at":"2025-04-09T12:08:32.029Z","avatar_url":"https://github.com/brh55.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-hero [![Travis](https://img.shields.io/travis/brh55/react-native-hero.svg?style=flat-square)](https://travis-ci.org/brh55/react-native-hero) [![David](https://img.shields.io/david/dev/brh55/react-native-hero.svg?style=flat-square)](https://david-dm.org/brh55/react-native-hero?type=dev) [![npm](https://img.shields.io/npm/dt/react-native-hero.svg?style=flat-square)](https://www.npmjs.com/package/react-native-hero)\n\u003e :metal: A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://cloud.githubusercontent.com/assets/6020066/24824103/0f759968-1bbb-11e7-895f-ab4ac50dbcd4.png\" /\u003e\n\u003c/p\u003e\n\n\nWhy not just nest it under `\u003cImage\u003e`? Well `react-native-hero` is a flexible abstraction on top of `\u003cImage\u003eText\u003c/Image\u003e`, however it includes a couple of useful things out of the box.\n- Dynamic sizing of the background image based on the content, no need to worry about text overflows\n- Full width sizing by device width, while supporting device rotation\n- Support for remote images or local image\n- Statically defined height of the hero\n- Support for color overlay with opacity selection\n- Support to use any custom third-party image component\n\n## Basic Usage\n1. Install the repository\n    ```bash\n    $ npm install --save react-native-hero\n    ```\n2. Add an import to the top of your file\n    ```js\n    import Hero from 'react-native-hero';\n    ```\n3. Declare the component in the render method of your component\n    ```jsx\n    render() {\n        return (\n            \u003cHero\n              source={{uri: 'http://helloworld.com/1.jpeg'}}\n              renderOverlay={() =\u003e (\n                \u003cView\u003e\n                    \u003cText\u003eReact Native Hero!\u003c/Text\u003e\n                    \u003cText\u003eIs super duper, cool!\u003c/Text\u003e\n                \u003c/View\u003e\n              )} /\u003e\n        )\n    }\n    ```\n4. Want more examples or a better demo? Take a look at the [example app](/tree/master/example).\n\n## Advance Usage\n### Blurred backgrounds\n![image](https://cloud.githubusercontent.com/assets/6020066/24872727/3eaa2284-1dd3-11e7-94b4-1a63cb98b2ac.png)\n\nImport [`react-native-blur`](https://github.com/react-native-community/react-native-blur) and add it to your overlay.\n```jsx\n// Assuming props.renderOverlay renders with overlay()\n \u003cHero\n    source={{uri: 'http://helloworld.com/1.jpeg'}}\n    renderOverlay={() =\u003e (\n       \u003cBlurView blurType=\"dark\" blurAmount={10}\u003e\n           \u003cText style={style.type.h1}\u003eLa Catalana\u003cText\u003e\n           \u003cText style={style.type.h2}\u003etapas, spanish, wine_bars\u003c/Text\u003e\n           \u003cText style={style.loc}\u003e0.74 Miles\u003c/Text\u003e\n           \u003cText style={style.address}\u003eSan Jose, CA\u003c/Text\u003e\n       \u003c/BlurView\u003e )} \n  /\u003e\n}\n```\n\n\n### Color Overlays\n![image](https://cloud.githubusercontent.com/assets/6020066/24842132/f06b0b46-1d47-11e7-91d5-ac22aa4243d5.png)\n\nSet `Hero.props.colorOverlay` to a [`react-native` color format](http://facebook.github.io/react-native/releases/0.43/docs/colors.html#colors), and set a desired opacity with `Hero.props.colorOpacity`.\n\n```jsx\nrender() {\n    return (\n        \u003cHero\n          source={{uri: 'http://helloworld.com/1.jpeg'}}\n          renderOverlay={() =\u003e (\n            \u003cText style={style.type.h1}\u003eParcel 104\u003cText\u003e\n            \u003cText style={style.type.h2}\u003enewamerican, wine_bars\u003c/Text\u003e\n            \u003cText style={style.loc}\u003e1.72 Miles\u003c/Text\u003e\n            \u003cText style={style.address}\u003eSanta Clara, CA\u003c/Text\u003e )}\n          colorOverlay=\"#1bb4d8\"\n          colorOpacity={0.5}/\u003e\n    )\n}\n```\n\n### Custom Image Component\nThere may be times when you want to utilize a third-party image component such as [fast-image](https://github.com/DylanVann/react-native-fast-image). `react-native-hero` allows a custom component to be used in place of the default `\u003cImage\u003e`, the only requirement is a custom component following the standard `\u003cImage\u003e` interface. In addition, you can also pass along custom properties to the component through the `customImageProps` attribute.\n\n**Example: Using react-native-fast-image**\n```jsx\nimport FastImage from 'react-native-fast-image';\n\nconst fastProps = {\n    resizeMode: FastImage.resizeMode.contain\n};\n\nrender() {\n    return (\n        \u003cHero\n           source={{uri: 'http://helloworld.com/1.jpeg'}}\n           renderOverlay{() =\u003e (\n             \u003cText style={style.type.h1}\u003eParcel 104\u003cText\u003e\n             \u003cText style={style.type.h2}\u003enewamerican, wine_bars\u003c/Text\u003e\n             \u003cText style={style.loc}\u003e1.72 Miles\u003c/Text\u003e\n             \u003cText style={style.address}\u003eSanta Clara, CA\u003c/Text\u003e )}\n           colorOverlay=\"#1bb4d8\"\n           colorOpacity={0.5}\n           customImageComponent={FastImage}\n           customImageProps={fastProps}\n         /\u003e\n    )\n}\n```\n\n## Component Props\n| Props                | Type                                                                           | Description                                                                                                                                                                |\n|----------------------|--------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| source               | object or module                                                               | A local or remote image, with support for images bundled with require. **EX:** `source={{ uri: 'http://logo.jpg' }}` or `source=require('images/logo.jpg')`                |\n| renderOverlay        | func                                                                           | A function that renders the content to be placed on top of the hero unit, and colored overlay (if applicable).                                                             |\n| colorOverlay         | [color](http://facebook.github.io/react-native/releases/0.43/docs/colors.html) | A colored overlay sitting below the rendered content overlay. Set the colorOverlay to a color to activate it.                                                              |\n| colorOpacity         | num                                                                            | If colorOverlay is set, this sets the level of opacity. **Default: .30**                                                                                                   |\n| fullWidth            | bool                                                                           | A boolean indicating if the hero unit should be sized the full width of the device. Setting to false will size it according to the contents size.**Default: true**         |\n| minHeight            | num                                                                            | A statically defined height for the hero unit, overrides dynamic sizing based on content.                                                                                  |\n| customImageComponent | `React.Component`                                                              | Use a custom component to be rendered for the Image. This will work properly, as long as the component follows the standard interface of the react-native image component. |\n| customImageProps     | object                                                                         | Pass along additional properties to a props.customImageComponent.                                                                                                          |\n\n## Contribute\n👷🏽👷🏻‍♀️🐕\n\nPR's are welcomed and desired, just abide by rules listed within [contributing.json](http://github.com/brh55/contributing.json). \n\n### Beginners\nNot sure where to start, or a beginner? No problemo! Take a look at the [issues page](https://github.com/brh55/react-native-hero/issues) for `low-hanging` or `beginner-friendly` labels as an easy ways to start contributing.\n\n## License\nMIT © [Brandon Him](https://github.com/brh55/react-native-hero)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrh55%2Freact-native-hero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrh55%2Freact-native-hero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrh55%2Freact-native-hero/lists"}