Home

Awesome

react-native-hero Travis David npm

:metal: A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more.

<p align="center"> <img src ="https://cloud.githubusercontent.com/assets/6020066/24824103/0f759968-1bbb-11e7-895f-ab4ac50dbcd4.png" /> </p>

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.

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

PropsTypeDescription
sourceobject or moduleA local or remote image, with support for images bundled with require. EX: source={{ uri: 'http://logo.jpg' }} or source=require('images/logo.jpg')
renderOverlayfuncA function that renders the content to be placed on top of the hero unit, and colored overlay (if applicable).
colorOverlaycolorA colored overlay sitting below the rendered content overlay. Set the colorOverlay to a color to activate it.
colorOpacitynumIf colorOverlay is set, this sets the level of opacity. Default: .30
fullWidthboolA 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
minHeightnumA statically defined height for the hero unit, overrides dynamic sizing based on content.
customImageComponentReact.ComponentUse 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.
customImagePropsobjectPass 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