# react-native-breadcrumb-navigation

> A basic react-native breadcrumb component library for both Android and ios. The component accounts for any number of trails that you input as an array to 'trailData' prop. The component is also dynamic and can handle for custom background colour, fontSize

Latest version **1.0.4** (published 2020-07-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-breadcrumb-navigation
pnpm add react-native-breadcrumb-navigation
yarn add react-native-breadcrumb-navigation
bun add react-native-breadcrumb-navigation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-07-26 |
| First published | 2020-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marcus Lee Eugene |
| Maintainers | marcusleeeugene |
| Keywords | react native breadcrumb, react native breadcrumb navigation, breadcrumb, breadcrumb navigation |

## Links

- npm: https://www.npmjs.com/package/react-native-breadcrumb-navigation
- Repository: https://github.com/marcusleeeugene/react-native-breadcrumb-navigation
- Homepage: https://github.com/marcusleeeugene/react-native-breadcrumb-navigation#readme
- Issues: https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/issues
- npm.io page: https://npm.io/package/react-native-breadcrumb-navigation

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-07-26
- 1.0.3 — 2020-07-26
- 1.0.2 — 2020-07-26
- 1.0.1 — 2020-07-26
- 1.0.0 — 2020-07-26

## README

# react-native-breadcrumb-navigation [![npm version](https://badge.fury.io/js/react-native-breadcrumb-navigation.svg)](https://badge.fury.io/js/react-native-breadcrumb-navigation)
A basic react-native breadcrumb component library for both Android and ios. The component accounts for any number of trails that you input as an array to 'trailData' prop. The component is also dynamic and can handle for custom background colour, fontSize, fontColour, container height, top position from status bar, textSpacing.

## Basic Example:
A basic example where you can see the change in the breadcrumb trail. [Source Code](https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/blob/master/examples/Basic/App.js)
<p align="center">
  <img align="center" src="https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/blob/master/examples/Basic/Basic%20Example.gif?raw=true" height="600">
</p>

## React Navigation Example:
 An example using react navigation. Clicking on each breadcrumb trail will navigate user to destination screens. [Source Code](https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/tree/master/examples/ReactNavigation/screens)
 <p align="center">
   <img align="center" src="https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/blob/master/examples/ReactNavigation/React%20Navigation%20Example.gif?raw=true" height="600">
 </p>

## Installation
Installing with Npm:
```
npm i react-native-breadcrumb-navigation
```

## Usage
```js
import BreadCrumb from 'react-native-breadcrumb-navigation';

<BreadCrumb
    trailData={['Home', 'Explore', 'Message', 'Settings']}
    selectedIndex={0}
    onPress={updateSelection}
    backgroundColor={'#2196f3'}
    fontColor={'#000000'}
    fontSize={15}
    height={'10%'}
    top={'24%'}
    textSpacing={'4%'}
/>
 ```
## Props
| Name | Type | Description
| ------------- | ------------- | ------------- |
| trailData | Array | Array of destination trails for BreadCrumb  |
| selectedIndex | int | indicates selected crumb where index starts from 0 |
| onPress | Function | Returns selected crumb index |
| backgroundColor | String | Background colour of BreadCrumb where you may also set to 'transparent' if preferred |
| fontColor | String | Colour of font  |
| fontSize | int | Size of font |
| height | String | Height of container for BreadCrumb |
| top | String | Position of BreadCrumb from Status Bar |
| textSpacing | String | Spacing between each crumb text |

## License
react-native-breadcrumb-navigation is [MIT Licensed](https://github.com/marcusleeeugene/react-native-breadcrumb-navigation/LICENSE.txt)

---
_Source: https://npm.io/package/react-native-breadcrumb-navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._