Bottom tabs android (#2649)

* Use AHBottomNavigation for BottomTabs

* Process passed options for all layout types

Static options are still processed only for components

* ios e2e fix

* Update RNNNavigationController.m

lib/android/app/build.gradle

@@ -59,7 +59,8 @@ dependencies {
     implementation fileTree(include: ['*.jar'], dir: 'libs')
     implementation 'com.android.support:design:25.4.0'
     implementation 'com.android.support:appcompat-v7:25.4.0'
-    implementation "com.android.support:support-v4:25.4.0"
+    implementation 'com.android.support:support-v4:25.4.0'
+    implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'
 
     // node_modules
     //noinspection GradleDynamicVersion

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

@@ -0,0 +1,39 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONObject;
+
+public class BottomTabOptions implements DEFAULT_VALUES {
+
+    public static BottomTabOptions parse(JSONObject json) {
+        BottomTabOptions options = new BottomTabOptions();
+        if (json == null) return options;
+
+        options.title = TextParser.parse(json, "title");
+        if (!json.has("icon")) {
+            throw new RuntimeException("BottomTab must have an icon");
+        }
+        options.icon = TextParser.parse(json.optJSONObject("icon"), "uri");
+        return options;
+    }
+
+    public Text title = new NullText();
+    public Text icon = new NullText();
+
+    void mergeWith(final BottomTabOptions other) {
+        if (other.title.hasValue()) {
+            title = other.title;
+        }
+        if (other.icon.hasValue()) {
+            icon = other.icon;
+        }
+    }
+
+    void mergeWithDefault(final BottomTabOptions defaultOptions) {
+        if (!title.hasValue()) {
+            title = defaultOptions.title;
+        }
+        if (!icon.hasValue()) {
+            icon = defaultOptions.icon;
+        }
+    }
+}

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

@@ -11,17 +11,19 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
 		BottomTabsOptions options = new BottomTabsOptions();
 		if (json == null) return options;
 
-		options.currentTabId = TextParser.parse(json, "currentTabId");
+        options.color = ColorParser.parse(json, "tabColor");
+        options.selectedColor = ColorParser.parse(json, "selectedTabColor");
+        options.currentTabId = TextParser.parse(json, "currentTabId");
 		options.currentTabIndex = json.optInt("currentTabIndex", NO_INT_VALUE);
-		options.tabBadge = json.optInt("tabBadge", NO_INT_VALUE);
-		options.hidden = BooleanOptions.parse(json.optString("hidden"));
+		options.visible = BooleanOptions.parse(json.optString("visible"));
 		options.animateHide = BooleanOptions.parse(json.optString("animateHide"));
 
 		return options;
 	}
 
-	int tabBadge = NO_INT_VALUE;
-	BooleanOptions hidden = BooleanOptions.False;
+    public Color color = new NullColor();
+    public Color selectedColor = new NullColor();
+	BooleanOptions visible = BooleanOptions.False;
 	BooleanOptions animateHide = BooleanOptions.False;
 	public int currentTabIndex = NO_INT_VALUE;
 	public Text currentTabId = new NullText();
@@ -33,16 +35,19 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
 		if (NO_INT_VALUE != other.currentTabIndex) {
             currentTabIndex = other.currentTabIndex;
 		}
-		if (NO_INT_VALUE != other.tabBadge) {
-			tabBadge = other.tabBadge;
-		}
-		if (other.hidden != BooleanOptions.NoValue) {
-			hidden = other.hidden;
+		if (other.visible != BooleanOptions.NoValue) {
+			visible = other.visible;
 		}
 		if (other.animateHide != BooleanOptions.NoValue) {
 			animateHide = other.animateHide;
 		}
-	}
+        if (other.color.hasValue()) {
+            color = other.color;
+        }
+        if (other.selectedColor.hasValue()) {
+            selectedColor = other.selectedColor;
+        }
+    }
 
     void mergeWithDefault(final BottomTabsOptions defaultOptions) {
         if (!currentTabId.hasValue()) {
@@ -51,14 +56,17 @@ public class BottomTabsOptions implements DEFAULT_VALUES {
         if (NO_INT_VALUE == currentTabIndex) {
             currentTabIndex = defaultOptions.currentTabIndex;
         }
-        if (NO_INT_VALUE == tabBadge) {
-            tabBadge = defaultOptions.tabBadge;
-        }
-        if (hidden == BooleanOptions.NoValue) {
-            hidden = defaultOptions.hidden;
+        if (visible == BooleanOptions.NoValue) {
+            visible = defaultOptions.visible;
         }
         if (animateHide == BooleanOptions.NoValue) {
             animateHide = defaultOptions.animateHide;
         }
+        if (!color.hasValue()) {
+            color = defaultOptions.color;
+        }
+        if (!selectedColor.hasValue()) {
+            selectedColor = defaultOptions.selectedColor;
+        }
     }
 }

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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.parse;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.NoOpPromise;
 import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.viewcontrollers.BottomTabsController;
@@ -55,7 +56,8 @@ public class LayoutFactory {
 	}
 
     private ViewController createSideMenuRoot(LayoutNode node) {
-		SideMenuController sideMenuLayout = new SideMenuController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		SideMenuController sideMenuLayout = new SideMenuController(activity, node.id, options);
 		for (LayoutNode child : node.children) {
 			ViewController childLayout = create(child);
 			switch (child.type) {
@@ -100,7 +102,8 @@ public class LayoutFactory {
 	}
 
 	private ViewController createStack(LayoutNode node) {
-		StackController stackController = new StackController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		StackController stackController = new StackController(activity, node.id, options);
         for (int i = 0; i < node.children.size(); i++) {
             if (i < node.children.size() - 1) {
                 stackController.push(create(node.children.get(i)), new NoOpPromise());
@@ -112,10 +115,11 @@ public class LayoutFactory {
 	}
 
 	private ViewController createBottomTabs(LayoutNode node) {
-		final BottomTabsController tabsComponent = new BottomTabsController(activity, node.id);
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+		final BottomTabsController tabsComponent = new BottomTabsController(activity, new ImageLoader(), node.id, options);
 		List<ViewController> tabs = new ArrayList<>();
 		for (int i = 0; i < node.children.size(); i++) {
-			tabs.add(create(node.children.get(i)));
+            tabs.add(create(node.children.get(i)));
 		}
 		tabsComponent.setTabs(tabs);
 		return tabsComponent;

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

@@ -35,7 +35,8 @@ public class Options implements DEFAULT_VALUES {
 		result.topBarOptions = TopBarOptions.parse(typefaceManager, json.optJSONObject("topBar"));
 		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
         result.topTabOptions = TopTabOptions.parse(typefaceManager, json.optJSONObject("topTab"));
-		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
+        result.bottomTabOptions = BottomTabOptions.parse(json.optJSONObject("bottomTab"));
+        result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
         result.overlayOptions = OverlayOptions.parse(json.optJSONObject("overlay"));
 
 		return result.withDefaultOptions(defaultOptions);
@@ -44,6 +45,7 @@ public class Options implements DEFAULT_VALUES {
     @NonNull public TopBarOptions topBarOptions = new TopBarOptions();
     @NonNull public TopTabsOptions topTabsOptions = new TopTabsOptions();
     @NonNull public TopTabOptions topTabOptions = new TopTabOptions();
+    @NonNull public BottomTabOptions bottomTabOptions = new BottomTabOptions();
     @NonNull public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
     @NonNull public OverlayOptions overlayOptions = new OverlayOptions();
 
@@ -54,12 +56,14 @@ public class Options implements DEFAULT_VALUES {
 	public void mergeWith(final Options other) {
         topBarOptions.mergeWith(other.topBarOptions);
         topTabsOptions.mergeWith(other.topTabsOptions);
+        bottomTabOptions.mergeWith(other.bottomTabOptions);
         bottomTabsOptions.mergeWith(other.bottomTabsOptions);
     }
 
     Options withDefaultOptions(final Options other) {
         topBarOptions.mergeWithDefault(other.topBarOptions);
         topTabsOptions.mergeWithDefault(other.topTabsOptions);
+        bottomTabOptions.mergeWithDefault(other.bottomTabOptions);
         bottomTabsOptions.mergeWithDefault(other.bottomTabsOptions);
         return this;
     }

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

@@ -14,7 +14,7 @@ public class TopTabsOptions implements DEFAULT_VALUES {
     public static TopTabsOptions parse(@Nullable JSONObject json) {
         TopTabsOptions result = new TopTabsOptions();
         if (json == null) return result;
-        result.selectedTabColor = ColorParser.parse(json, "selectedTabColor");
+        result.selectedTabColor = ColorParser.parse(json, "selectedColor");
         result.unselectedTabColor = ColorParser.parse(json, "unselectedTabColor");
         result.fontSize = NumberParser.parse(json, "fontSize");
         return result;

lib/android/app/src/main/java/com/reactnativenavigation/utils/CompatUtils.java

@@ -9,7 +9,7 @@ public class CompatUtils {
 	private static final AtomicInteger viewId = new AtomicInteger(1);
 
 	public static int generateViewId() {
-		if (Build.VERSION.SDK_INT >= 17) {
+		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 			return View.generateViewId();
 		} else {
 			while (true) {

lib/android/app/src/main/java/com/reactnativenavigation/utils/ImageUtils.java → lib/android/app/src/main/java/com/reactnativenavigation/utils/ImageLoader.java

@@ -17,7 +17,7 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.net.URL;
 
-public class ImageUtils {
+public class ImageLoader {
 
 	public interface ImageLoadingListener {
 		void onComplete(@NonNull Drawable drawable);
@@ -25,7 +25,7 @@ public class ImageUtils {
 		void onError(Throwable error);
 	}
 
-	public static void loadIcon(final Context context, final String uri, final ImageLoadingListener listener) {
+	public void loadIcon(final Context context, final String uri, final ImageLoadingListener listener) {
         try {
             StrictMode.ThreadPolicy threadPolicy = adjustThreadPolicyDebug();
             
@@ -40,7 +40,7 @@ public class ImageUtils {
         }
     }
 
-    private static StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
+    private StrictMode.ThreadPolicy adjustThreadPolicyDebug() {
         StrictMode.ThreadPolicy threadPolicy = null;
         if (NavigationApplication.instance.isDebug()) {
             threadPolicy = StrictMode.getThreadPolicy();
@@ -49,7 +49,7 @@ public class ImageUtils {
         return threadPolicy;
     }
 
-    private static void restoreThreadPolicyDebug(@Nullable StrictMode.ThreadPolicy threadPolicy) {
+    private void restoreThreadPolicyDebug(@Nullable StrictMode.ThreadPolicy threadPolicy) {
         if (NavigationApplication.instance.isDebug() && threadPolicy != null) {
             StrictMode.setThreadPolicy(threadPolicy);
         }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java

@@ -2,18 +2,22 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 import android.graphics.Color;
+import android.graphics.drawable.Drawable;
 import android.support.annotation.NonNull;
-import android.support.design.widget.BottomNavigationView;
-import android.view.Menu;
-import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
+import com.reactnativenavigation.parse.BottomTabOptions;
+import com.reactnativenavigation.parse.BottomTabsOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.Text;
 import com.reactnativenavigation.presentation.NavigationOptionsListener;
-import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.views.BottomTabs;
 
 import java.util.ArrayList;
 import java.util.Collection;
@@ -25,27 +29,26 @@ import static android.widget.RelativeLayout.ABOVE;
 import static android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM;
 import static com.reactnativenavigation.parse.DEFAULT_VALUES.NO_INT_VALUE;
 
-public class BottomTabsController extends ParentController
-		implements BottomNavigationView.OnNavigationItemSelectedListener, NavigationOptionsListener {
-	private BottomNavigationView bottomNavigationView;
+public class BottomTabsController extends ParentController implements AHBottomNavigation.OnTabSelectedListener, NavigationOptionsListener {
+	private BottomTabs bottomTabs;
 	private List<ViewController> tabs = new ArrayList<>();
 	private int selectedIndex = 0;
+    private ImageLoader imageLoader;
 
-	public BottomTabsController(final Activity activity, final String id) {
-		super(activity, id);
-	}
+    public BottomTabsController(final Activity activity, ImageLoader imageLoader, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
+        this.imageLoader = imageLoader;
+    }
 
 	@NonNull
 	@Override
 	protected ViewGroup createView() {
 		RelativeLayout root = new RelativeLayout(getActivity());
-		bottomNavigationView = new BottomNavigationView(getActivity());
-		bottomNavigationView.setId(CompatUtils.generateViewId());
-		bottomNavigationView.setBackgroundColor(Color.DKGRAY);
-		bottomNavigationView.setOnNavigationItemSelectedListener(this);
+		bottomTabs = new BottomTabs(getActivity());
+        bottomTabs.setOnTabSelectedListener(this);
 		RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
 		lp.addRule(ALIGN_PARENT_BOTTOM);
-		root.addView(bottomNavigationView, lp);
+		root.addView(bottomTabs, lp);
 		return root;
 	}
 
@@ -54,11 +57,11 @@ public class BottomTabsController extends ParentController
 		return !tabs.isEmpty() && tabs.get(selectedIndex).handleBack();
 	}
 
-	@Override
-	public boolean onNavigationItemSelected(@NonNull final MenuItem item) {
-		selectTabAtIndex(item.getItemId());
-		return true;
-	}
+    @Override
+    public boolean onTabSelected(int index, boolean wasSelected) {
+        selectTabAtIndex(index);
+        return true;
+    }
 
 	void selectTabAtIndex(final int newIndex) {
 		tabs.get(selectedIndex).getView().setVisibility(View.GONE);
@@ -73,21 +76,40 @@ public class BottomTabsController extends ParentController
 		this.tabs = tabs;
 		getView();
 		for (int i = 0; i < tabs.size(); i++) {
-			String title = String.valueOf(i);
-			createTab(tabs.get(i), i, title);
+			createTab(tabs.get(i), tabs.get(i).options.bottomTabOptions, tabs.get(i).options.bottomTabsOptions);
 		}
 		selectTabAtIndex(0);
 	}
 
-	private void createTab(ViewController tab, final int index, final String title) {
-		bottomNavigationView.getMenu().add(0, index, Menu.NONE, title);
-		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
-		params.addRule(ABOVE, bottomNavigationView.getId());
-		tab.getView().setVisibility(View.GONE);
-		getView().addView(tab.getView(), params);
+	private void createTab(ViewController tab, final BottomTabOptions tabOptions, final BottomTabsOptions bottomTabsOptions) {
+	    if (!tabOptions.icon.hasValue()) {
+            throw new RuntimeException("BottomTab must have an icon");
+        }
+        imageLoader.loadIcon(getActivity(), tabOptions.icon.get(), new ImageLoader.ImageLoadingListener() {
+            @Override
+            public void onComplete(@NonNull Drawable drawable) {
+                setIconColor(drawable, bottomTabsOptions);
+                AHBottomNavigationItem item = new AHBottomNavigationItem(tabOptions.title.get(""), drawable);
+                bottomTabs.addItem(item);
+            }
+
+            @Override
+            public void onError(Throwable error) {
+                error.printStackTrace();
+            }
+        });
+
+        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
+        params.addRule(ABOVE, bottomTabs.getId());
+        tab.getView().setVisibility(View.GONE);
+        getView().addView(tab.getView(), params);
 	}
 
-	int getSelectedIndex() {
+    private void setIconColor(Drawable drawable, BottomTabsOptions options) {
+        UiUtils.tintDrawable(drawable, Color.RED);
+    }
+
+    int getSelectedIndex() {
 		return selectedIndex;
 	}
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ComponentViewController.java

@@ -18,11 +18,10 @@ public class ComponentViewController extends ViewController<ComponentLayout> imp
                                    final String id,
                                    final String componentName,
                                    final ReactViewCreator viewCreator,
-                                   final Options initialNavigationOptions) {
-        super(activity, id);
+                                   final Options initialOptions) {
+        super(activity, id, initialOptions);
         this.componentName = componentName;
         this.viewCreator = viewCreator;
-        options = initialNavigationOptions;
     }
 
     @Override

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/Navigator.java

@@ -25,7 +25,7 @@ public class Navigator extends ParentController {
     private Options defaultOptions = new Options();
 
     public Navigator(final Activity activity) {
-		super(activity, "navigator" + CompatUtils.generateViewId());
+		super(activity, "navigator" + CompatUtils.generateViewId(), new Options());
 	}
 
     @NonNull

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ParentController.java

@@ -13,8 +13,8 @@ import java.util.Collection;
 
 public abstract class ParentController<T extends ViewGroup> extends ViewController {
 
-	public ParentController(final Activity activity, final String id) {
-		super(activity, id);
+	public ParentController(final Activity activity, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
 	}
 
 	@NonNull

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/SideMenuController.java

@@ -7,6 +7,8 @@ import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.parse.Options;
+
 import java.util.ArrayList;
 import java.util.Collection;
 
@@ -19,8 +21,8 @@ public class SideMenuController extends ParentController {
 	private ViewController leftController;
 	private ViewController rightController;
 
-	public SideMenuController(final Activity activity, final String id) {
-		super(activity, id);
+	public SideMenuController(final Activity activity, final String id, Options initialOptions) {
+		super(activity, id, initialOptions);
 	}
 
 	@NonNull

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/StackController.java

@@ -24,8 +24,8 @@ public class StackController extends ParentController <StackLayout> {
     private final NavigationAnimator animator;
     private StackLayout stackLayout;
 
-    public StackController(final Activity activity, String id) {
-		super(activity, id);
+    public StackController(final Activity activity, String id, Options initialOptions) {
+		super(activity, id, initialOptions);
         animator = new NavigationAnimator(activity);
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ViewController.java

@@ -39,9 +39,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
 
-    public ViewController(Activity activity, String id) {
+    public ViewController(Activity activity, String id, Options initialOptions) {
         this.activity = activity;
         this.id = id;
+        options = initialOptions;
     }
 
     protected abstract T createView();

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

@@ -21,12 +21,10 @@ public class TopTabsController extends ParentController<TopTabsViewPager> implem
 
     private List<ViewController> tabs;
     private TopTabsLayoutCreator viewCreator;
-    private Options options;
 
     public TopTabsController(Activity activity, String id, List<ViewController> tabs, TopTabsLayoutCreator viewCreator, Options options) {
-        super(activity, id);
+        super(activity, id, options);
         this.viewCreator = viewCreator;
-        this.options = options;
         this.tabs = tabs;
         for (ViewController tab : tabs) {
             tab.setParentController(this);

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

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
+import com.reactnativenavigation.utils.CompatUtils;
+
+public class BottomTabs extends AHBottomNavigation {
+    public BottomTabs(Context context) {
+        super(context);
+        setId(CompatUtils.generateViewId());
+    }
+}

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

@@ -16,7 +16,7 @@ import android.widget.TextView;
 
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.utils.ImageUtils;
+import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.UiUtils;
 
 import java.util.ArrayList;
@@ -57,7 +57,7 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 			return;
 		}
 
-		ImageUtils.loadIcon(context, button.icon.get(), new ImageUtils.ImageLoadingListener() {
+		new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
 			@Override
 			public void onComplete(@NonNull Drawable drawable) {
 				icon = drawable;
@@ -74,7 +74,7 @@ public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
 	}
 
 	private void applyIcon(Context context, final MenuItem menuItem) {
-		ImageUtils.loadIcon(context, button.icon.get(), new ImageUtils.ImageLoadingListener() {
+        new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
 			@Override
 			public void onComplete(@NonNull Drawable drawable) {
 				icon = drawable;

lib/android/app/src/test/java/com/reactnativenavigation/mocks/ImageLoaderMock.java

@@ -0,0 +1,49 @@
+package com.reactnativenavigation.mocks;
+
+import android.graphics.Canvas;
+import android.graphics.ColorFilter;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.NonNull;
+
+import com.reactnativenavigation.utils.ImageLoader;
+
+import org.mockito.Mockito;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.doAnswer;
+
+public class ImageLoaderMock {
+    private static Drawable mockDrawable = new Drawable() {
+        @Override
+        public void draw(@NonNull Canvas canvas) {
+
+        }
+
+        @Override
+        public void setAlpha(int alpha) {
+
+        }
+
+        @Override
+        public void setColorFilter(@android.support.annotation.Nullable ColorFilter colorFilter) {
+
+        }
+
+        @Override
+        public int getOpacity() {
+            return 0;
+        }
+    };
+
+    public static ImageLoader mock() {
+        ImageLoader imageLoader = Mockito.mock(ImageLoader.class);
+        doAnswer(
+                invocation -> {
+                    ((ImageLoader.ImageLoadingListener) invocation.getArguments()[2]).onComplete(mockDrawable);
+                    return null;
+                }
+        ).when(imageLoader).loadIcon(any(), anyString(), any());
+        return imageLoader;
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleViewController.java

@@ -15,9 +15,8 @@ import com.reactnativenavigation.views.TopBar;
 
 public class SimpleViewController extends ViewController<FrameLayout> {
 
-    public SimpleViewController(final Activity activity, String id) {
-        super(activity, id);
-        options = new Options();
+    public SimpleViewController(final Activity activity, String id, Options options) {
+        super(activity, id, options);
     }
 
     @Override

lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java

@@ -27,7 +27,7 @@ public class NavigationOptionsTest extends BaseTest {
     private static final Options.BooleanOptions TOP_BAR_HIDE_ON_SCROLL = True;
     private static final Options.BooleanOptions BOTTOM_TABS_ANIMATE_HIDE = True;
     private static final Options.BooleanOptions BOTTOM_TABS_HIDDEN = True;
-    private static final int BOTTOM_TABS_BADGE = 3;
+    private static final String BOTTOM_TABS_BADGE = "3";
     private static final String BOTTOM_TABS_CURRENT_TAB_ID = "ComponentId";
     private static final int BOTTOM_TABS_CURRENT_TAB_INDEX = 1;
     private TypefaceLoader mockLoader;
@@ -47,7 +47,7 @@ public class NavigationOptionsTest extends BaseTest {
     public void parsesJson() throws Exception {
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("bottomTabs", createTabBar());
+                .put("bottomTabs", createBottomTabs());
         Options result = Options.parse(mockLoader, json);
         assertResult(result);
     }
@@ -62,20 +62,18 @@ public class NavigationOptionsTest extends BaseTest {
         assertThat(result.topBarOptions.drawBehind).isEqualTo(TOP_BAR_DRAW_BEHIND);
         assertThat(result.topBarOptions.hideOnScroll).isEqualTo(TOP_BAR_HIDE_ON_SCROLL);
         assertThat(result.bottomTabsOptions.animateHide).isEqualTo(BOTTOM_TABS_ANIMATE_HIDE);
-        assertThat(result.bottomTabsOptions.hidden).isEqualTo(BOTTOM_TABS_HIDDEN);
-        assertThat(result.bottomTabsOptions.tabBadge).isEqualTo(BOTTOM_TABS_BADGE);
+        assertThat(result.bottomTabsOptions.visible).isEqualTo(BOTTOM_TABS_HIDDEN);
         assertThat(result.bottomTabsOptions.currentTabId.get()).isEqualTo(BOTTOM_TABS_CURRENT_TAB_ID);
         assertThat(result.bottomTabsOptions.currentTabIndex).isEqualTo(BOTTOM_TABS_CURRENT_TAB_INDEX);
     }
 
     @NonNull
-    private JSONObject createTabBar() throws JSONException {
+    private JSONObject createBottomTabs() throws JSONException {
         return new JSONObject()
                 .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
                 .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
-                .put("hidden", BOTTOM_TABS_HIDDEN)
-                .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
-                .put("tabBadge", BOTTOM_TABS_BADGE);
+                .put("visible", BOTTOM_TABS_HIDDEN)
+                .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE);
     }
 
     @NonNull
@@ -99,7 +97,7 @@ public class NavigationOptionsTest extends BaseTest {
                 .put("textColor", TOP_BAR_TEXT_COLOR)
                 .put("textFontSize", TOP_BAR_FONT_SIZE)
                 .put("textFontFamily", TOP_BAR_FONT_FAMILY)
-                .put("hidden", TOP_BAR_HIDDEN);
+                .put("visible", TOP_BAR_HIDDEN);
     }
 
     @NonNull
@@ -107,7 +105,7 @@ public class NavigationOptionsTest extends BaseTest {
         return new JSONObject()
                 .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
                 .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
-                .put("hidden", BOTTOM_TABS_HIDDEN)
+                .put("visible", BOTTOM_TABS_HIDDEN)
                 .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
                 .put("tabBadge", BOTTOM_TABS_BADGE);
     }
@@ -116,7 +114,7 @@ public class NavigationOptionsTest extends BaseTest {
     public void mergeDefaultOptions() throws Exception {
         JSONObject json = new JSONObject();
         json.put("topBar", createTopBar());
-        json.put("bottomTabs", createTabBar());
+        json.put("bottomTabs", createBottomTabs());
         Options defaultOptions = Options.parse(mockLoader, json);
         Options options = new Options();
 
@@ -133,7 +131,7 @@ public class NavigationOptionsTest extends BaseTest {
 
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
-                .put("bottomTabs", createTabBar());
+                .put("bottomTabs", createBottomTabs());
         Options options = Options.parse(mockLoader, json);
         options.withDefaultOptions(defaultOptions);
         assertResult(options);

lib/android/app/src/test/java/com/reactnativenavigation/utils/OptionHelper.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.utils;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.Text;
+
+public class OptionHelper {
+    public static Options createBottomTabOptions() {
+        Options options = new Options();
+        options.bottomTabOptions.title = new Text("Tab");
+        options.bottomTabOptions.icon = new Text("http://127.0.0.1/icon.png");
+        return options;
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/BottomTabsControllerTest.java

@@ -1,21 +1,31 @@
 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.*;
-import android.support.annotation.*;
-import android.support.design.widget.*;
-import android.view.*;
-import android.widget.*;
-
-import com.reactnativenavigation.*;
-import com.reactnativenavigation.mocks.*;
-
-import org.assertj.core.api.iterable.*;
-import org.junit.*;
-
-import java.util.*;
-
-import static org.assertj.core.api.Java6Assertions.*;
-import static org.mockito.Mockito.*;
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.view.View;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.ImageLoaderMock;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.OptionHelper;
+import com.reactnativenavigation.views.BottomTabs;
+
+import org.assertj.core.api.iterable.Extractor;
+import org.junit.Test;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
 
 public class BottomTabsControllerTest extends BaseTest {
 
@@ -26,29 +36,31 @@ public class BottomTabsControllerTest extends BaseTest {
     private ViewController child3;
     private ViewController child4;
     private ViewController child5;
+    private Options tabOptions = OptionHelper.createBottomTabOptions();
+    private ImageLoader imageLoaderMock = ImageLoaderMock.mock();
 
     @Override
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new BottomTabsController(activity, "uut");
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
-        child4 = new SimpleViewController(activity, "child4");
-        child5 = new SimpleViewController(activity, "child5");
+        uut = new BottomTabsController(activity, imageLoaderMock, "uut", new Options());
+        child1 = new SimpleViewController(activity, "child1", tabOptions);
+        child2 = new SimpleViewController(activity, "child2", tabOptions);
+        child3 = new SimpleViewController(activity, "child3", tabOptions);
+        child4 = new SimpleViewController(activity, "child4", tabOptions);
+        child5 = new SimpleViewController(activity, "child5", tabOptions);
     }
 
     @Test
     public void containsRelativeLayoutView() throws Exception {
         assertThat(uut.getView()).isInstanceOf(RelativeLayout.class);
-        assertThat(uut.getView().getChildAt(0)).isInstanceOf(BottomNavigationView.class);
+        assertThat(uut.getView().getChildAt(0)).isInstanceOf(BottomTabs.class);
     }
 
     @Test(expected = RuntimeException.class)
     public void setTabs_ThrowWhenMoreThan5() throws Exception {
         List<ViewController> tabs = createTabs();
-        tabs.add(new SimpleViewController(activity, "6"));
+        tabs.add(new SimpleViewController(activity, "6", tabOptions));
         uut.setTabs(tabs);
     }
 
@@ -75,7 +87,7 @@ public class BottomTabsControllerTest extends BaseTest {
     public void findControllerById_ReturnsSelfOrChildren() throws Exception {
         assertThat(uut.findControllerById("123")).isNull();
         assertThat(uut.findControllerById(uut.getId())).isEqualTo(uut);
-        StackController inner = new StackController(activity, "inner");
+        StackController inner = new StackController(activity, "inner", tabOptions);
         inner.animatePush(child1, new MockPromise());
         assertThat(uut.findControllerById(child1.getId())).isNull();
         uut.setTabs(Collections.singletonList(inner));

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ComponentViewControllerTest.java

@@ -25,7 +25,7 @@ public class ComponentViewControllerTest extends BaseTest {
         super.beforeEach();
         Activity activity = newActivity();
         view = spy(new TestComponentLayout(activity, new TestReactView(activity)));
-        ParentController<StackLayout> parentController = new StackController(activity, "stack");
+        ParentController<StackLayout> parentController = new StackController(activity, "stack", new Options());
         uut = new ComponentViewController(activity, "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options());
         uut.setParentController(parentController);
         parentController.ensureViewIsCreated();

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/NavigatorTest.java

@@ -1,21 +1,30 @@
 package com.reactnativenavigation.viewcontrollers;
 
-import android.app.*;
-import android.support.annotation.*;
+import android.app.Activity;
+import android.support.annotation.NonNull;
 
-import com.reactnativenavigation.*;
-import com.reactnativenavigation.mocks.*;
-import com.reactnativenavigation.parse.*;
-import com.reactnativenavigation.utils.*;
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.ImageLoaderMock;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleComponentViewController;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.OptionHelper;
 
-import org.junit.*;
+import org.junit.Test;
 
-import java.util.*;
+import java.util.Arrays;
 
 import javax.annotation.Nullable;
 
-import static org.assertj.core.api.Java6Assertions.*;
-import static org.mockito.Mockito.*;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
 
 public class NavigatorTest extends BaseTest {
     private Activity activity;
@@ -26,20 +35,22 @@ public class NavigatorTest extends BaseTest {
     private ViewController child3;
     private ViewController child4;
     private ViewController child5;
-
+    private Options tabOptions = OptionHelper.createBottomTabOptions();
+    private ImageLoader imageLoaderMock;
 
     @Override
     public void beforeEach() {
         super.beforeEach();
+        imageLoaderMock = ImageLoaderMock.mock();
         activity = newActivity();
         uut = new Navigator(activity);
-        parentController = new StackController(activity, "stack");
+        parentController = new StackController(activity, "stack", new Options());
         parentController.ensureViewIsCreated();
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
-        child4 = new SimpleViewController(activity, "child4");
-        child5 = new SimpleViewController(activity, "child5");
+        child1 = new SimpleViewController(activity, "child1", tabOptions);
+        child2 = new SimpleViewController(activity, "child2", tabOptions);
+        child3 = new SimpleViewController(activity, "child3", tabOptions);
+        child4 = new SimpleViewController(activity, "child4", tabOptions);
+        child5 = new SimpleViewController(activity, "child5", tabOptions);
     }
 
     @Test
@@ -94,7 +105,7 @@ public class NavigatorTest extends BaseTest {
         bottomTabsController.setTabs(Arrays.asList(stack1, stack2));
         uut.setRoot(bottomTabsController, new MockPromise());
 
-        SimpleViewController newChild = new SimpleViewController(activity, "new child");
+        SimpleViewController newChild = new SimpleViewController(activity, "new child", tabOptions);
         uut.push(child2.getId(), newChild, new MockPromise());
 
         assertThat(stack1.getChildControllers()).doesNotContain(newChild);
@@ -223,12 +234,12 @@ public class NavigatorTest extends BaseTest {
 
     @NonNull
     private BottomTabsController newTabs() {
-        return new BottomTabsController(activity, "tabsController");
+        return new BottomTabsController(activity, imageLoaderMock, "tabsController", new Options());
     }
 
     @NonNull
     private StackController newStack() {
-        return new StackController(activity, "stack" + CompatUtils.generateViewId());
+        return new StackController(activity, "stack" + CompatUtils.generateViewId(), tabOptions);
     }
 
     @Test

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/OptionsApplyingTest.java

@@ -44,7 +44,7 @@ public class OptionsApplyingTest extends BaseTest {
                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions
         );
-        stackController = new StackController(activity, "stack");
+        stackController = new StackController(activity, "stack", new Options());
         stackController.ensureViewIsCreated();
         uut.setParentController(stackController);
     }
@@ -62,7 +62,7 @@ public class OptionsApplyingTest extends BaseTest {
     public void initialOptionsAppliedOnAppear() throws Exception {
         assertThat(uut.getOptions()).isSameAs(initialNavigationOptions);
         initialNavigationOptions.topBarOptions.title = new Text("the title");
-        StackController stackController = new StackController(activity, "stackId");
+        StackController stackController = new StackController(activity, "stackId", new Options());
         stackController.animatePush(uut, new MockPromise() {});
         assertThat(stackController.getTopBar().getTitle()).isEmpty();
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ParentControllerTest.java

@@ -7,6 +7,7 @@ import android.widget.*;
 
 import com.reactnativenavigation.*;
 import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.parse.Options;
 
 import org.junit.*;
 
@@ -26,7 +27,7 @@ public class ParentControllerTest extends BaseTest {
         super.beforeEach();
         activity = newActivity();
         children = new ArrayList<>();
-        uut = new ParentController(activity, "uut") {
+        uut = new ParentController(activity, "uut", new Options()) {
 
             @NonNull
             @Override
@@ -54,8 +55,8 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_ChildById() throws Exception {
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
-        SimpleViewController child2 = new SimpleViewController(activity, "child2");
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
+        SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         children.add(child1);
         children.add(child2);
 
@@ -65,9 +66,9 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Recursive() throws Exception {
-        StackController stackController = new StackController(activity, "stack");
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
-        SimpleViewController child2 = new SimpleViewController(activity, "child2");
+        StackController stackController = new StackController(activity, "stack", new Options());
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
+        SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         stackController.animatePush(child1, new MockPromise());
         stackController.animatePush(child2, new MockPromise());
         children.add(stackController);
@@ -77,7 +78,7 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void destroy_DestroysChildren() throws Exception {
-        ViewController child1 = spy(new SimpleViewController(activity, "child1"));
+        ViewController child1 = spy(new SimpleViewController(activity, "child1", new Options()));
         children.add(child1);
 
         verify(child1, times(0)).destroy();
@@ -87,8 +88,8 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void optionsAreClearedWhenChildIsAppeared() throws Exception {
-        StackController stackController = spy(new StackController(activity, "stack"));
-        SimpleViewController child1 = new SimpleViewController(activity, "child1");
+        StackController stackController = spy(new StackController(activity, "stack", new Options()));
+        SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         stackController.animatePush(child1, new MockPromise());
 
         child1.onViewAppeared();

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackControllerTest.java

@@ -5,6 +5,7 @@ import android.view.View;
 
 import com.reactnativenavigation.*;
 import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.parse.Options;
 
 import org.assertj.core.api.iterable.*;
 import org.junit.*;
@@ -26,10 +27,10 @@ public class StackControllerTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new StackController(activity, "uut");
-        child1 = new SimpleViewController(activity, "child1");
-        child2 = new SimpleViewController(activity, "child2");
-        child3 = new SimpleViewController(activity, "child3");
+        uut = new StackController(activity, "uut", new Options());
+        child1 = new SimpleViewController(activity, "child1", new Options());
+        child2 = new SimpleViewController(activity, "child2", new Options());
+        child3 = new SimpleViewController(activity, "child3", new Options());
     }
 
     @Test
@@ -84,7 +85,7 @@ public class StackControllerTest extends BaseTest {
         uut.animatePush(child1, new MockPromise());
         assertThat(child1.getParentController()).isEqualTo(uut);
 
-        StackController anotherNavController = new StackController(activity, "another");
+        StackController anotherNavController = new StackController(activity, "another", new Options());
         anotherNavController.animatePush(child2, new MockPromise());
         assertThat(child2.getParentController()).isEqualTo(anotherNavController);
     }
@@ -264,7 +265,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Deeply() throws Exception {
-        StackController stack = new StackController(activity, "stack2");
+        StackController stack = new StackController(activity, "stack2", new Options());
         stack.animatePush(child2, new MockPromise());
         uut.animatePush(stack, new MockPromise());
         assertThat(uut.findControllerById(child2.getId())).isEqualTo(child2);

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopTabsControllerMock.java

@@ -1,25 +0,0 @@
-package com.reactnativenavigation.viewcontrollers;
-
-import android.app.*;
-import android.support.annotation.*;
-import android.view.*;
-
-import java.util.*;
-
-public class TopTabsControllerMock extends ParentController {
-    TopTabsControllerMock(Activity activity, String id) {
-        super(activity, id);
-    }
-
-    @NonNull
-    @Override
-    protected ViewGroup createView() {
-        return null;
-    }
-
-    @NonNull
-    @Override
-    public Collection<? extends ViewController> getChildControllers() {
-        return null;
-    }
-}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopTabsViewControllerTest.java

@@ -50,7 +50,7 @@ public class TopTabsViewControllerTest extends BaseTest {
         uut = spy(new TopTabsController(activity, "componentId", tabControllers, layoutCreator, options));
         tabControllers.forEach(viewController -> viewController.setParentController(uut));
 
-        parentController = spy(new StackController(activity, "stackId"));
+        parentController = spy(new StackController(activity, "stackId", new Options()));
         uut.setParentController(parentController);
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ViewControllerTest.java

@@ -9,6 +9,7 @@ import android.widget.LinearLayout;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.Options;
 
 import org.assertj.android.api.Assertions;
 import org.junit.Test;
@@ -31,7 +32,7 @@ public class ViewControllerTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new SimpleViewController(activity, "uut");
+        uut = new SimpleViewController(activity, "uut", new Options());
     }
 
     @Test
@@ -47,7 +48,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void canOverrideViewCreation() throws Exception {
         final FrameLayout otherView = new FrameLayout(activity);
-        ViewController myController = new ViewController(activity, "vc") {
+        ViewController myController = new ViewController(activity, "vc", new Options()) {
             @Override
             protected FrameLayout createView() {
                 return otherView;
@@ -59,7 +60,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void holdsAReferenceToStackControllerOrNull() throws Exception {
         assertThat(uut.getParentController()).isNull();
-        StackController nav = new StackController(activity, "stack");
+        StackController nav = new StackController(activity, "stack", new Options());
         nav.animatePush(uut, new MockPromise());
         assertThat(uut.getParentController()).isEqualTo(nav);
     }
@@ -143,7 +144,7 @@ public class ViewControllerTest extends BaseTest {
 
     @Test
     public void onDestroy_RemovesGlobalLayoutListener() throws Exception {
-        new SimpleViewController(activity, "ensureNotNull").destroy();
+        new SimpleViewController(activity, "ensureNotNull", new Options()).destroy();
 
         ViewController spy = spy(uut);
         View view = spy.getView();

lib/ios/RNNBottomTabsOptions.h

@@ -13,6 +13,8 @@
 @property (nonatomic, strong) NSNumber* hideShadow;
 @property (nonatomic, strong) NSNumber* backgroundColor;
 @property (nonatomic, strong) NSNumber* textColor;
+@property (nonatomic, strong) NSNumber* tabColor;
+@property (nonatomic, strong) NSNumber* selectedTabColor;
 @property (nonatomic, strong) NSNumber* selectedTextColor;
 @property (nonatomic, strong) NSString* fontFamily;
 @property (nonatomic, strong) NSNumber* fontSize;

lib/ios/RNNControllerFactory.m

@@ -97,18 +97,20 @@
 
 - (UIViewController<RNNRootViewProtocol> *)createStack:(RNNLayoutNode*)node {
 	RNNNavigationController* vc = [[RNNNavigationController alloc] init];
-	
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"options"]];
 	NSMutableArray* controllers = [NSMutableArray new];
 	for (NSDictionary* child in node.children) {
 		[controllers addObject:[self fromTree:child]];
 	}
 	[vc setViewControllers:controllers];
+	[vc setOptions:options];
 	
 	return vc;
 }
 
 -(UIViewController<RNNRootViewProtocol> *)createTabs:(RNNLayoutNode*)node {
 	RNNTabBarController* vc = [[RNNTabBarController alloc] init];
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"options"]];
 	
 	NSMutableArray* controllers = [NSMutableArray new];
 	for (NSDictionary *child in node.children) {
@@ -119,6 +121,7 @@
 		[controllers addObject:childVc];
 	}
 	[vc setViewControllers:controllers];
+	[vc setOptions:options];
 	
 	return vc;
 }

lib/ios/RNNNavigationController.m

@@ -16,6 +16,10 @@
 	return rootVC.isAnimated;
 }
 
+- (void)setOptions:(RNNNavigationOptions *)options {
+	((UIViewController<RNNRootViewProtocol>*)self.topViewController).options = options;
+}
+
 - (NSString *)componentId {
 	return ((UIViewController<RNNRootViewProtocol>*)self.topViewController).componentId;
 }

lib/ios/RNNRootViewProtocol.h

@@ -2,6 +2,9 @@
 
 @protocol RNNRootViewProtocol <NSObject, UINavigationControllerDelegate>
 
+@optional
+- (void)setOptions:(RNNNavigationOptions*)options;
+
 @required
 
 - (BOOL)isCustomTransitioned;

lib/ios/RNNTabBarController.m

@@ -41,6 +41,10 @@
 	return YES;
 }
 
+- (void)setOptions:(RNNNavigationOptions *)options {
+	[((UIViewController<RNNRootViewProtocol>*)self.selectedViewController) setOptions:options];
+}
+
 - (NSString *)componentId {
 	return ((UIViewController<RNNRootViewProtocol>*)self.selectedViewController).componentId;
 }

lib/src/commands/LayoutTreeCrawler.ts

@@ -2,10 +2,15 @@ import * as _ from 'lodash';
 import { OptionsProcessor } from './OptionsProcessor';
 import { LayoutType, isLayoutType } from './LayoutType';
 
+export interface Data {
+  name?: string;
+  options?: any;
+  passProps?: any;
+}
 export interface LayoutNode {
   id?: string;
   type: LayoutType;
-  data: object;
+  data: Data;
   children: LayoutNode[];
 }
 
@@ -24,6 +29,7 @@ export class LayoutTreeCrawler {
     if (node.type === LayoutType.Component) {
       this._handleComponent(node);
     }
+    OptionsProcessor.processOptions(node.data.options);
     _.forEach(node.children, this.crawl);
   }
 
@@ -31,7 +37,6 @@ export class LayoutTreeCrawler {
     this._assertComponentDataName(node);
     this._savePropsToStore(node);
     this._applyStaticOptions(node);
-    OptionsProcessor.processOptions(node.data.options);
   }
 
   _savePropsToStore(node) {

playground/src/screens/StaticLifecycleOverlay.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const { Component } = require('react');
 const { View, Text } = require('react-native');
-const Navigation = require('react-native-navigation');
+const { Navigation } = require('react-native-navigation');
 
 class StaticLifecycleOverlay extends Component {
   constructor(props) {

playground/src/screens/WelcomeScreen.js

@@ -59,22 +59,17 @@ class WelcomeScreen extends Component {
                     passProps: {
                       text: 'This is tab 1',
                       myFunction: () => 'Hello from a function!'
-                    },
-                    options: {
-                      bottomTab: {
-                        title: 'Tab 1',
-                        testID: testIDs.FIRST_TAB_BAR_BUTTON
-                      },
-                      bottomTabs: {
-                        textColor: '#12766b',
-                        selectedTextColor: 'red',
-                        fontFamily: 'HelveticaNeue-Italic',
-                        fontSize: 13
-                      }
                     }
                   }
                 }
-              ]
+              ],
+              options: {
+                bottomTab: {
+                  title: 'Tab 1',
+                  icon: require('../images/one.png'),
+                  testID: testIDs.FIRST_TAB_BAR_BUTTON
+                }
+              }
             }
           },
           {
@@ -85,19 +80,29 @@ class WelcomeScreen extends Component {
                     name: 'navigation.playground.TextScreen',
                     passProps: {
                       text: 'This is tab 2'
-                    },
-                    options: {
-                      bottomTab: {
-                        title: 'Tab 2',
-                        testID: testIDs.SECOND_TAB_BAR_BUTTON
-                      }
                     }
                   }
                 }
-              ]
+              ],
+              options: {
+                bottomTab: {
+                  title: 'Tab 2',
+                  icon: require('../images/two.png'),
+                  testID: testIDs.SECOND_TAB_BAR_BUTTON
+                }
+              }
             }
           }
-        ]
+        ],
+        options: {
+          bottomTabs: {
+            tabColor: 'red',
+            selectedTabColor: 'blue',
+            fontFamily: 'HelveticaNeue-Italic',
+            fontSize: 13,
+            testID: testIDs.BOTTOM_TABS_ELEMENT
+          }
+        }
       }
     });
   }
@@ -127,7 +132,14 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 1',
+                      icon: require('../images/one.png'),
+                      testID: testIDs.FIRST_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
@@ -141,7 +153,14 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 2',
+                      icon: require('../images/two.png'),
+                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               },
               {
@@ -155,10 +174,25 @@ class WelcomeScreen extends Component {
                         }
                       }
                     }
-                  ]
+                  ],
+                  options: {
+                    bottomTab: {
+                      title: 'Tab 3',
+                      icon: require('../images/three.png'),
+                      testID: testIDs.SECOND_TAB_BAR_BUTTON
+                    }
+                  }
                 }
               }
-            ]
+            ],
+            options: {
+              bottomTabs: {
+                tabColor: 'red',
+                selectedTabColor: 'blue',
+                fontFamily: 'HelveticaNeue-Italic',
+                fontSize: 13
+              }
+            }
           }
         },
         right: {