diff --git a/doric-demo/src/StatusBarDemo.ts b/doric-demo/src/StatusBarDemo.ts
new file mode 100644
index 00000000..5318082e
--- /dev/null
+++ b/doric-demo/src/StatusBarDemo.ts
@@ -0,0 +1,83 @@
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, IText, statusbar, StatusBarMode } from "doric";
+import { title, label, colors } from "./utils";
+
+@Entry
+class StatusBarDemo extends Panel {
+    build(rootView: Group): void {
+        scroller(vlayout([
+            title("StatusBar Demo"),
+            label('show').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just(),
+                onClick: () => {
+                    statusbar(context).setHidden(false)
+                }
+            } as IText),
+            label('hide').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just(),
+                onClick: () => {
+                    statusbar(context).setHidden(true)
+                }
+            } as IText),
+            label('light').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just().configMargin({top: 30}),
+                onClick: () => {
+                    statusbar(context).setMode(StatusBarMode.LIGHT)
+                }
+            } as IText),
+            label('dark').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just(),
+                onClick: () => {
+                    statusbar(context).setMode(StatusBarMode.DARK)
+                }
+            } as IText),
+            label('white').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just().configMargin({top: 30}),
+                onClick: () => {
+                    statusbar(context).setColor(Color.parse("#ffffff"))
+                }
+            } as IText),
+            label('black').apply({
+                width: 200,
+                height: 50,
+                backgroundColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().just(),
+                onClick: () => {
+                    statusbar(context).setColor(Color.parse("#000000"))
+                }
+            } as IText),
+        ]).apply({
+            layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
+            gravity: gravity().center(),
+            space: 10,
+        } as IVLayout)).apply({
+            layoutConfig: layoutConfig().most(),
+        }).in(rootView)
+    }
+}
\ No newline at end of file
diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index a6274638..176d2f79 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -2146,6 +2146,24 @@ function notification(context) {
     };
 }
 
