Setup TopTabs with ViewPager (#2373)

Slightly changes topTabs node declaration and removed the container from it.

lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java

@@ -31,6 +31,7 @@ public class NavigationOptions implements DEFAULT_VALUES {
 
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
 		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
+        result.topTabOptions = TopTabOptions.parse(json.optJSONObject("topTab"));
 		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
 
 		return result.withDefaultOptions(defaultOptions);
@@ -38,6 +39,7 @@ public class NavigationOptions implements DEFAULT_VALUES {
 
 	public TopBarOptions topBarOptions = new TopBarOptions();
     public TopTabsOptions topTabsOptions = new TopTabsOptions();
+    public TopTabOptions topTabOptions = new TopTabOptions();
     public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
 
 	public void mergeWith(final NavigationOptions other) {

lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java

@@ -0,0 +1,23 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONObject;
+
+public class TopTabOptions implements DEFAULT_VALUES {
+    public String title = NO_VALUE;
+
+    public static TopTabOptions parse(JSONObject json) {
+        TopTabOptions result = new TopTabOptions();
+        if (json == null) return result;
+
+        result.title = json.optString("title", NO_VALUE);
+        return result;
+    }
+
+    void mergeWith(TopTabOptions topTabsOptions) {
+
+    }
+
+    void mergeWithDefault(TopTabOptions topTabsOptions) {
+
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java

@@ -69,4 +69,8 @@ public class TopTabController extends ViewController implements NavigationOption
     public void mergeNavigationOptions(NavigationOptions options) {
         this.options.mergeWith(options);
     }
+
+    String getTabTitle() {
+        return options.topTabOptions.title;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java

@@ -15,6 +15,11 @@ public class TopTabsAdapter extends PagerAdapter implements ViewPager.OnPageChan
         this.tabs = tabs;
     }
 
+    @Override
+    public CharSequence getPageTitle(int position) {
+        return tabs.get(position).getTabTitle();
+    }
+
     @Override
     public int getCount() {
         return tabs.size();

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -10,18 +10,19 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
+import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
+
 public class TopBar extends AppBarLayout {
 	private final Toolbar titleBar;
-	private final TopTabs topTabs;
+	private TopTabs topTabs;
 
-	public TopBar(final Context context) {
-		super(context);
-		titleBar = new Toolbar(context);
-        topTabs = new TopTabs(context);
+    public TopBar(final Context context) {
+        super(context);
+        titleBar = new Toolbar(context);
         addView(titleBar);
-	}
+    }
 
-	public void setTitle(String title) {
+    public void setTitle(String title) {
 		titleBar.setTitle(title);
 	}
 
@@ -73,4 +74,14 @@ public class TopBar extends AppBarLayout {
 	public Toolbar getTitleBar() {
 		return titleBar;
 	}
+
+    public void setupTopTabsWithViewPager(TopTabsViewPager viewPager) {
+        initTopTabs();
+        topTabs.setupWithViewPager(viewPager);
+    }
+
+    private void initTopTabs() {
+        topTabs = new TopTabs(getContext());
+        addView(topTabs);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsLayout.java

@@ -35,6 +35,7 @@ public class TopTabsLayout extends LinearLayout implements Container {
         setOrientation(VERTICAL);
         addView(topBar);
         addView(viewPager);
+        topBar.setupTopTabsWithViewPager(viewPager);
     }
 
     @Override

lib/src/commands/LayoutTreeParser.js

@@ -39,7 +39,7 @@ class LayoutTreeParser {
   _createTopTabs(topTabs) {
     return {
       type: LayoutTypes.TopTabs,
-      children: _.map(topTabs, (t) => this._createTopTab(t.container))
+      children: _.map(topTabs, (t) => this._createTopTab(t))
     };
   }
 

lib/src/commands/SimpleLayouts.js

@@ -114,19 +114,13 @@ const tabBasedWithBothSideMenus = {
 const singleScreenWithTopTabs = {
   topTabs: [
     {
-      container: {
-        name: 'navigation.playground.TextScreen'
-      }
+      name: 'navigation.playground.TextScreen'
     },
     {
-      container: {
-        name: 'navigation.playground.TextScreen'
-      }
+      name: 'navigation.playground.TextScreen'
     },
     {
-      container: {
-        name: 'navigation.playground.TextScreen'
-      }
+      name: 'navigation.playground.TextScreen'
     }
   ]
 };

playground/src/containers/WelcomeScreen.js

@@ -151,29 +151,38 @@ class WelcomeScreen extends Component {
     Navigation.push(this.props.containerId, {
       topTabs: [
         {
-          container: {
-            name: 'navigation.playground.TopTabOptionsScreen',
-            passProps: {
-              title: 'Tab 1',
-              text: 'This is top tab 1'
+          name: 'navigation.playground.TopTabOptionsScreen',
+          passProps: {
+            title: 'Tab 1',
+            text: 'This is top tab 1'
+          },
+          navigationOptions: {
+            topTab: {
+              title: 'Tab 1'
             }
           }
         },
         {
-          container: {
-            name: 'navigation.playground.TopTabScreen',
-            passProps: {
-              title: 'Tab 2',
-              text: 'This is top tab 2'
+          name: 'navigation.playground.TopTabScreen',
+          passProps: {
+            title: 'Tab 2',
+            text: 'This is top tab 2'
+          },
+          navigationOptions: {
+            topTab: {
+              title: 'Tab 2'
             }
           }
         },
         {
-          container: {
-            name: 'navigation.playground.TopTabScreen',
-            passProps: {
-              title: 'Tab 3',
-              text: 'This is top tab 3'
+          name: 'navigation.playground.TopTabScreen',
+          passProps: {
+            title: 'Tab 3',
+            text: 'This is top tab 3'
+          },
+          navigationOptions: {
+            topTab: {
+              title: 'Tab 3'
             }
           }
         }