react-native-hero

🤘 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 <Image>? Well react-native-hero is a flexible abstraction on top of <Image>Text</Image>, 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

   $ npm install --save react-native-hero

2. Add an import to the top of your file

   import Hero from 'react-native-hero';

3. Declare the component in the render method of your component

   render() {
       return (
           <Hero
             source={{uri: 'http://helloworld.com/1.jpeg'}}
             renderOverlay={() => (
               <View>
                   <Text>React Native Hero!</Text>
                   <Text>Is super duper, cool!</Text>
               </View>
             )} />
       )
   }

4. Want more examples or a better demo? Take a look at the example app.

Advance Usage

Blurred backgrounds

Import react-native-blur and add it to your overlay.

// Assuming props.renderOverlay renders with overlay()
 <Hero
    source={{uri: 'http://helloworld.com/1.jpeg'}}
    renderOverlay={() => (
       <BlurView blurType="dark" blurAmount={10}>
           <Text style={style.type.h1}>La Catalana<Text>
           <Text style={style.type.h2}>tapas, spanish, wine_bars</Text>
           <Text style={style.loc}>0.74 Miles</Text>
           <Text style={style.address}>San Jose, CA</Text>
       </BlurView> )} 
  />
}

Color Overlays

Set Hero.props.colorOverlay to a react-native color format, and set a desired opacity with Hero.props.colorOpacity.

render() {
    return (
        <Hero
          source={{uri: 'http://helloworld.com/1.jpeg'}}
          renderOverlay={() => (
            <Text style={style.type.h1}>Parcel 104<Text>
            <Text style={style.type.h2}>newamerican, wine_bars</Text>
            <Text style={style.loc}>1.72 Miles</Text>
            <Text style={style.address}>Santa Clara, CA</Text> )}
          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. react-native-hero allows a custom component to be used in place of the default <Image>, the only requirement is a custom component following the standard <Image> interface. In addition, you can also pass along custom properties to the component through the customImageProps attribute.

Example: Using react-native-fast-image

import FastImage from 'react-native-fast-image';
 
const fastProps = {
    resizeMode: FastImage.resizeMode.contain
};
 
render() {
    return (
        <Hero
           source={{uri: 'http://helloworld.com/1.jpeg'}}
           renderOverlay{() => (
             <Text style={style.type.h1}>Parcel 104<Text>
             <Text style={style.type.h2}>newamerican, wine_bars</Text>
             <Text style={style.loc}>1.72 Miles</Text>
             <Text style={style.address}>Santa Clara, CA</Text> )}
           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	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.

Beginners

Not sure where to start, or a beginner? No problemo! Take a look at the issues page for low-hanging or beginner-friendly labels as an easy ways to start contributing.

License

MIT © Brandon Him