+(function (StatusBarMode) {
+    StatusBarMode[StatusBarMode["LIGHT"] = 0] = "LIGHT";
+    StatusBarMode[StatusBarMode["DARK"] = 1] = "DARK";
+})(exports.StatusBarMode || (exports.StatusBarMode = {}));
+function statusbar(context) {
+    return {
+        setHidden: (hidden) => {
+            return context.statusbar.setHidden({ hidden });
+        },
+        setMode: (mode) => {
+            return context.statusbar.setMode({ mode });
+        },
+        setColor: (color) => {
+            return context.statusbar.setColor({ color: color.toModel() });
+        },
+    };
+}
+
 class Observable {
     constructor(provider, clz) {
         this.observers = new Set;
@@ -2299,6 +2317,7 @@ exports.scroller = scroller;
 exports.slideItem = slideItem;
 exports.slider = slider;
 exports.stack = stack;
+exports.statusbar = statusbar;
 exports.storage = storage;
 exports.take = take;
 exports.takeAlso = takeAlso;
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index 86557468..62dc21fe 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -3605,6 +3605,24 @@ function notification(context) {
     };
 }
 
+(function (StatusBarMode) {
+    StatusBarMode[StatusBarMode["LIGHT"] = 0] = "LIGHT";
+    StatusBarMode[StatusBarMode["DARK"] = 1] = "DARK";
+})(exports.StatusBarMode || (exports.StatusBarMode = {}));
+function statusbar(context) {
+    return {
+        setHidden: (hidden) => {
+            return context.statusbar.setHidden({ hidden });
+        },
+        setMode: (mode) => {
+            return context.statusbar.setMode({ mode });
+        },
+        setColor: (color) => {
+            return context.statusbar.setColor({ color: color.toModel() });
+        },
+    };
+}
+
 class Observable {
     constructor(provider, clz) {
         this.observers = new Set;
@@ -3864,6 +3882,7 @@ exports.scroller = scroller;
 exports.slideItem = slideItem;
 exports.slider = slider;
 exports.stack = stack;
+exports.statusbar = statusbar;
 exports.storage = storage;
 exports.take = take;
 exports.takeAlso = takeAlso;
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index ba026d10..550e8725 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -66,6 +66,7 @@ declare module 'doric/lib/src/native/index.native' {
     export * from 'doric/lib/src/native/popover';
     export * from 'doric/lib/src/native/animate';
     export * from 'doric/lib/src/native/notification';
+    export * from 'doric/lib/src/native/statusbar';
 }
 
 declare module 'doric/lib/src/util/index.util' {
@@ -816,6 +817,20 @@ declare module 'doric/lib/src/native/notification' {
     };
 }
 
+declare module 'doric/lib/src/native/statusbar' {
+    import { BridgeContext } from "doric/lib/src/runtime/global";
+    import { Color } from "doric/lib/src/util/color";
+    export enum StatusBarMode {
+        LIGHT = 0,
+        DARK = 1
+    }
+    export function statusbar(context: BridgeContext): {
+        setHidden: (hidden: boolean) => Promise<any>;
+        setMode: (mode: StatusBarMode) => Promise<any>;
+        setColor: (color: Color) => Promise<any>;
+    };
+}
+
 declare module 'doric/lib/src/util/color' {
     import { Modeling } from "doric/lib/src/util/types";
     /**
diff --git a/doric-js/lib/src/native/index.native.d.ts b/doric-js/lib/src/native/index.native.d.ts
index c4c27466..581d2e5a 100644
--- a/doric-js/lib/src/native/index.native.d.ts
+++ b/doric-js/lib/src/native/index.native.d.ts
@@ -6,3 +6,4 @@ export * from './storage';
 export * from './popover';
 export * from './animate';
 export * from './notification';
+export * from './statusbar';
diff --git a/doric-js/lib/src/native/index.native.js b/doric-js/lib/src/native/index.native.js
index fe806418..8feef678 100644
--- a/doric-js/lib/src/native/index.native.js
+++ b/doric-js/lib/src/native/index.native.js
@@ -21,3 +21,4 @@ export * from './storage';
 export * from './popover';
 export * from './animate';
 export * from './notification';
+export * from './statusbar';
diff --git a/doric-js/lib/src/native/statusbar.d.ts b/doric-js/lib/src/native/statusbar.d.ts
new file mode 100644
index 00000000..e8628301
--- /dev/null
+++ b/doric-js/lib/src/native/statusbar.d.ts
@@ -0,0 +1,11 @@
+import { BridgeContext } from "../runtime/global";
+import { Color } from "../util/color";
+export declare enum StatusBarMode {
+    LIGHT = 0,
+    DARK = 1
+}
+export declare function statusbar(context: BridgeContext): {
+    setHidden: (hidden: boolean) => Promise<any>;
+    setMode: (mode: StatusBarMode) => Promise<any>;
+    setColor: (color: Color) => Promise<any>;
+};
diff --git a/doric-js/lib/src/native/statusbar.js b/doric-js/lib/src/native/statusbar.js
new file mode 100644
index 00000000..d52a49e6
--- /dev/null
+++ b/doric-js/lib/src/native/statusbar.js
@@ -0,0 +1,18 @@
+export var StatusBarMode;
+(function (StatusBarMode) {
+    StatusBarMode[StatusBarMode["LIGHT"] = 0] = "LIGHT";
+    StatusBarMode[StatusBarMode["DARK"] = 1] = "DARK";
+})(StatusBarMode || (StatusBarMode = {}));
+export function statusbar(context) {
+    return {
+        setHidden: (hidden) => {
+            return context.statusbar.setHidden({ hidden });
+        },
+        setMode: (mode) => {
+            return context.statusbar.setMode({ mode });
+        },
+        setColor: (color) => {
+            return context.statusbar.setColor({ color: color.toModel() });
+        },
+    };
+}
diff --git a/doric-js/src/native/index.native.ts b/doric-js/src/native/index.native.ts
index 85a1ff23..fe3e9235 100644
--- a/doric-js/src/native/index.native.ts
+++ b/doric-js/src/native/index.native.ts
@@ -21,3 +21,4 @@ export * from './storage'
 export * from './popover'
 export * from './animate'
 export * from './notification'
+export * from './statusbar'
diff --git a/doric-js/src/native/statusbar.ts b/doric-js/src/native/statusbar.ts
new file mode 100644
index 00000000..858e9053
--- /dev/null
+++ b/doric-js/src/native/statusbar.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BridgeContext } from "../runtime/global"
+import { Color } from "../util/color"
+
+export enum StatusBarMode { LIGHT, DARK }
+
+export function statusbar(context: BridgeContext) {
+    return {
+        setHidden: (hidden: boolean) => {
+            return context.statusbar.setHidden({hidden})
+        },
+        setMode: (mode: StatusBarMode) => {
+            return context.statusbar.setMode({mode})
+        },
+        setColor: (color: Color) => {
+            return context.statusbar.setColor({color: color.toModel()})
+        },
+    }
+}
\ No newline at end of file