react-native-custom-header

A simple header for React Native apps.

Installation

npm install --save react-native-custom-header

Documentation

Prop	Description	Type	Default	Required
backgroundColor	Background color of header.	string	'black'	NO
width	Set open state function.	number	Dimensions.get('window').width	NO
height	Title of select picker modal.	number	60	NO
headerStyle	Custom style for title.	object	null	NO
isBack	Showing state of back button.	boolean	false	NO
backIconColor	Icon icon's color.	string	-	NO
backButtonStyle	Icon color's style.	object	-	NO
backButtonComponent	Custom back button component. If you're using that, backIconColor, backButtonStyle is useless.	any	-	NO
isGradient	Gradient color state of header.	boolean	false	NO
colors	Gradient colors.	array	['#6a11cb', '#2575fc']	NO
start	Gradient start locations.	object	{x: 0, y: 0}	NO
end	Gradient end locations.	object	{x: 1, y: 0}	NO
locations	Colors locations. (The length of this array must be the same as the length of the array of colors.)	array	[0, 1]	NO
title	Header title.	string	'Header Component'	NO
titleStyle	Custom header title style.	object	null	NO
titleComponent	Custom title component. If you're using that, titleStyle is useless.	any	null	NO
rightButtons	Buttons on the right side of the header.	array	null	NO
isShowShadow	Show state of shadow.	boolean	false	NO
shadowColor	Shadow's color.	string	'black'	NO
shadowSize	Shadow's size. (iOS)	number	2	NO
elevation	Elevation size. (Shadow size) (Android)	number	20	NO
isTranslucentStatusBar	Status Bar's translucent state.	boolean	true	NO
statusBarColor	Status Bar's background color.	string	true	NO
statusBarStyle	Status Bar's style. ('light-content', 'dark-content')	string	true	NO

Props table for rightButtons array:

Prop	Description	Type	Default	Required
id	Button ID.	number	-	YES
color	Button background color.	string	-	YES
content	Button content.	any	-	YES
action	Button action.	function	-	YES

Usage

// right buttons array
const rightButtons = [
        {
            id: 1,
            color: 'rgba(255, 255, 255, 0.15)',
            content: <Text>🤙</Text>,
            action: () => alert('First Right Button'),
        },
        {
            id: 2,
            color: 'rgba(255, 255, 255, 0.15)',
            content: <Text>🖐️</Text>,
            action: () => alert('Second Right Button'),
        },
    ];

// render
<View style={{flex: 1}}>

    // Header Component
    <Header
        isGradient={true}
        colors={['#6a11cb', '#2575fc']}
        isBack={true}
        title="Header Component Title Here"
        rightButtons={rightButtons}
        height={60}
        isShowShadow={true}
    />
    
    // Page Content
    <View style={{padding: 15}}>
        <Text
            style={{fontSize: 22, fontWeight: '500', marginBottom: 10,}}
        >
            Example Title
        </Text>

        <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </Text>
    </View>
</View>