Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zoontek/react-native-bars

Components to control your app status and navigation bars.
https://github.com/zoontek/react-native-bars

navigation-bar react react-native status-bar

Last synced: 2 days ago
JSON representation

Components to control your app status and navigation bars.

Host: GitHub
URL: https://github.com/zoontek/react-native-bars
Owner: zoontek
License: mit
Created: 2021-11-13T00:36:28.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-09-14T14:32:28.000Z (19 days ago)
Last Synced: 2024-09-15T04:24:01.609Z (18 days ago)
Topics: navigation-bar, react, react-native, status-bar
Language: TypeScript
Homepage:
Size: 4.58 MB
Stars: 292
Watchers: 3
Forks: 16
Open Issues: 3
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        # ➖ react-native-bars

Components to control your app status and navigation bars.


Inspired by the built-in `StatusBar` module and [react-native-transparent-status-and-navigation-bar](https://github.com/MoOx/react-native-transparent-status-and-navigation-bar) by [@MoOx](https://github.com/MoOx) (Thanks to them 💖).

[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/zoontek/react-native-bars/blob/main/LICENSE)

[![npm version](https://img.shields.io/npm/v/react-native-bars?style=for-the-badge)](https://www.npmjs.org/package/react-native-bars)

[![npm downloads](https://img.shields.io/npm/dt/react-native-bars.svg?label=downloads&style=for-the-badge)](https://www.npmjs.org/package/react-native-bars)




[![platform - android](https://img.shields.io/badge/platform-Android-3ddc84.svg?logo=android&style=for-the-badge)](https://www.android.com)

[![platform - ios](https://img.shields.io/badge/platform-iOS-000.svg?logo=apple&style=for-the-badge)](https://developer.apple.com/ios)






  



## Support

This library follows the React Native [releases support policy](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md).


It is supporting the **latest version**, and the **two previous minor series**.

## Installation

```bash

$ npm install --save react-native-bars

# --- or ---

$ yarn add react-native-bars

```

## Recommendations

This module will works best with:

- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context): A library to handle safe area insets and avoid drawing below status and navigation bars.

## Setup

ℹ️ For `react-native` < `0.70` setup, use latest v1 and follow [this README](https://github.com/zoontek/react-native-bars/blob/1.1.2/README.md).

### Android

1. Edit your `android/app/src/main/java/com/yourprojectname/MainActivity.{java,kt}` file:

_📍 If you want to disable keyboard handling, use `RNBars.init(this, false)` + an external keyboard handling library like [`react-native-keyboard-controller`](https://github.com/kirillzyusko/react-native-keyboard-controller) or [`react-native-avoid-softinput`](https://github.com/mateusz1913/react-native-avoid-softinput)._

```java

// Java (react-native < 0.73)

// …

// Add these required imports:

import android.os.Bundle;

import com.zoontek.rnbars.RNBars;

public class MainActivity extends ReactActivity {

  // …

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState); // super.onCreate(null) with react-native-screens

    RNBars.init(this); // initialize react-native-bars

  }

}

```

```kotlin

// Kotlin (react-native >= 0.73)

// …

// Add these required imports:

import android.os.Bundle

import com.zoontek.rnbars.RNBars

class MainActivity : ReactActivity() { {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) // super.onCreate(null) with react-native-screens

    RNBars.init(this) // initialize react-native-bars

  }

}

```

2. Edit your `android/app/src/main/res/values/styles.xml` file:


```xml

  

  

    <!-- … -->

    <!-- optional, used to enforce the initial bars styles -->

    <!-- default is true in light mode, false in dark mode -->

    <item name="darkContentBarsStyle">true</item>

  

```

## iOS

To set the initial status bar style, go to **Xcode > General > Deployment Info**:

![Xcode setup](https://raw.githubusercontent.com/zoontek/react-native-bars/HEAD/docs/xcode_setup.png?raw=true)

## Usage

```tsx

import { NavigationBar, StatusBar, SystemBars } from "react-native-bars";

const App = () => {

  return (

    <>

      

      

      {/* Or, to update both with one component: */}

      

    >

  );

};

```

## API

### ``

A component to control your app status bar.

```tsx

import { StatusBar } from "react-native-bars";

type StatusBarProps = {

  // Should transition between status bar property changes be animated? (has no effect on Android)

  animated?: boolean;

  // Sets the color of the status bar content

  barStyle: "light-content" | "dark-content";

};

const App = () => (

  <>

    

    {/* … */}

  >

);

```

#### StatusBar.pushStackEntry

```ts

const entry: StatusBarProps = StatusBar.pushStackEntry(

  props /*: StatusBarProps*/,

);

```

#### StatusBar.popStackEntry

```ts

StatusBar.popStackEntry(entry/*: StatusBarProps*/): void;

```

#### StatusBar.replaceStackEntry

```ts

const entry: StatusBarProps = StatusBar.replaceStackEntry(

  entry /*: StatusBarProps*/,

  props /*: StatusBarProps*/,

);

```

---

### ``

A component to control your app navigation bar. It has no effect on iOS and Android < 8.1.

```tsx

import { NavigationBar } from "react-native-bars";

type NavigationBarProps = {

  // Sets the color of the navigation bar content

  barStyle: "light-content" | "dark-content";

};

const App = () => (

  <>

    

    {/* … */}

  >

);

```

#### NavigationBar.pushStackEntry

```ts

const entry: NavigationBarProps = NavigationBar.pushStackEntry(

  props /*: NavigationBarProps*/,

);

```

#### NavigationBar.popStackEntry

```ts

NavigationBar.popStackEntry(entry/*: NavigationBarProps*/): void;

```

#### NavigationBar.replaceStackEntry

```ts

const entry: NavigationBarProps = NavigationBar.replaceStackEntry(

  entry /*: NavigationBarProps*/,

  props /*: NavigationBarProps*/,

);

```

---

### ``

A component to control both your app status and navigation bars.

```tsx

import { SystemBars } from "react-native-bars";

type SystemBarsProps = {

  // Should transition between bars property changes be animated? (has no effect on Android)

  animated?: boolean;

  // Sets the color of the bars content

  barStyle: "light-content" | "dark-content";

};

const App = () => (

  <>

    

    {/* … */}

  >

);

```

## Sponsors

This module is provided **as is**, I work on it in my free time.

If you or your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for **premium** enterprise support: help with issues, prioritize bugfixes, feature requests, etc.