All Projects → brh55 → React Native Hero

brh55 / React Native Hero

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Hero

React Native Hide Show Password Input
React-Native Hide Show Password InputText Component
Stars: ✭ 50 (-78.63%)
Mutual labels:  component, react-native-component
React Native Star Rating
A React Native component for generating and displaying interactive star ratings
Stars: ✭ 724 (+209.4%)
Mutual labels:  component, react-native-component
React Native Dynamic Search Bar
Medium Article: https://freakycoder.com/react-native-library-dynamic-search-bar-c03fea9fae36
Stars: ✭ 225 (-3.85%)
Mutual labels:  mobile-app, react-native-component
React Scroll Parallax
🔮 React components to create parallax scroll effects for banners, images or any other DOM elements
Stars: ✭ 1,699 (+626.07%)
Mutual labels:  component, banner
Vue Menu
Menu/Contextmenu Component for vue2
Stars: ✭ 227 (-2.99%)
Mutual labels:  component
Router
Angular Component Router - A declarative router for Angular applications
Stars: ✭ 225 (-3.85%)
Mutual labels:  component
React Native Skeleton Content
A customizable skeleton-like loading placeholder for react native projects using expo.
Stars: ✭ 221 (-5.56%)
Mutual labels:  component
Buildapks
Really quickly build APKs on handheld device (smartphone or tablet) in Amazon, Android, Chromebook and Windows📲 See https://buildapks.github.io/docsBuildAPKs/setup to start building APKs.
Stars: ✭ 218 (-6.84%)
Mutual labels:  mobile-app
Blog
Personal Blog
Stars: ✭ 234 (+0%)
Mutual labels:  component
Asset
The Asset component manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files.
Stars: ✭ 2,771 (+1084.19%)
Mutual labels:  component
Vue.draggable
Vue drag-and-drop component based on Sortable.js
Stars: ✭ 16,530 (+6964.1%)
Mutual labels:  component
Component Size
React hook for determining the size of a component
Stars: ✭ 224 (-4.27%)
Mutual labels:  component
Drupalgap
An application development kit for Drupal websites.
Stars: ✭ 228 (-2.56%)
Mutual labels:  mobile-app
Admobadapter
It wraps your Adapter to display Admob native ads and banners in a ListView/RecyclerView data set. It based on the Yahoo fetchr project https://github.com/yahoo/fetchr
Stars: ✭ 224 (-4.27%)
Mutual labels:  banner
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+1092.31%)
Mutual labels:  component
React Messenger Customer Chat
React component for messenger customer chat plugin
Stars: ✭ 221 (-5.56%)
Mutual labels:  component
Reel Search
🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Stars: ✭ 2,533 (+982.48%)
Mutual labels:  component
Doctor
quick and easy documentation of Vue.js components - DEPRECATED
Stars: ✭ 227 (-2.99%)
Mutual labels:  component
Threema Ios
Threema App for iOS.
Stars: ✭ 220 (-5.98%)
Mutual labels:  mobile-app
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (-3.42%)
Mutual labels:  component

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].