https://github.com/brh55/react-native-hero
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more
https://github.com/brh55/react-native-hero
banner component dynamic-images hero mobile-app react react-native react-native-component
Last synced: 7 months ago
JSON representation
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more
- Host: GitHub
- URL: https://github.com/brh55/react-native-hero
- Owner: brh55
- Created: 2017-04-03T16:23:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-28T18:07:30.000Z (almost 8 years ago)
- Last Synced: 2025-03-27T15:03:52.067Z (7 months ago)
- Topics: banner, component, dynamic-images, hero, mobile-app, react, react-native, react-native-component
- Language: JavaScript
- Homepage:
- Size: 137 KB
- Stars: 251
- Watchers: 2
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.json
Awesome Lists containing this project
- awesome-react-native - react-native-hero ★180 - A hero/banner component with support for dynamic or static images, dynamic sizing, color overlays, and more. (Components / UI)
- awesome-reactnative-ui - react-native-hero - native component with support for dynamic image, dynamic sizing, color overlays, and more|<ul><li>Last updated : This week</li><li>Stars : 193</li><li>Open issues : 3</li></ul>|![]()| (Others)
- awesome-react-native - react-native-hero ★180 - A hero/banner component with support for dynamic or static images, dynamic sizing, color overlays, and more. (Components / UI)
- awesome-reactnative-ui - react-native-hero - native component with support for dynamic image, dynamic sizing, color overlays, and more|<ul><li>Last updated : This week</li><li>Stars : 193</li><li>Open issues : 3</li></ul>|![]()| (Others)
- awesome-react-native - react-native-hero ★180 - A hero/banner component with support for dynamic or static images, dynamic sizing, color overlays, and more. (Components / UI)
- awesome-react-native - react-native-hero ★180 - A hero/banner component with support for dynamic or static images, dynamic sizing, color overlays, and more. (Components / UI)
README
# react-native-hero [](https://travis-ci.org/brh55/react-native-hero) [](https://david-dm.org/brh55/react-native-hero?type=dev) [](https://www.npmjs.com/package/react-native-hero)
> :metal: A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more.
Why not just nest it under ``? Well `react-native-hero` is a flexible abstraction on top of `Text`, however it includes a couple of useful things out of the box.
- Dynamic sizing of the background image based on the content, no need to worry about text overflows
- Full width sizing by device width, while supporting device rotation
- Support for remote images or local image
- Statically defined height of the hero
- Support for color overlay with opacity selection
- Support to use any custom third-party image component
## Basic Usage
1. Install the repository
```bash
$ npm install --save react-native-hero
```
2. Add an import to the top of your file
```js
import Hero from 'react-native-hero';
```
3. Declare the component in the render method of your component
```jsx
render() {
return (
(
React Native Hero!
Is super duper, cool!
)} />
)
}
```
4. Want more examples or a better demo? Take a look at the [example app](/tree/master/example).
## Advance Usage
### Blurred backgrounds
Import [`react-native-blur`](https://github.com/react-native-community/react-native-blur) and add it to your overlay.
```jsx
// Assuming props.renderOverlay renders with overlay()
(
La Catalana
tapas, spanish, wine_bars
0.74 Miles
San Jose, CA
)}
/>
}
```
### Color Overlays
Set `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`.
```jsx
render() {
return (
(
Parcel 104
newamerican, wine_bars
1.72 Miles
Santa Clara, CA )}
colorOverlay="#1bb4d8"
colorOpacity={0.5}/>
)
}
```
### Custom Image Component
There 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 ``, the only requirement is a custom component following the standard `` interface. In addition, you can also pass along custom properties to the component through the `customImageProps` attribute.
**Example: Using react-native-fast-image**
```jsx
import FastImage from 'react-native-fast-image';
const fastProps = {
resizeMode: FastImage.resizeMode.contain
};
render() {
return (
(
Parcel 104
newamerican, wine_bars
1.72 Miles
Santa Clara, CA )}
colorOverlay="#1bb4d8"
colorOpacity={0.5}
customImageComponent={FastImage}
customImageProps={fastProps}
/>
)
}
```
## Component Props
| Props | Type | Description |
|----------------------|--------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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')` |
| renderOverlay | func | A function that renders the content to be placed on top of the hero unit, and colored overlay (if applicable). |
| 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. |
| colorOpacity | num | If colorOverlay is set, this sets the level of opacity. **Default: .30** |
| 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** |
| minHeight | num | A statically defined height for the hero unit, overrides dynamic sizing based on content. |
| 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. |
| customImageProps | object | Pass along additional properties to a props.customImageComponent. |
## Contribute
👷🏽👷🏻♀️🐕
PR's are welcomed and desired, just abide by rules listed within [contributing.json](http://github.com/brh55/contributing.json).
### Beginners
Not 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.
## License
MIT © [Brandon Him](https://github.com/brh55/react-native-hero)