Home

Awesome

NavbarNative

A fully customizable Navbar component for React-Native.

It works for both iOS and Android!

navbar-native-intro

navbar-native-intro-android

Content

Installation

npm i navbar-native --save

Pay attention

This package depends on the beautiful Vector Icons for React Native.

After installing NavbarNative, in order to have icons working, please follow instructions about HOW TO INSTALL AND LINK VECTOR ICONS in your project.

Exported components

This package exports two main components:

Helper components

Getting started

Basically, the Navbar component accepts a title prop and left and/or right objects (or array of objects) which describe each button that the navbar has to render in the specific position.

Using icons

In order to use the correct set of icons, please use ios- prefix in icon prop name for iOS and md- prefix for Android.

The following chunk of code shows a typical iOS NavbarNative usage:

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

import { Container, Navbar } from 'navbar-native';

class ReactNativeProject extends Component {
    render() {
        return (
            <Container>
                <Navbar
                    title={"Navbar Native"}
                    left={{
                        icon: "ios-arrow-back",
                        label: "Back",
                        onPress: () => {alert('Go back!')}
                    }}
                    right={[{
                        icon: "ios-search",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
                ... other stuff ...
            </Container>
        );
    }
}

Image as a title

image_list

You can also use a remote or local image instead of the text title:

class ReactNativeEmpty extends Component {
    render() {
        return (
            <Container type="list" data={["first", "second", "third"]}>
                <Navbar
                    user={true}
                    image={{
                        source:'https://facebook.github.io/react/img/logo_og.png',
                        type: 'remote',
                        resizeMode: 'cover',
                        style: {width: 50, height: 44}
                    }}
                    statusBar={{
                        style: "default",
                        hideAnimation: Navbar.FADE,
                        showAnimation: Navbar.SLIDE,
                    }}
                    left={{
                        icon: "ios-arrow-back",
                        label: "Back",
                        onPress: () => {alert('Go back!')}
                    }}
                    right={[{
                        icon: "ios-search",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
            </Container>
        );
    }
}

Image as background

image-background

Images can be used in background also:

class ReactNativeEmpty extends Component {
    render() {
        return (
            <Container type="list" data={["first", "second", "third"]}>
                <Navbar
                    user={true}
                    title={"Navbar Native"}
                    titleColor="white"
                    imageBackground={{
                        source:'https://facebook.github.io/react/img/logo_og.png',
                        type: 'remote',
                        resizeMode: 'cover'
                    }}
                    statusBar={{
                        style: "light-content",
                        hideAnimation: Navbar.FADE,
                        showAnimation: Navbar.SLIDE,
                    }}
                    left={{
                        icon: "ios-arrow-back",
                        iconColor: "white",
                        label: "Back",
                        onPress: () => {alert('Go back!')},
                        style:{color: 'white'}
                    }}
                    right={[{
                        icon: "ios-search",
                        iconColor: "white",
                        onPress: () => {alert('Search!')}
                    },{
                        icon: "ios-menu",
                        iconColor: "white",
                        onPress: () => {alert('Toggle menu!')}
                    }]}
                />
            </Container>
        );
    }
}

Transparent Navbar

Do you need a transparent navbar and a full-page content beneath it? No problem! We've got you covered...

Just set bgColor="transparent" and theme="dark" and you can achieve something like this:

transparent_navbar

Using badges

ios-badge

export default class ReactNativeEmpty extends Component {
    render() {

        const left = {
            role: 'menu',
            badge: {
                value: 4,
                bgColor: '#ffcc00',
                textColor: 'black'
            }
        };

        return (
            <Container>
                <Navbar left={left} title={"Title"} />
            </Container>
        );
    }
}

Container API

Navbar API

Icon API

Demo

MeteorNative is a full featured boilerplate which brings together React-Native and Meteor js.

In this project I implement navbar-native in many ways and you can see in action specific usages of this package.

react-native-intro