diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index 59163525..c072ec61 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -671,22 +671,37 @@ class Panel {
     onDestroy() { }
     onShow() { }
     onHidden() { }
-    addHeadView(v) {
-        this.headviews.set(v.viewId, v);
+    addHeadView(type, v) {
+        let map = this.headviews.get(type);
+        if (map) {
+            map.set(v.viewId, v);
+        }
+        else {
+            map = new Map;
+            map.set(v.viewId, v);
+            this.headviews.set(type, map);
+        }
     }
     allHeadViews() {
         return this.headviews.values();
     }
-    removeHeadView(v) {
-        if (v instanceof View) {
-            this.headviews.delete(v.viewId);
-        }
-        else {
-            this.headviews.delete(v);
+    removeHeadView(type, v) {
+        if (this.headviews.has(type)) {
+            let map = this.headviews.get(type);
+            if (map) {
+                if (v instanceof View) {
+                    map.delete(v.viewId);
+                }
+                else {
+                    map.delete(v);
+                }
+            }
         }
     }
-    clearHeadViews() {
-        this.headviews.clear();
+    clearHeadViews(type) {
+        if (this.headviews.has(type)) {
+            this.headviews.delete(type);
+        }
     }
     getRootView() {
         return this.__root__;
@@ -753,8 +768,10 @@ class Panel {
     hookBeforeNativeCall() {
         if (Environment.platform !== 'h5') {
             this.__root__.clean();
-            for (let v of this.headviews.values()) {
-                v.clean();
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    v.clean();
+                }
             }
         }
     }
@@ -766,10 +783,12 @@ class Panel {
                 const model = this.__root__.toModel();
                 this.nativeRender(model);
             }
-            for (let v of this.headviews.values()) {
-                if (v.isDirty()) {
-                    const model = v.toModel();
-                    this.nativeRender(model);
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    if (v.isDirty()) {
+                        const model = v.toModel();
+                        this.nativeRender(model);
+                    }
                 }
             }
         }
@@ -780,11 +799,13 @@ class Panel {
                     this.nativeRender(model);
                     this.__root__.clean();
                 }
-                for (let v of this.headviews.values()) {
-                    if (v.isDirty()) {
-                        const model = v.toModel();
-                        this.nativeRender(model);
-                        v.clean();
+                for (let map of this.headviews.values()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model = v.toModel();
+                            this.nativeRender(model);
+                            v.clean();
+                        }
                     }
                 }
             });
@@ -1944,17 +1965,17 @@ function popover(context) {
     return {
         show: (view) => {
             if (panel) {
-                panel.addHeadView(view);
+                panel.addHeadView("popover", view);
             }
             return context.popover.show(view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
                 if (view) {
-                    panel.removeHeadView(view);
+                    panel.removeHeadView("popover", view);
                 }
                 else {
-                    panel.clearHeadViews();
+                    panel.clearHeadViews("popover");
                 }
             }
             return context.popover.dismiss(view ? { id: view.viewId } : undefined);
@@ -2060,12 +2081,14 @@ function animate(context) {
                             root.clean();
                             return ret;
                         }
-                        for (let v of panel.allHeadViews()) {
-                            if (v.isDirty()) {
-                                const model = v.toModel();
-                                const ret = it.animateRender(model);
-                                it.clean();
-                                return ret;
+                        for (let map of panel.allHeadViews()) {
+                            for (let v of map.values()) {
+                                if (v.isDirty()) {
+                                    const model = v.toModel();
+                                    const ret = it.animateRender(model);
+                                    it.clean();
+                                    return ret;
+                                }
                             }
                         }
                         throw new Error('Cannot find any animated elements');
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index 8c4d987f..ed3538dd 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -2130,22 +2130,37 @@ class Panel {
     onDestroy() { }
     onShow() { }
     onHidden() { }
-    addHeadView(v) {
-        this.headviews.set(v.viewId, v);
+    addHeadView(type, v) {
+        let map = this.headviews.get(type);
+        if (map) {
+            map.set(v.viewId, v);
+        }
+        else {
+            map = new Map;
+            map.set(v.viewId, v);
+            this.headviews.set(type, map);
+        }
     }
     allHeadViews() {
         return this.headviews.values();
     }
-    removeHeadView(v) {
-        if (v instanceof View) {
-            this.headviews.delete(v.viewId);
-        }
-        else {
-            this.headviews.delete(v);
+    removeHeadView(type, v) {
+        if (this.headviews.has(type)) {
+            let map = this.headviews.get(type);
+            if (map) {
+                if (v instanceof View) {
+                    map.delete(v.viewId);
+                }
+                else {
+                    map.delete(v);
+                }
+            }
         }
     }
-    clearHeadViews() {
-        this.headviews.clear();
+    clearHeadViews(type) {
+        if (this.headviews.has(type)) {
+            this.headviews.delete(type);
+        }
     }
     getRootView() {
         return this.__root__;
@@ -2212,8 +2227,10 @@ class Panel {
     hookBeforeNativeCall() {
         if (Environment.platform !== 'h5') {
             this.__root__.clean();
-            for (let v of this.headviews.values()) {
-                v.clean();
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    v.clean();
+                }
             }
         }
     }
@@ -2225,10 +2242,12 @@ class Panel {
                 const model = this.__root__.toModel();
                 this.nativeRender(model);
             }
-            for (let v of this.headviews.values()) {
-                if (v.isDirty()) {
-                    const model = v.toModel();
-                    this.nativeRender(model);
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    if (v.isDirty()) {
+                        const model = v.toModel();
+                        this.nativeRender(model);
+                    }
                 }
             }
         }
@@ -2239,11 +2258,13 @@ class Panel {
                     this.nativeRender(model);
                     this.__root__.clean();
                 }
-                for (let v of this.headviews.values()) {
-                    if (v.isDirty()) {
-                        const model = v.toModel();
-                        this.nativeRender(model);
-                        v.clean();
+                for (let map of this.headviews.values()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model = v.toModel();
+                            this.nativeRender(model);
+                            v.clean();
+                        }
                     }
                 }
             });
@@ -3403,17 +3424,17 @@ function popover(context) {
     return {
         show: (view) => {
             if (panel) {
-                panel.addHeadView(view);
+                panel.addHeadView("popover", view);
             }
             return context.popover.show(view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
                 if (view) {
-                    panel.removeHeadView(view);
+                    panel.removeHeadView("popover", view);
                 }
                 else {
-                    panel.clearHeadViews();
+                    panel.clearHeadViews("popover");
                 }
             }
             return context.popover.dismiss(view ? { id: view.viewId } : undefined);
@@ -3519,12 +3540,14 @@ function animate(context) {
                             root.clean();
                             return ret;
                         }
-                        for (let v of panel.allHeadViews()) {
-                            if (v.isDirty()) {
-                                const model = v.toModel();
-                                const ret = it.animateRender(model);
-                                it.clean();
-                                return ret;
+                        for (let map of panel.allHeadViews()) {
+                            for (let v of map.values()) {
+                                if (v.isDirty()) {
+                                    const model = v.toModel();
+                                    const ret = it.animateRender(model);
+                                    it.clean();
+                                    return ret;
+                                }
                             }
                         }
                         throw new Error('Cannot find any animated elements');
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index f65ceacb..40273f13 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -256,10 +256,10 @@ declare module 'doric/lib/src/ui/panel' {
         onShow(): void;
         onHidden(): void;
         abstract build(rootView: Group): void;
-        addHeadView(v: View): void;
-        allHeadViews(): IterableIterator<View>;
-        removeHeadView(v: View | string): void;
-        clearHeadViews(): void;
+        addHeadView(type: string, v: View): void;
+        allHeadViews(): IterableIterator<Map<string, View>>;
+        removeHeadView(type: string, v: View | string): void;
+        clearHeadViews(type: string): void;
         getRootView(): Root;
         getInitData(): object | undefined;
     }
diff --git a/doric-js/lib/src/native/animate.js b/doric-js/lib/src/native/animate.js
index f3ce3d6b..8619134d 100644
--- a/doric-js/lib/src/native/animate.js
+++ b/doric-js/lib/src/native/animate.js
@@ -35,12 +35,14 @@ export function animate(context) {
                             root.clean();
                             return ret;
                         }
-                        for (let v of panel.allHeadViews()) {
-                            if (v.isDirty()) {
-                                const model = v.toModel();
-                                const ret = it.animateRender(model);
-                                it.clean();
-                                return ret;
+                        for (let map of panel.allHeadViews()) {
+                            for (let v of map.values()) {
+                                if (v.isDirty()) {
+                                    const model = v.toModel();
+                                    const ret = it.animateRender(model);
+                                    it.clean();
+                                    return ret;
+                                }
                             }
                         }
                         throw new Error('Cannot find any animated elements');
diff --git a/doric-js/lib/src/native/popover.js b/doric-js/lib/src/native/popover.js
index 7e667cda..81647bb1 100644
--- a/doric-js/lib/src/native/popover.js
+++ b/doric-js/lib/src/native/popover.js
@@ -8,17 +8,17 @@ export function popover(context) {
     return {
         show: (view) => {
             if (panel) {
-                panel.addHeadView(view);
+                panel.addHeadView("popover", view);
             }
             return context.popover.show(view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
                 if (view) {
-                    panel.removeHeadView(view);
+                    panel.removeHeadView("popover", view);
                 }
                 else {
-                    panel.clearHeadViews();
+                    panel.clearHeadViews("popover");
                 }
             }
             return context.popover.dismiss(view ? { id: view.viewId } : undefined);
diff --git a/doric-js/lib/src/ui/panel.d.ts b/doric-js/lib/src/ui/panel.d.ts
index 0acbd788..940ada56 100644
--- a/doric-js/lib/src/ui/panel.d.ts
+++ b/doric-js/lib/src/ui/panel.d.ts
@@ -12,10 +12,10 @@ export declare abstract class Panel {
     private __data__?;
     private __root__;
     private headviews;
-    addHeadView(v: View): void;
-    allHeadViews(): IterableIterator<View>;
-    removeHeadView(v: View | string): void;
-    clearHeadViews(): void;
+    addHeadView(type: string, v: View): void;
+    allHeadViews(): IterableIterator<Map<string, View>>;
+    removeHeadView(type: string, v: View | string): void;
+    clearHeadViews(type: string): void;
     getRootView(): Root;
     getInitData(): object | undefined;
     private __init__;
diff --git a/doric-js/lib/src/ui/panel.js b/doric-js/lib/src/ui/panel.js
index 15328e93..e17c4e4b 100644
--- a/doric-js/lib/src/ui/panel.js
+++ b/doric-js/lib/src/ui/panel.js
@@ -42,22 +42,37 @@ export class Panel {
     onDestroy() { }
     onShow() { }
     onHidden() { }
-    addHeadView(v) {
-        this.headviews.set(v.viewId, v);
+    addHeadView(type, v) {
+        let map = this.headviews.get(type);
+        if (map) {
+            map.set(v.viewId, v);
+        }
+        else {
+            map = new Map;
+            map.set(v.viewId, v);
+            this.headviews.set(type, map);
+        }
     }
     allHeadViews() {
         return this.headviews.values();
     }
-    removeHeadView(v) {
-        if (v instanceof View) {
-            this.headviews.delete(v.viewId);
-        }
-        else {
-            this.headviews.delete(v);
+    removeHeadView(type, v) {
+        if (this.headviews.has(type)) {
+            let map = this.headviews.get(type);
+            if (map) {
+                if (v instanceof View) {
+                    map.delete(v.viewId);
+                }
+                else {
+                    map.delete(v);
+                }
+            }
         }
     }
-    clearHeadViews() {
-        this.headviews.clear();
+    clearHeadViews(type) {
+        if (this.headviews.has(type)) {
+            this.headviews.delete(type);
+        }
     }
     getRootView() {
         return this.__root__;
@@ -124,8 +139,10 @@ export class Panel {
     hookBeforeNativeCall() {
         if (Environment.platform !== 'h5') {
             this.__root__.clean();
-            for (let v of this.headviews.values()) {
-                v.clean();
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    v.clean();
+                }
             }
         }
     }
@@ -137,10 +154,12 @@ export class Panel {
                 const model = this.__root__.toModel();
                 this.nativeRender(model);
             }
-            for (let v of this.headviews.values()) {
-                if (v.isDirty()) {
-                    const model = v.toModel();
-                    this.nativeRender(model);
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    if (v.isDirty()) {
+                        const model = v.toModel();
+                        this.nativeRender(model);
+                    }
                 }
             }
         }
@@ -151,11 +170,13 @@ export class Panel {
                     this.nativeRender(model);
                     this.__root__.clean();
                 }
-                for (let v of this.headviews.values()) {
-                    if (v.isDirty()) {
-                        const model = v.toModel();
-                        this.nativeRender(model);
-                        v.clean();
+                for (let map of this.headviews.values()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model = v.toModel();
+                            this.nativeRender(model);
+                            v.clean();
+                        }
                     }
                 }
             });
diff --git a/doric-js/src/native/animate.ts b/doric-js/src/native/animate.ts
index df3a24e8..c8fe4609 100644
--- a/doric-js/src/native/animate.ts
+++ b/doric-js/src/native/animate.ts
@@ -39,12 +39,14 @@ export function animate(context: BridgeContext) {
                             root.clean()
                             return ret
                         }
-                        for (let v of panel.allHeadViews()) {
-                            if (v.isDirty()) {
-                                const model = v.toModel()
-                                const ret = it.animateRender(model)
-                                it.clean()
-                                return ret
+                        for (let map of panel.allHeadViews()) {
+                            for (let v of map.values()) {
+                                if (v.isDirty()) {
+                                    const model = v.toModel()
+                                    const ret = it.animateRender(model)
+                                    it.clean()
+                                    return ret
+                                }
                             }
                         }
                         throw new Error('Cannot find any animated elements')
diff --git a/doric-js/src/native/popover.ts b/doric-js/src/native/popover.ts
index ff6834da..1081dddb 100644
--- a/doric-js/src/native/popover.ts
+++ b/doric-js/src/native/popover.ts
@@ -26,16 +26,16 @@ export function popover(context: BridgeContext) {
     return {
         show: (view: View) => {
             if (panel) {
-                panel.addHeadView(view)
+                panel.addHeadView("popover", view)
             }
             return context.popover.show(view.toModel())
         },
         dismiss: (view: View | undefined = undefined) => {
             if (panel) {
                 if (view) {
-                    panel.removeHeadView(view)
+                    panel.removeHeadView("popover", view)
                 } else {
-                    panel.clearHeadViews()
+                    panel.clearHeadViews("popover")
                 }
             }
             return context.popover.dismiss(view ? { id: view.viewId } : undefined)
diff --git a/doric-js/src/ui/panel.ts b/doric-js/src/ui/panel.ts
index 4785b659..4b358393 100644
--- a/doric-js/src/ui/panel.ts
+++ b/doric-js/src/ui/panel.ts
@@ -43,24 +43,38 @@ export abstract class Panel {
 
     private __data__?: object
     private __root__ = new Root
-    private headviews: Map<string, View> = new Map
+    private headviews: Map<string,  Map<string, View>> = new Map
 
-    addHeadView(v: View) {
-        this.headviews.set(v.viewId, v)
+    addHeadView(type: string, v: View) {
+        let map = this.headviews.get(type)
+        if (map) {
+            map.set(v.viewId, v)
+        } else {
+            map = new Map
+            map.set(v.viewId, v)
+            this.headviews.set(type, map)
+        }
     }
     allHeadViews() {
         return this.headviews.values()
     }
-    removeHeadView(v: View | string) {
-        if (v instanceof View) {
-            this.headviews.delete(v.viewId)
-        } else {
-            this.headviews.delete(v)
+    removeHeadView(type: string, v: View | string) {
+        if (this.headviews.has(type)) {
+            let map = this.headviews.get(type)
+            if (map) {
+                if (v instanceof View) {
+                    map.delete(v.viewId)
+                } else {
+                    map.delete(v)
+                }
+            }
         }
     }
 
-    clearHeadViews() {
-        this.headviews.clear()
+    clearHeadViews(type: string) {
+        if (this.headviews.has(type)) {
+            this.headviews.delete(type)
+        }
     }
 
     getRootView() {
@@ -144,8 +158,10 @@ export abstract class Panel {
     private hookBeforeNativeCall() {
         if (Environment.platform !== 'h5') {
             this.__root__.clean()
-            for (let v of this.headviews.values()) {
-                v.clean()
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    v.clean()
+                }
             }
         }
     }
@@ -158,10 +174,12 @@ export abstract class Panel {
                 const model = this.__root__.toModel()
                 this.nativeRender(model)
             }
-            for (let v of this.headviews.values()) {
-                if (v.isDirty()) {
-                    const model = v.toModel()
-                    this.nativeRender(model)
+            for (let map of this.headviews.values()) {
+                for (let v of map.values()) {
+                    if (v.isDirty()) {
+                        const model = v.toModel()
+                        this.nativeRender(model)
+                    }
                 }
             }
         } else {
@@ -171,11 +189,13 @@ export abstract class Panel {
                     this.nativeRender(model)
                     this.__root__.clean()
                 }
-                for (let v of this.headviews.values()) {
-                    if (v.isDirty()) {
-                        const model = v.toModel()
-                        this.nativeRender(model)
-                        v.clean()
+                for (let map of this.headviews.values()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model = v.toModel()
+                            this.nativeRender(model)
+                            v.clean()
+                        }
                     }
                 }
             })