Awesome Open Source
Awesome Open Source

react-native-hero Travis David npm

🤘 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

image

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

image

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,554,932
Reactjs (72,855
React Native (11,814
Component (4,505
Mobile App (1,545
Banner (305
React Native Component (210
Related Projects