react-native-image-header

A cool scrollable header for react-native

Installation

npm i react-native-image-header --save

Usage

First, require it from your app's JavaScript files with:

import ImageHeader from 'react-native-image-header';

ImageHeader

ImageHeader component is the main component which wraps everything and provides a couple of props (see Config below).

Example

The following example can be found in Example/Example.js.

import React from 'react';
import {
  View,
  Text,
  Dimensions,
  Image,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import ImageHeader from '../ImageHeader';

const styles = StyleSheet.create({
  userImage: {
    width: 50,
    height: 50,
    marginHorizontal: 15
  },
  foregroundContainer: {
    width: Dimensions.get('window').width,
    height: 140,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  logoutButton: {
    position: 'absolute',
    top: 60,
    right: 15
  }
});

const backgroundImage = require('./backgroundImage.png');
const donaldDuck = require('./donaldduck.png');

const Example = () => {
  return (
    <ImageHeader
      backgroundImage={backgroundImage}
      headerChildren={
        <View style={styles.foregroundContainer}>
          <Image
            source={donaldDuck}
            style={styles.userImage}
            resizeMode="contain"
          />
          <View style={{ backgroundColor: 'transparent' }}>
            <Text style={{ color: '#FFF', fontSize: 23 }}>Donald Duck</Text>
            <Text style={{ color: '#FFF', fontSize: 20 }}>d.duck</Text>
          </View>
          <View style={styles.logoutButton}>
            <TouchableOpacity>
              <Text style={{ color: '#FFF', fontSize: 17 }}>Logout</Text>
            </TouchableOpacity>
          </View>
        </View>
      }
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', height: 600 }}>
        <Text>Content</Text>
      </View>
    </ImageHeader>
  )
};

Configuration

ImageHeader:

Property	Type	Default	Description
backgroundImage	number	null	background image for the header
maxHeight	number	125	max height of the header
minHeight	number	80	min height of the header
titleScale	number	0.8	affects what the headerChildren scales down to
children	node/nodes	null	content for the actual view below the header.
headerChildren	node/nodes	null	content that is seen in the header.
statusBarTheme	string	default	must be default or light-content
titleTranslateY	number	-35	affects the translate of the headerChildren as the view is being scrolled up
childrenBackgroundColor	string	"#FFF"	background color of the content below the header.