rn-system-bar 1.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +267 -0
- package/android/build.gradle +47 -48
- package/android/src/main/java/com/systembar/SystemBarModule.kt +361 -0
- package/android/src/main/java/com/systembar/SystemBarPackage.kt +21 -0
- package/index.ts +6 -25
- package/ios/SystemBarModule.m +41 -0
- package/ios/SystemBarModule.swift +145 -0
- package/package.json +28 -6
- package/rn-system-bar.podspec +23 -0
- package/specs/NativeSystemBar.ts +39 -0
- package/src/SystemBar.ts +236 -0
- package/src/types.ts +70 -0
- package/android/gradle.properties +0 -2
- package/android/src/main/AndroidManifest.xml +0 -4
- package/android/src/main/java/com/systemnavigationbar/SystemNavigationBarModule.kt +0 -137
- package/android/src/main/java/com/systemnavigationbar/SystemNavigationBarPackage.kt +0 -22
- package/types.ts +0 -3
package/README.md
ADDED
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
# rn-system-bar v3
|
|
2
|
+
|
|
3
|
+
> Control Android & iOS system bars, brightness, volume, orientation and screen flags from React Native.
|
|
4
|
+
|
|
5
|
+
Supports **React Native CLI · Expo Dev Client · TypeScript · New Architecture (TurboModules)**
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install rn-system-bar
|
|
13
|
+
# or
|
|
14
|
+
yarn add rn-system-bar
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**iOS** (after install):
|
|
18
|
+
```bash
|
|
19
|
+
cd ios && pod install
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Android**: Auto-linked. No manual steps required.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 🏗 Architecture
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
React Native App
|
|
30
|
+
│
|
|
31
|
+
▼
|
|
32
|
+
rn-system-bar (TypeScript API + Platform guard)
|
|
33
|
+
│
|
|
34
|
+
├─ Android ──► SystemBarModule.kt ──► Android SDK APIs
|
|
35
|
+
│ ├ WindowInsetsController (API 30+)
|
|
36
|
+
│ ├ AudioManager
|
|
37
|
+
│ └ ActivityInfo
|
|
38
|
+
│
|
|
39
|
+
└─ iOS ──────► SystemBarModule.swift ──► UIKit / AVFoundation
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 📁 Folder Structure
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
rn-system-bar/
|
|
48
|
+
├ package.json
|
|
49
|
+
├ index.ts
|
|
50
|
+
├ rn-system-bar.podspec
|
|
51
|
+
│
|
|
52
|
+
├ src/
|
|
53
|
+
│ ├ SystemBar.ts ← JS/TS API (Platform-guarded)
|
|
54
|
+
│ └ types.ts ← All TypeScript types
|
|
55
|
+
│
|
|
56
|
+
├ specs/
|
|
57
|
+
│ └ NativeSystemBar.ts ← TurboModule spec (New Architecture)
|
|
58
|
+
│
|
|
59
|
+
├ android/
|
|
60
|
+
│ ├ build.gradle
|
|
61
|
+
│ └ src/main/java/com/systembar/
|
|
62
|
+
│ ├ SystemBarModule.kt ← Full Android native module
|
|
63
|
+
│ └ SystemBarPackage.kt
|
|
64
|
+
│
|
|
65
|
+
└ ios/
|
|
66
|
+
├ SystemBarModule.swift ← iOS native module
|
|
67
|
+
└ SystemBarModule.m ← ObjC bridge header
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🚀 API Reference
|
|
73
|
+
|
|
74
|
+
### Navigation Bar — `Android only`
|
|
75
|
+
|
|
76
|
+
> All `NavigationBar` APIs are automatically guarded with `Platform.OS === "android"`.
|
|
77
|
+
> Calling them on iOS prints a dev warning and is a no-op — no crash.
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import {
|
|
81
|
+
setNavigationBarColor,
|
|
82
|
+
setNavigationBarVisibility,
|
|
83
|
+
setNavigationBarButtonStyle,
|
|
84
|
+
setNavigationBarStyle,
|
|
85
|
+
setNavigationBarBehavior,
|
|
86
|
+
} from "rn-system-bar";
|
|
87
|
+
|
|
88
|
+
setNavigationBarColor("#1a1a2e"); // hex color
|
|
89
|
+
setNavigationBarVisibility("hidden"); // "visible" | "hidden"
|
|
90
|
+
setNavigationBarButtonStyle("light"); // "light" | "dark"
|
|
91
|
+
setNavigationBarStyle("dark"); // "auto" | "inverted" | "light" | "dark"
|
|
92
|
+
setNavigationBarBehavior("overlay-swipe"); // "overlay-swipe" | "inset-swipe" | "inset-touch"
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
### Status Bar
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
import {
|
|
101
|
+
setStatusBarColor,
|
|
102
|
+
setStatusBarStyle,
|
|
103
|
+
setStatusBarVisibility,
|
|
104
|
+
} from "rn-system-bar";
|
|
105
|
+
|
|
106
|
+
setStatusBarColor("#000000"); // Android only (iOS ignores bg color)
|
|
107
|
+
setStatusBarStyle("light"); // "light" | "dark" — works on both platforms
|
|
108
|
+
setStatusBarVisibility(false); // hide status bar
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
### Brightness
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import { setBrightness, getBrightness } from "rn-system-bar";
|
|
117
|
+
|
|
118
|
+
setBrightness(0.8); // 0.0 – 1.0
|
|
119
|
+
|
|
120
|
+
const level = await getBrightness(); // returns 0.0 – 1.0
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
### Volume
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import { setVolume, getVolume, setVolumeHUDVisible } from "rn-system-bar";
|
|
129
|
+
|
|
130
|
+
setVolumeHUDVisible(false); // hide the system volume popup (Android)
|
|
131
|
+
setVolume(0.5, "music"); // 0.0 – 1.0, stream: "music" | "ring" | "notification" | "alarm" | "system"
|
|
132
|
+
|
|
133
|
+
const vol = await getVolume("music"); // returns 0.0 – 1.0
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
> **iOS note**: `setVolume()` is a no-op on iOS (Apple restriction). `getVolume()` works.
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
### Screen
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
import { keepScreenOn, immersiveMode } from "rn-system-bar";
|
|
144
|
+
|
|
145
|
+
keepScreenOn(true); // prevent sleep
|
|
146
|
+
immersiveMode(true); // hide status + nav bar (Android only)
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### Orientation
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
import { setOrientation } from "rn-system-bar";
|
|
155
|
+
|
|
156
|
+
setOrientation("portrait"); // lock portrait
|
|
157
|
+
setOrientation("landscape"); // lock landscape
|
|
158
|
+
setOrientation("landscape-left"); // specific side
|
|
159
|
+
setOrientation("landscape-right");
|
|
160
|
+
setOrientation("auto"); // unlock — sensor-driven
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## 📱 Full Example
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import React, { useEffect } from "react";
|
|
169
|
+
import { View, Button, Platform } from "react-native";
|
|
170
|
+
import * as SystemBar from "rn-system-bar";
|
|
171
|
+
|
|
172
|
+
export default function App() {
|
|
173
|
+
|
|
174
|
+
useEffect(() => {
|
|
175
|
+
// Works on both platforms
|
|
176
|
+
SystemBar.setStatusBarStyle("light");
|
|
177
|
+
SystemBar.setBrightness(0.9);
|
|
178
|
+
SystemBar.keepScreenOn(true);
|
|
179
|
+
|
|
180
|
+
// Android-only (auto-guarded — safe to call without Platform check)
|
|
181
|
+
SystemBar.setNavigationBarColor("#000000");
|
|
182
|
+
SystemBar.setNavigationBarButtonStyle("light");
|
|
183
|
+
SystemBar.setNavigationBarBehavior("overlay-swipe");
|
|
184
|
+
}, []);
|
|
185
|
+
|
|
186
|
+
return (
|
|
187
|
+
<View>
|
|
188
|
+
<Button
|
|
189
|
+
title="Immersive Mode"
|
|
190
|
+
onPress={() => SystemBar.immersiveMode(true)}
|
|
191
|
+
/>
|
|
192
|
+
<Button
|
|
193
|
+
title="Landscape"
|
|
194
|
+
onPress={() => SystemBar.setOrientation("landscape")}
|
|
195
|
+
/>
|
|
196
|
+
<Button
|
|
197
|
+
title="Get Brightness"
|
|
198
|
+
onPress={async () => {
|
|
199
|
+
const b = await SystemBar.getBrightness();
|
|
200
|
+
console.log("Brightness:", b);
|
|
201
|
+
}}
|
|
202
|
+
/>
|
|
203
|
+
</View>
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## 🆕 New Architecture (TurboModules)
|
|
211
|
+
|
|
212
|
+
Add to your `react-native.config.js`:
|
|
213
|
+
|
|
214
|
+
```js
|
|
215
|
+
module.exports = {
|
|
216
|
+
dependencies: {
|
|
217
|
+
"rn-system-bar": {
|
|
218
|
+
platforms: {
|
|
219
|
+
android: {
|
|
220
|
+
packageImportPath: "import com.systembar.SystemBarPackage;",
|
|
221
|
+
},
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
},
|
|
225
|
+
};
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
The `specs/NativeSystemBar.ts` file is already configured for codegen via `codegenConfig` in `package.json`.
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
## 🔖 Type Reference
|
|
233
|
+
|
|
234
|
+
```ts
|
|
235
|
+
type NavigationBarBehavior = "overlay-swipe" | "inset-swipe" | "inset-touch";
|
|
236
|
+
type NavigationBarButtonStyle = "light" | "dark";
|
|
237
|
+
type NavigationBarStyle = "auto" | "inverted" | "light" | "dark";
|
|
238
|
+
type NavigationBarVisibility = "visible" | "hidden";
|
|
239
|
+
type StatusBarStyle = "light" | "dark";
|
|
240
|
+
type Orientation = "portrait" | "landscape" | "landscape-left" | "landscape-right" | "auto";
|
|
241
|
+
type VolumeStream = "music" | "ring" | "notification" | "alarm" | "system";
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
---
|
|
245
|
+
|
|
246
|
+
## 📋 Platform Support Matrix
|
|
247
|
+
|
|
248
|
+
| Feature | Android | iOS |
|
|
249
|
+
|----------------------------|:-------:|:---:|
|
|
250
|
+
| setNavigationBarColor | ✅ | ❌ |
|
|
251
|
+
| setNavigationBarVisibility | ✅ | ❌ |
|
|
252
|
+
| setNavigationBarButtonStyle| ✅ | ❌ |
|
|
253
|
+
| setNavigationBarStyle | ✅ | ❌ |
|
|
254
|
+
| setNavigationBarBehavior | ✅ | ❌ |
|
|
255
|
+
| setStatusBarColor | ✅ | ❌ |
|
|
256
|
+
| setStatusBarStyle | ✅ | ✅ |
|
|
257
|
+
| setStatusBarVisibility | ✅ | ✅ |
|
|
258
|
+
| setBrightness | ✅ | ✅ |
|
|
259
|
+
| getBrightness | ✅ | ✅ |
|
|
260
|
+
| setVolume | ✅ | ❌* |
|
|
261
|
+
| getVolume | ✅ | ✅ |
|
|
262
|
+
| setVolumeHUDVisible | ✅ | ❌ |
|
|
263
|
+
| keepScreenOn | ✅ | ✅ |
|
|
264
|
+
| immersiveMode | ✅ | ❌ |
|
|
265
|
+
| setOrientation | ✅ | ✅ |
|
|
266
|
+
|
|
267
|
+
> *iOS: `setVolume` is a no-op due to Apple restrictions.
|
package/android/build.gradle
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
apply plugin: "
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
1
|
+
// ─────────────────────────────────────────────
|
|
2
|
+
// rn-system-bar · android/build.gradle
|
|
3
|
+
// ─────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
buildscript {
|
|
6
|
+
ext.kotlin_version = "1.9.0"
|
|
7
|
+
repositories {
|
|
8
|
+
google()
|
|
9
|
+
mavenCentral()
|
|
10
|
+
}
|
|
11
|
+
dependencies {
|
|
12
|
+
classpath "com.android.tools.build:gradle:8.1.1"
|
|
13
|
+
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
apply plugin: "com.android.library"
|
|
18
|
+
apply plugin: "kotlin-android"
|
|
19
|
+
|
|
20
|
+
android {
|
|
21
|
+
compileSdkVersion 34
|
|
22
|
+
namespace "com.systembar"
|
|
23
|
+
|
|
24
|
+
defaultConfig {
|
|
25
|
+
minSdkVersion 21
|
|
26
|
+
targetSdkVersion 34
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
compileOptions {
|
|
30
|
+
sourceCompatibility JavaVersion.VERSION_17
|
|
31
|
+
targetCompatibility JavaVersion.VERSION_17
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
kotlinOptions {
|
|
35
|
+
jvmTarget = "17"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
repositories {
|
|
40
|
+
google()
|
|
41
|
+
mavenCentral()
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
dependencies {
|
|
45
|
+
implementation "com.facebook.react:react-native:+"
|
|
46
|
+
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
|
|
47
|
+
}
|