https://github.com/csath/react-native-breadcrumb
A react-native breadcrumb for both android and ios.
https://github.com/csath/react-native-breadcrumb
android breadcrumbs ios react-native reactjs
Last synced: 10 months ago
JSON representation
A react-native breadcrumb for both android and ios.
- Host: GitHub
- URL: https://github.com/csath/react-native-breadcrumb
- Owner: csath
- License: mit
- Created: 2017-12-03T07:33:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:42:43.000Z (over 3 years ago)
- Last Synced: 2025-07-26T13:42:14.170Z (11 months ago)
- Topics: android, breadcrumbs, ios, react-native, reactjs
- Language: JavaScript
- Size: 82.8 MB
- Stars: 10
- Watchers: 1
- Forks: 11
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-breadcrumb [](https://badge.fury.io/js/react-native-breadcrumb)
A react-native breadcrumb for both android and ios. You can define any number of crumbs and this will automatically adjust according to the wrapped view's width. If you need you can change the selected crumb by tapping on a crumb(should be activated by passing 'true' to isTouchable prop).
# Demo

# Installation
```
yarn add react-native-breadcrumb
```
or
```
npm install --save react-native-breadcrumb
```
# Usage
```js
import Breadcrumb from 'react-native-breadcrumb';
{}}
borderRadius={5}
/>
```
# Prop-types
| Prop name |Type |
| ------------- | ------------- |
| entities | list - list of names for crumbs |
| flowDepth | int - indicates selected crumb indexing from 0 |
| isTouchable | boolean - identify if crumbs are touchable |
| onCrumbPress | function - this returns the selected crumbs index and is required if isTouchable is 'true' |
| borderRadius | int - radius of the container |
| crumbsContainerStyle | object - styles for view |
| crumbStyle | object - styles for view |
| activeCrumbStyle | object - styles for view |
| crumbTextStyle | object - styles for Text |
| activeCrumbTextStyle | object - styles for view |
| height | int - indicates the height in pixels |
# Example
checkout sample directory and findout a react-native app.
```
react-native run-android
```
or
```
react-native run-ios
```