# react-native-ios-tab-bar

> Package provides a custom component for integrating the native tab bar of iOS into your React Native app

Latest version **1.0.4** (published 2023-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-ios-tab-bar
pnpm add react-native-ios-tab-bar
yarn add react-native-ios-tab-bar
bun add react-native-ios-tab-bar
```

## 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 | 2023-08-23 |
| First published | 2023-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 604.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sezgi Altan |
| Maintainers | szqii |
| Keywords | react-native, react-native-tab-bar, react-native-ios-tab-bar, ios, tab-bar, cupertino-tab-bar |

## Links

- npm: https://www.npmjs.com/package/react-native-ios-tab-bar
- Repository: https://github.com/Szqii/react-native-tab-bar
- Homepage: https://github.com/Szqii/react-native-tab-bar#readme
- Issues: https://github.com/Szqii/react-native-tab-bar/issues
- npm.io page: https://npm.io/package/react-native-ios-tab-bar

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-native](https://npm.io/package/react-native.md) ^0.72.4
- [mobx-react-lite](https://npm.io/package/mobx-react-lite.md) ^4.0.3
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^3.4.2

## Recent versions

- 1.0.4 (latest) — 2023-08-23
- 1.0.3 — 2023-08-22
- 1.0.2 — 2023-08-22
- 1.0.1 — 2023-08-22
- 1.0.0 — 2023-08-22

## README

# React Native iOS Native Tab Bar


![example](./example.gif)
![example-2](./example-2.gif)


This package provides a custom component for integrating the native tab bar of iOS into your React Native app. With this
package, you can achieve a seamless native tab navigation experience in the iOS version of your application.

## Features

- Integrate iOS's default tab bar into your React Native project.
- Customize the appearance with easy configuration options.
- Ability to customize icons and text for each tab.

## Installation

- Using NPM

   ```shell
  npm install react-native-ios-tab-bar
   ```

## Usage

1. Import the components into your project
   ```js
   import { RNTabBar, RNTabBarOption } from "react-native-ios-tab-bar";
   ```
2. Use the component in your project
   ```js
       // Within your render function
       // Wrap options with RNTabBar
       <RNTabBar>  
   
         <RNTabBarOption>
             <Text>Option1</Text>  
         </RNTabBarOption>  
         
         <RNTabBarOption>  
             <Text>Option2</Text>  
         </RNTabBarOption>  
         
       </RNTabBar>
   ```

## API

***Note: None of the options are mandatory!***

### Tab Bar

| Option                  | *Type*                      |
|-------------------------|-----------------------------|
| **activeIndex**         | *number*                    |
| **onActiveIndexChange** | *( index: number ) => void* |
| **activeColor**         | *string*                    |
| **backgroundColor**     | *string*                    |
| **width**               | *number*                    |
| **height**              | *number*                    |
| **borderRadius**        | *number*                    |
| **padding**             | *number*                    |

### Tab Bar Option

| Option             | *Type*                          |
|--------------------|---------------------------------|
| **index**          | *number*                        |
| **activeIndex**    | *number*                        |
| **onActiveChange** | *( isActive: boolean ) => void* |
| **onActive**       | *( ) => void*                   |
| **onPress**        | *( ) => void*                   |

## Contributing

All contributions are welcome.
If you would like to contribute to this project, feel free to submit pull requests.
Prior to making significant changes, I recommend opening an issue to discuss the changes.

## License

This project is licensed under the MIT license. For more information, refer to the `LICENSE` file.

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