Skip to content

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

Notifications You must be signed in to change notification settings

brh55/react-native-hero

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7fbc6b6 Β· Jan 28, 2018

History

56 Commits
Dec 22, 2017
Jan 28, 2018
Jan 28, 2018
Dec 22, 2017
Nov 10, 2017
Apr 26, 2017
Nov 10, 2017
Apr 10, 2017
Jan 28, 2018
Nov 10, 2017
Dec 22, 2017

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published