From a01cbd151f0b5b4a9acbcf6046b190c4d8dd884e Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Sat, 13 Apr 2019 16:31:19 +0300
Subject: [PATCH] fix(ui): top-navigation center align

---
 src/framework/ui/package-lock.json                        | 5 +++++
 .../ui/topNavigation/topNavigation.component.tsx          | 2 ++
 .../ui/topNavigation/topNavigation.spec.tsx.snap          | 8 ++++++++
 src/framework/ui/topNavigation/type.ts                    | 2 +-
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/framework/ui/package-lock.json

diff --git a/src/framework/ui/package-lock.json b/src/framework/ui/package-lock.json
new file mode 100644
index 000000000..5a80a6fbe
--- /dev/null
+++ b/src/framework/ui/package-lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "@kitten/ui",
+  "version": "0.0.1",
+  "lockfileVersion": 1
+}
diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
index d0d5610f7..a1e7b2e57 100644
--- a/src/framework/ui/topNavigation/topNavigation.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -145,8 +145,10 @@ const styles = StyleSheet.create({
   subtitle: {},
   leftControlContainer: {
     flexDirection: 'row',
+    zIndex: 1,
   },
   rightControlsContainer: {
     flexDirection: 'row',
+    zIndex: 1,
   },
 });
diff --git a/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap b/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
index 21eaeea5b..9834ed6bd 100644
--- a/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
+++ b/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
@@ -393,6 +393,7 @@ exports[`@top-navigation-bar/action * bar/alignment: center 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -422,6 +423,7 @@ exports[`@top-navigation-bar/action * bar/alignment: center 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -553,6 +555,7 @@ exports[`@top-navigation-bar/action * bar/subtitle 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -594,6 +597,7 @@ exports[`@top-navigation-bar/action * bar/subtitle 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -725,6 +729,7 @@ exports[`@top-navigation-bar/action * bar/title 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -754,6 +759,7 @@ exports[`@top-navigation-bar/action * bar/title 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   />
@@ -885,6 +891,7 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   >
@@ -942,6 +949,7 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = `
     style={
       Object {
         "flexDirection": "row",
+        "zIndex": 1,
       }
     }
   >
diff --git a/src/framework/ui/topNavigation/type.ts b/src/framework/ui/topNavigation/type.ts
index 4d29e1768..4e041a31a 100644
--- a/src/framework/ui/topNavigation/type.ts
+++ b/src/framework/ui/topNavigation/type.ts
@@ -19,7 +19,7 @@ export class TopNavigationAlignments {
     margin(leftActionCount: number, rightActionCount: number, actionWidth: number): number {
       const diff: number = rightActionCount - leftActionCount;
 
-      return (rightActionCount - leftActionCount) * diff;
+      return actionWidth * diff;
     }
   };