React-native-flat-header NPM

react-native-flat-header

npm

A simple and fully customizable React Native component that implements a Flat-Header UI.

Install This library :

npm i react-native-flat-header

Install `Icon` component(Optional)

For icon Component you can use https://github.com/oblador/react-native-vector-icons

icon use :

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon name="rocket" size={30} color="#FFF" />

Usage :

List of available props for customization FlatHeader component.

Props	Value Type	Description
`leftIcon`	Icon Component	set icon Component
`leftText`	String	left text string
`leftTextStyle`	Style object	set style for left text
`leftIconHandler`	handler callback function	handle for click on left icon, if not set icon does not touchable
`leftTextHandler`	handler callback function	handle for click on left text, if not set leftText does not touchable
`leftContentHandler`	handler callback function	handle for click on both leftIcon and leftText together; if set does not need handler icon and text separately
`rightIcon`	Icon Component	set icon component
`rightIconHandler`	handler callback function	handle for click on right icon, if not set rightIcon does not touchable
`rightText`	String	right text string
`rightTextStyle`	Style Object	set style for right text
`rightTextHandler`	handler callback function	handle for click on right text, if not set rightText does not touchable
`rightContentHandler`	handler callback function	handle for click on both rightIcon and rightText together; if set does not need handler icon and text separately
`centerContent`	Group Component	set Group component that can contain Text and icon component
`centerContentHandler`	handler callback function	handle for click on centerContent, if not set centerContent does not touchable
`large`	attribute	if set this attribute, left and right text appear in bold style
`style`	style object	set style for main header container, such as background color

Examples:

full examples

First of all add below codes to your code (Import Components) :

import { FlatHeader, Group } from 'react-native-flat-header';

//-------For use Icon (must be installed first)
import Icon from 'react-native-vector-icons/FontAwesome';

Simple 1: left icon and text with handlers

<FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftIconHandler={() => {
        console.warn('Icon Pressed');
    }}
    leftText="launch the rocket"
    leftTextHandler={() => {
        console.warn('Text Pressed');
    }}
    large
/>

Simple 2: left icon and text with handlers + right icon and right handler

 <FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftIconHandler={() => {
        console.warn('Left Icon Pressed');
    }}
    rightIcon={<Icon name="heart" size={30} color="#FFC107" />}
    rightIconHandler={() => {
        console.warn('Right Icon Pressed');
    }}
    leftText="launch the rocket"
    leftTextHandler={() => {
        console.warn('Text Pressed');
    }}
    large
    style={{ backgroundColor: '#BA68C8' }}
    />

Simple 3: left and right icon and text with handlers

 <FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftIconHandler={() => {
        console.warn('Left Icon Pressed');
    }}
    leftText="launch the rocket"
    leftTextHandler={() => {
        console.warn('Left Text Pressed');
    }}
    rightIcon={<Icon name="heart" size={30} color="#FFC107" />}
    rightIconHandler={() => {
        console.warn('Right Text Pressed');
    }}
    rightText="Heart"
    rightTextHandler={() => {
        console.warn('Right Icon Pressed');
    }}
    style={{ backgroundColor: '#00BCD4' }}
    />

Simple 4: left and right icon and text + rightContentHandler

<FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftText="Left content"
    leftContentHandler={() => {
        console.warn('Left Content Pressed');
    }}
    rightIcon={<Icon name="heart" size={30} color="#FFC107" />}
    rightText="Right content"
    rightContentHandler={() => {
        console.warn('Right Content Pressed');
    }}
    style={{ backgroundColor: '#C2185B' }}
    />

Simple 5: left text

<FlatHeader
    leftText="launch the rocket"
    leftTextHandler={() => {
        console.warn('Text Pressed');
    }}
    style={{ backgroundColor: '#81C784' }}
    />

Simple 6: right text

<FlatHeader
    rightText="launch the rocket"
    rightTextHandler={() => {
        console.warn('Right text Pressed');
    }}
    style={{ backgroundColor: '#558B2F' }}
    />

Simple 7: left icon

<FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftIconHandler={() => {
        console.warn('Icon Pressed');
    }}
    style={{ backgroundColor: '#e57373' }}
    />

Simple 8: right icon without handler

<FlatHeader
    rightIcon={<Icon name="rocket" size={30} color="#FFF" />}
    style={{ backgroundColor: '#D84315' }}
    />

Simple 9: left icon and text + Extra content as children that added to left side

<FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    leftIconHandler={() => {
        console.warn('Icon Pressed');
    }}
    leftText="launch the rocket"
    leftTextHandler={() => {
        console.warn('Text Pressed');
    }}
    large
    style={{ backgroundColor: '#7986CB' }}
    >
    <Text style={{ marginLeft: 10, color: 'yellow' }}>
        Extra content
    </Text>
</FlatHeader>

Simple 10: center content

<FlatHeader
    centerContent={<Text style={{ color: '#FFF' }}>Report</Text>}
    style={{ backgroundColor: '#ff1744' }}
    />

Simple 11: left + center content (Just Text Component) + right

<FlatHeader
    leftIcon={<Icon name="rocket" size={30} color="#FFF" />}
    centerContent={<Text style={{ color: '#FFF' }}>FAQ</Text>}
    rightIcon={<Icon name="heart" size={30} color="#FFC107" />}
    style={{ backgroundColor: '#29B6F6' }}
    />

Simple 12: left + center content(Group Component) + right

<FlatHeader
    leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
    leftText="back"
    leftContentHandler={() => {
        console.warn('Left both icon and text pressed');
    }}
    centerContent={
        <Group>
            <Icon name="comment" size={30} color="#FFF" />
            <Text style={{ color: '#FFF', paddingHorizontal: 5 }}>FAQ</Text>
        </Group>
    }
    rightIcon={<Icon name="star" size={30} color="#FFF" />}
    style={{ backgroundColor: '#1A237E' }}
    />

Simple 13: Full Example (Advance mode) :

<FlatHeader
    leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
    leftText="back"
    leftTextStyle={{ color: 'yellow' }}
    leftContentHandler={() => {
        console.warn('Left both icon and text pressed-Left Content');
    }}
    centerContent={
        <Group>
        <Icon name="comment" size={30} color="#FFF" />
        <Text style={{ color: '#FFF', paddingHorizontal: 5 }}>FAQ</Text>
        </Group>
    }
    centerContentHandler={() => console.warn('center content pressed')}
    rightIcon={<Icon name="star" size={30} color="#FFF" />}
    rightText="Favorite"
    rightTextStyle={{ color: 'yellow' }}
    rightContentHandler={() => {
        console.warn('right both icon and text pressed-Right Content');
    }}
    large={false}
    style={{ backgroundColor: '#6200EA' }}
    />

Full Screen Example :

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import { FlatHeader, Group } from 'react-native-flat-header';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatHeader
            leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
            leftText="back"
            leftTextStyle={{ color: 'yellow' }}
            leftContentHandler={() => {
                console.warn('Left both icon and text pressed-Left Content');
            }}
            centerContent={
                <Group>
                <Icon name="comment" size={30} color="#FFF" />
                <Text style={{ color: '#FFF', paddingHorizontal: 5 }}></Text>FAQ</Text>
                </Group>
            }
            centerContentHandler={() => console.warn('center content pressed')}
            rightIcon={<Icon name="star" size={30} color="#FFF" />}
            rightText="Favorite"
            rightTextStyle={{ color: 'yellow' }}
            rightContentHandler={() => {
                console.warn('right both icon and text pressed-Right Content');
            }}
            style={{ backgroundColor: '#6200EA' }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
});