{"id":4385,"url":"https://github.com/redbaron76/navbar-native","last_synced_at":"2025-06-24T15:37:33.962Z","repository":{"id":57151964,"uuid":"68228322","full_name":"redbaron76/navbar-native","owner":"redbaron76","description":"a fully customizable navbar component for React-Native","archived":false,"fork":false,"pushed_at":"2018-07-08T05:56:03.000Z","size":85,"stargazers_count":90,"open_issues_count":1,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T00:06:10.637Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redbaron76.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-14T17:33:46.000Z","updated_at":"2024-06-01T04:00:38.000Z","dependencies_parsed_at":"2022-09-03T18:41:08.848Z","dependency_job_id":null,"html_url":"https://github.com/redbaron76/navbar-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/redbaron76/navbar-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redbaron76%2Fnavbar-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redbaron76%2Fnavbar-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redbaron76%2Fnavbar-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redbaron76%2Fnavbar-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redbaron76","download_url":"https://codeload.github.com/redbaron76/navbar-native/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redbaron76%2Fnavbar-native/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261704377,"owners_count":23197153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:10.267Z","updated_at":"2025-06-24T15:37:33.944Z","avatar_url":"https://github.com/redbaron76.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Navigation"],"readme":"# NavbarNative\nA **fully customizable** Navbar component for React-Native.\n#### It works for both iOS and Android!\n\n![navbar-native-intro](https://cloud.githubusercontent.com/assets/1061849/18530527/3bdab2b6-7ad2-11e6-95e4-1774e625080d.png)\n\n![navbar-native-intro-android](https://cloud.githubusercontent.com/assets/1061849/18553248/0970cbd8-7b60-11e6-8b72-ec91f4d98671.png)\n\n### Content\n- [Installation](#installation)\n- [Exported components](#exported-components)\n- [Getting started](#getting-started)\n- [Images as title](#image-as-title)\n- [Transparent navbar](#transparent-navbar)\n- [Container API](#container-api)\n- [Navbar API](#navbar-api)\n- [Demo](#demo)\n\n### Installation\n```bash\nnpm i navbar-native --save\n```\n\n### Pay attention\nThis package depends on the beautiful [Vector Icons for React Native](https://github.com/oblador/react-native-vector-icons).\n\nAfter installing NavbarNative, in order to have **icons working**, please follow instructions about [HOW TO INSTALL AND LINK VECTOR ICONS](https://github.com/oblador/react-native-vector-icons) in your project.\n\n### Exported components\nThis package exports two main components:\n\n- **Container** - a container component to use as the first component in a __render()__ method. It accepts the \"Navbar\" component and the rest of the page content.\n- **Navbar** - the components which generates the bar on top.\n\n### Helper components\n\n- **Icon** - a Vector Icons for React Native wrapper\n\n### Getting started\nBasically, 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.\n\n#### Using icons\nIn order to use the correct set of icons, please use **ios-** prefix in _icon_ prop name for iOS and **md-** prefix for Android.\n\nThe following chunk of code shows a typical **iOS** NavbarNative usage:\n\n```js\nimport React, { Component } from 'react';\nimport { View } from 'react-native';\n\nimport { Container, Navbar } from 'navbar-native';\n\nclass ReactNativeProject extends Component {\n    render() {\n        return (\n            \u003cContainer\u003e\n                \u003cNavbar\n                    title={\"Navbar Native\"}\n                    left={{\n                        icon: \"ios-arrow-back\",\n                        label: \"Back\",\n                        onPress: () =\u003e {alert('Go back!')}\n                    }}\n                    right={[{\n                        icon: \"ios-search\",\n                        onPress: () =\u003e {alert('Search!')}\n                    },{\n                        icon: \"ios-menu\",\n                        onPress: () =\u003e {alert('Toggle menu!')}\n                    }]}\n                /\u003e\n                ... other stuff ...\n            \u003c/Container\u003e\n        );\n    }\n}\n```\n\n### Image as a title\n\n![image_list](https://cloud.githubusercontent.com/assets/1061849/18619404/6b15bb58-7dfb-11e6-917d-9c3ca6547f4f.png)\n\nYou can also use a **remote** or **local** image instead of the text title:\n\n```js\nclass ReactNativeEmpty extends Component {\n    render() {\n        return (\n            \u003cContainer type=\"list\" data={[\"first\", \"second\", \"third\"]}\u003e\n                \u003cNavbar\n                    user={true}\n                    image={{\n                        source:'https://facebook.github.io/react/img/logo_og.png',\n                        type: 'remote',\n                        resizeMode: 'cover',\n                        style: {width: 50, height: 44}\n                    }}\n                    statusBar={{\n                        style: \"default\",\n                        hideAnimation: Navbar.FADE,\n                        showAnimation: Navbar.SLIDE,\n                    }}\n                    left={{\n                        icon: \"ios-arrow-back\",\n                        label: \"Back\",\n                        onPress: () =\u003e {alert('Go back!')}\n                    }}\n                    right={[{\n                        icon: \"ios-search\",\n                        onPress: () =\u003e {alert('Search!')}\n                    },{\n                        icon: \"ios-menu\",\n                        onPress: () =\u003e {alert('Toggle menu!')}\n                    }]}\n                /\u003e\n            \u003c/Container\u003e\n        );\n    }\n}\n```\n\n### Image as background\n\n![image-background](https://cloud.githubusercontent.com/assets/1061849/18619959/0e4003b2-7e09-11e6-9ec5-d88a43b0ed2c.png)\n\nImages can be used in **background** also:\n\n```js\nclass ReactNativeEmpty extends Component {\n    render() {\n        return (\n            \u003cContainer type=\"list\" data={[\"first\", \"second\", \"third\"]}\u003e\n                \u003cNavbar\n                    user={true}\n                    title={\"Navbar Native\"}\n                    titleColor=\"white\"\n                    imageBackground={{\n                        source:'https://facebook.github.io/react/img/logo_og.png',\n                        type: 'remote',\n                        resizeMode: 'cover'\n                    }}\n                    statusBar={{\n                        style: \"light-content\",\n                        hideAnimation: Navbar.FADE,\n                        showAnimation: Navbar.SLIDE,\n                    }}\n                    left={{\n                        icon: \"ios-arrow-back\",\n                        iconColor: \"white\",\n                        label: \"Back\",\n                        onPress: () =\u003e {alert('Go back!')},\n                        style:{color: 'white'}\n                    }}\n                    right={[{\n                        icon: \"ios-search\",\n                        iconColor: \"white\",\n                        onPress: () =\u003e {alert('Search!')}\n                    },{\n                        icon: \"ios-menu\",\n                        iconColor: \"white\",\n                        onPress: () =\u003e {alert('Toggle menu!')}\n                    }]}\n                /\u003e\n            \u003c/Container\u003e\n        );\n    }\n}\n```\n\n### Transparent Navbar\n\nDo you need a **transparent** navbar and a full-page content beneath it? No problem! We've got you covered...\n\nJust set `bgColor=\"transparent\"` and `theme=\"dark\"` and you can achieve something like this:\n\n![transparent_navbar](https://cloud.githubusercontent.com/assets/1061849/18752282/39d75436-80e2-11e6-86a5-92c848446a6d.png)\n\n### Using badges\n\n![ios-badge](https://cloud.githubusercontent.com/assets/1061849/20268744/bd13b304-aa80-11e6-8628-73c49b6a9755.png)\n\n```js\nexport default class ReactNativeEmpty extends Component {\n    render() {\n\n        const left = {\n            role: 'menu',\n            badge: {\n                value: 4,\n                bgColor: '#ffcc00',\n                textColor: 'black'\n            }\n        };\n\n        return (\n            \u003cContainer\u003e\n                \u003cNavbar left={left} title={\"Title\"} /\u003e\n            \u003c/Container\u003e\n        );\n    }\n}\n```\n\n### Container API\n- **bgColor** - (String def. '#ffffff') - Background color for the Container, the one you see overscrolling\n- **data** - (Array of strings or Array of Objects opt.) - data source for ListView\n- **row** - (Function opt.) - A function that renders the single row element in ListView (accepts 'rowData', 'sectionID')\n- **style** - (Object opt.) - Custom styles for the container\n- **loading** - (Object opt.) - Prop to use in order to trigger the included loading screen [SPINNER INSTALLATION INSTRUCTIONS](https://github.com/maxs15/react-native-spinkit)\n  - **spinner** - (String def. 'ThreeBounce') - Type of spinner animation from [HERE](https://github.com/maxs15/react-native-spinkit)\n  - **spinnerColor** - (String def. '#ffffff') - Color of the spinner\n  - **spinnerSize** - (Number def. 50) - Size of the spinner\n  - **bgColor** - (String def. 'rgba(0,0,0,.8)') - Color to apply in the background\n  - **message** - (String opt.) - Loading text message to display\n  - **messageColor** - (String def. '#ffffff') - Color of the loading text message\n  - **styleContainer** - (Object opt.) - Additional style for the loading screen\n  - **styleText** - (Object opt.) - Additional style for the loading text\n- **type** - ('scroll' or 'list' def. 'scroll') - How to render Container children content\n- **height** - (Number def. screen height) - Set the height of the container\n\n### Navbar API\n- **theme** - ('light' or 'dark' - def. 'light' iOS / 'dark' Android) - Base theme for the NavigationBar\n- **title** - (String or Component opt.) - The title element. Component needs to be styled accordingly.\n- **titleColor** - (String opt.) - The title string color\n- **bgColor** - (String def. light: ios #f2f2f2 android #f5f5f5 dark: ios #2b2b2b android #212121 ) - NavigationBar's background color\n- **image** - (Object opt.) - Local/remote image instead of the title\n  - **source** - (require(String) for local or String for remote uri) - Local/remote image location\n  - **type** - ('local' or 'remote' def. 'local') - Origin of the image\n  - **resizeMode** - ('cover', 'contain', 'stretch', 'repeat', 'center' def. 'cover' local - 'contain' remote)\n  - **style** - (Object opt.) - Additional styles for image title\n- **imageBackground** - (Object opt.) - Local/remote image in navbar background\n  - **source** - (String) - Local/remote image location\n  - **type** - ('local' or 'remote' def. 'local') - Origin of the image\n  - **resizeMode** - ('cover', 'contain', 'stretch', 'repeat', 'center' def. 'cover')\n  - **style** - (Object opt.) - Additional styles for image background  \n- **statusBar** - (Object opt.):\n  - **style** - ('light-content' or 'default') - Style of StatusBar\n  - **hidden** - (Boolean) - Show or not StatusBar\n  - **bgColor** - (String) - StatusBar background color\n  - **animation** - (Boolean def. true) - Animation between StatusBar transitions\n  - **transition** - ('fade' or 'slide' def. 'fade') - Type of StatusBar transition animation when hiding it\n- **left / right** - (Object or Array of Objects or React component / return function):\n  - **icon** - (String opt.) - Vector Icon's icon name\n  - **iconFamily** - (String def. Ionicons) - Vector Icon's icon library\n  - **iconPos** - ('left' or 'right' def. left/right position) - Icon's position towards the label\n  - **iconSize** - (Number def. 30 ios - 28 android) - Icon's size\n  - **iconColor** - (String def. light: ios #387afe android #707070 dark: ios #ffffff android #ffffff ) - Icon's color\n  - **label** - (String opt.) - Button's label\n  - **badge** - (Number, String or Object opt.)\n    - **value** - (Number or String) - The value in the badge\n    - **bgColor** - (String opt.) - Badge background color\n    - **textColor** - (String opt.) - Badge text color\n    - **position** - ('left' or 'right' def. 'right') - Badge position in the button\n  - **onPress** - (Function) - onPress function handler\n  - **disabled** - (Boolean def. false) - It renders a button in a disabled status\n  - **role** - (String opt. - 'back' | 'close' | 'login' | 'menu') - Button's pre-defined aspect\n  - **style** - (Object opt.) - Button's override styles\n- **style** - (Object) - Custom styles for the navbar\n- **user** - (Object, Bool) - Authenticated user\n- **elevation** - (Number) - (Android-only) Elevation of the toolbar\n\n### Icon API\n- **family** - (String def. 'Ionicons') - Font family for icons\n- **name** - (String) - Name of the icon to show\n- **color** - (String def. iOS '#387afe' android '#707070') - Color of the icon\n\n### Demo\n\n[MeteorNative](https://github.com/redbaron76/MeteorNative) is a full featured **boilerplate** which brings together **React-Native** and **Meteor js**.\n\nIn this project I implement **navbar-native** in many ways and you can see in action specific usages of this package.\n\n![react-native-intro](https://cloud.githubusercontent.com/assets/1061849/18746036/5db45830-80c5-11e6-8222-1813798c8cd4.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredbaron76%2Fnavbar-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredbaron76%2Fnavbar-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredbaron76%2Fnavbar-native/lists"}