V2 overlay (#2105)

* V2 overlay skeleton (#2097)

* skeleton

* basic test

* remove useless files

* remove useles files

* semicolon

* refactoring

* rm useless files

* alert dialog more styles

* hot fix

* tests

* e2e with own alert

* fix test

* fix ios e2e

* custom dialog WIP

* WIP

* refactor custom dialog

* fix e2e

* gitignore

* fix js tests

* remove hardcode

* snackbar

* drop FAB for now

* fix test

.gitignore

@@ -210,16 +210,19 @@ npm-debug.log
 # BUCK
 buck-out/
 \.buckd/
+
+#IDE files
 android/app/libs
 android/keystores/debug.keystore
-AndroidE2E/app/.settings
-AndroidE2E/.settings
-AndroidE2E/app/.project
-AndroidE2E/app/.classpath
 AndroidE2E/.project
-lib/android/.settings
+AndroidE2E/app/.project
 lib/android/.project
-lib/android/app/.settings
-playground/android/.settings
 playground/android/.project
-playground/android/app/.settings
+AndroidE2E/app/.classpath
+AndroidE2E/app/.settings/
+AndroidE2E/app/bin/
+lib/android/.settings/
+lib/android/app/.settings/
+playground/android/.settings/
+playground/android/app/.settings/
+AndroidE2E/.settings/

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/OverlayTest.java

@@ -11,10 +11,16 @@ public class OverlayTest extends BaseTest {
 	@Test
 	public void testOverlayAlertAppear() throws Exception {
 		elementByText("PUSH OPTIONS SCREEN").click();
-		elementByText("SHOW ALERT").click();
-		assertExists(By.text("test!"));
+		elementByText("SHOW CUSTOM ALERT").click();
+		assertExists(By.text("Test view"));
 		elementByText("OK").click();
 		assertExists(By.text("Static Title"));
+	}
 
+	@Test
+	public void testSnackbarAppear() throws Exception {
+		elementByText("PUSH OPTIONS SCREEN").click();
+		elementByText("SHOW SNACKBAR").click();
+		assertExists(By.text("Test!"));
 	}
 }

README.md

@@ -65,12 +65,11 @@ v2 is written in Test Driven Development. We have a test for every feature inclu
 | resetTo             |   ✅        |	✅|
 | showModal              |  ✅        |	✅|
 | dismissModal           |     ✅       |	✅|
-| showOverlay             |  [Contribute](/docs/docs/CONTRIBUTING.md)         |	WIP @cool04ek |
-| dismissOverlay             |  [Contribute](/docs/docs/CONTRIBUTING.md)         |	WIP @cool04ek |
+| showOverlay             |  [Contribute](/docs/docs/CONTRIBUTING.md)         |	✅ |
+| dismissOverlay             |  [Contribute](/docs/docs/CONTRIBUTING.md)         |	✅ |
 | customTransition            |   ✅        |	[Contribute](/docs/docs/CONTRIBUTING.md) |
 | Screen Visibility        | ✅     |✅|
-| async commands (await push)     |  [Contribute](/docs/docs/CONTRIBUTING.md)        | ✅   |
-
+| async commands (await push)     |  [Contribute](/docs/docs/CONTRIBUTING.md)        |[Contribute](/docs/docs/CONTRIBUTING.md)   |
 
 ### Navigation Options
 

e2e/TopLevelApi.test.js

@@ -35,9 +35,9 @@ describe('top level api', () => {
     await elementByLabel('Push Lifecycle Screen').tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
     await Utils.tapBackIos();
-    await expect(elementByLabel('didDisappear')).toBeVisible();
-    await element(by.traits(['button']).and(by.label('OK'))).atIndex(0).tap();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
+    await element(by.traits(['button']).and(by.label('OK'))).atIndex(0).tap();
+    await expect(elementByLabel('didDisappear')).toBeVisible();
   });
 });
 

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

@@ -0,0 +1,46 @@
+package com.reactnativenavigation.parse;
+
+
+import android.support.annotation.ColorInt;
+
+import org.json.JSONObject;
+
+import static com.reactnativenavigation.parse.OverlayOptions.NO_COLOR;
+
+public class ButtonOptions {
+
+	public static ButtonOptions parse(JSONObject json) {
+		ButtonOptions options = new ButtonOptions();
+		if (json == null) return new ButtonOptions();
+
+		//TODO: parse
+		options.text = json.optString("text");
+		options.action = json.optString("action");
+		options.visible = json.optBoolean("visible", true);
+		options.textColor = json.optInt("textColor", NO_COLOR);
+
+		return options;
+	}
+
+	private String text = "";
+	private String action;
+	private boolean visible = false;
+	@ColorInt
+	private int textColor;
+
+	public String getText() {
+		return text;
+	}
+
+	public String getAction() {
+		return action;
+	}
+
+	public boolean isVisible() {
+		return visible;
+	}
+
+	public int getTextColor() {
+		return textColor;
+	}
+}

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

@@ -9,6 +9,7 @@ import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.SideMenuController;
 import com.reactnativenavigation.viewcontrollers.StackController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.overlay.DialogViewController;
 import com.reactnativenavigation.views.TopbarContainerViewCreator;
 
 import java.util.ArrayList;
@@ -40,6 +41,8 @@ public class LayoutFactory {
 				return createSideMenuLeft(node);
 			case SideMenuRight:
 				return createSideMenuRight(node);
+			case CustomDialog:
+				return createDialogContainer(node);
 			default:
 				throw new IllegalArgumentException("Invalid node type: " + node.type);
 		}
@@ -103,4 +106,11 @@ public class LayoutFactory {
 		tabsContainer.setTabs(tabs);
 		return tabsContainer;
 	}
+
+	private ViewController createDialogContainer(LayoutNode node) {
+		String id = node.id;
+		String name = node.data.optString("name");
+		ReactContainerViewCreator creator = new ReactContainerViewCreator(reactInstanceManager);
+		return new DialogViewController(activity, id, name, creator);
+	}
 }

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

@@ -13,7 +13,8 @@ public class LayoutNode {
 		SideMenuRoot,
 		SideMenuCenter,
 		SideMenuLeft,
-		SideMenuRight
+		SideMenuRight,
+		CustomDialog
 	}
 
 	public final String id;

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

@@ -1,24 +1,52 @@
 package com.reactnativenavigation.parse;
 
 
+import android.support.annotation.ColorInt;
+
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
 import org.json.JSONObject;
 
 public class OverlayOptions {
 
-	public static OverlayOptions parse(JSONObject json) {
-		if (json == null) return new OverlayOptions();
+	public static final int NO_COLOR = -1;
 
+	public static OverlayOptions parse(JSONObject json) {
 		OverlayOptions options = new OverlayOptions();
+		if (json == null) return options;
 
-		//TODO: parse
 		options.title = json.optString("title");
 		options.text = json.optString("text");
+		options.positiveButton = ButtonOptions.parse(json.optJSONObject("positiveButton"));
+		options.negativeButton = ButtonOptions.parse(json.optJSONObject("negativeButton"));
+		options.button = ButtonOptions.parse(json.optJSONObject("button"));
+		options.textColor = json.optInt("textColor", NO_COLOR);
+		options.duration = json.optString("duration");
+		options.backgroundColor = json.optInt("backgroundColor", NO_COLOR);
+
+		return options;
+	}
+
+	public static OverlayOptions create(ViewController containerView) {
+		OverlayOptions options = new OverlayOptions();
+		if (containerView == null) return options;
 
+		options.customView = containerView;
 		return options;
 	}
 
 	private String title = "";
 	private String text = "";
+	private ButtonOptions positiveButton;
+	private ButtonOptions negativeButton;
+	private ButtonOptions button;
+	@ColorInt
+	private int textColor;
+	private String duration;
+	@ColorInt
+	private int backgroundColor;
+
+	private ViewController customView;
 
 	public String getText() {
 		return text;
@@ -27,4 +55,32 @@ public class OverlayOptions {
 	public String getTitle() {
 		return title;
 	}
+
+	public ButtonOptions getPositiveButton() {
+		return positiveButton;
+	}
+
+	public ButtonOptions getNegativeButton() {
+		return negativeButton;
+	}
+
+	public ViewController getCustomView() {
+		return customView;
+	}
+
+	public ButtonOptions getButton() {
+		return button;
+	}
+
+	public int getTextColor() {
+		return textColor;
+	}
+
+	public String getDuration() {
+		return duration;
+	}
+
+	public int getBackgroundColor() {
+		return backgroundColor;
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OverlayPresenter.java

@@ -4,23 +4,24 @@ package com.reactnativenavigation.presentation;
 import android.content.Context;
 
 import com.reactnativenavigation.parse.OverlayOptions;
-import com.reactnativenavigation.viewcontrollers.overlay.AlertOverlay;
-import com.reactnativenavigation.viewcontrollers.overlay.CustomOverlay;
-import com.reactnativenavigation.viewcontrollers.overlay.FabOverlay;
-import com.reactnativenavigation.viewcontrollers.overlay.OverlayFabric;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.overlay.OverlayFactory;
 import com.reactnativenavigation.viewcontrollers.overlay.OverlayInterface;
-import com.reactnativenavigation.viewcontrollers.overlay.SnackbarOverlay;
 
 public class OverlayPresenter {
 
 	private OverlayInterface overlay;
 
-	public OverlayPresenter(Context context, String type, OverlayOptions options) {
-		this.overlay = OverlayFabric.create(type, context, options);
+	public OverlayPresenter(ViewController viewController, String type, OverlayOptions options) {
+		this.overlay = OverlayFactory.create(type, viewController, options);
 	}
 
 
 	public void show() {
 		overlay.show();
 	}
+
+	public void dismiss() {
+		overlay.dismiss();
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -16,8 +16,10 @@ import com.reactnativenavigation.parse.JSONParser;
 import com.reactnativenavigation.parse.LayoutNodeParser;
 import com.reactnativenavigation.parse.OverlayOptions;
 import com.reactnativenavigation.utils.UiThread;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.Navigator;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.overlay.OverlayFactory;
 
 import org.json.JSONObject;
 
@@ -133,12 +135,35 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 	}
 
 	@ReactMethod
-	public void showOverlay(final String type, final ReadableMap options, final Promise promise) {
-		final OverlayOptions overlayOptions = OverlayOptions.parse(JSONParser.parse(options));
+	public void showOverlay(final String type, final ReadableMap data, final Promise promise) {
+		if (OverlayFactory.Overlay.create(type) == OverlayFactory.Overlay.CustomDialog) {
+			final LayoutNode layoutTree = LayoutNodeParser.parse(JSONParser.parse(data));
+			handle(new Runnable() {
+				@Override
+				public void run() {
+					ViewController viewController = newLayoutFactory().create(layoutTree);
+					navigator().showOverlay(type, OverlayOptions.create(viewController), promise);
+				}
+			});
+		} else {
+			final OverlayOptions overlayOptions = OverlayOptions.parse(JSONParser.parse(data));
+			handle(new Runnable() {
+				@Override
+				public void run() {
+					navigator().showOverlay(type, overlayOptions, promise);
+				}
+			});
+		}
+
+
+	}
+
+	@ReactMethod
+	public void dismissOverlay() {
 		handle(new Runnable() {
 			@Override
 			public void run() {
-				navigator().showOverlay(type, overlayOptions, promise);
+				navigator().dismissOverlay();
 			}
 		});
 	}

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

@@ -21,6 +21,7 @@ public class Navigator extends ParentController {
 
 	private final ModalStack modalStack = new ModalStack();
 	private ViewController root;
+	private OverlayPresenter overlayPresenter;
 
 	public Navigator(final Activity activity) {
 		super(activity, "navigator" + CompatUtils.generateViewId());
@@ -170,10 +171,15 @@ public class Navigator extends ParentController {
 	}
 
 	public void showOverlay(String type, OverlayOptions options, Promise promise) {
-		new OverlayPresenter(getActivity(), type, options).show();
+		overlayPresenter = new OverlayPresenter(root, type, options);
+		overlayPresenter.show();
 		promise.resolve(true);
 	}
 
+	public void dismissOverlay() {
+		overlayPresenter.dismiss();
+	}
+
 	static void rejectPromise(Promise promise) {
 		if (promise != null) {
 			promise.reject(new Throwable("Nothing to pop"));

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/AlertOverlay.java

@@ -6,23 +6,36 @@ import android.content.DialogInterface;
 import android.support.v7.app.AlertDialog;
 
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 
 public class AlertOverlay implements OverlayInterface {
 
 	private AlertDialog dialog;
 
 	@Override
-	public AlertOverlay create(Context context, OverlayOptions options) {
-		AlertDialog.Builder builder = new AlertDialog.Builder(context);
+	public AlertOverlay create(ViewController viewController, final OverlayOptions options) {
+		AlertDialog.Builder builder = new AlertDialog.Builder(viewController.getActivity());
 
 		builder.setTitle(options.getTitle());
 		builder.setMessage(options.getText());
-		builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
-			@Override
-			public void onClick(DialogInterface dialog, int which) {
-				dialog.dismiss();
-			}
-		});
+		if (options.getPositiveButton().isVisible()) {
+			builder.setPositiveButton(options.getPositiveButton().getText(), new DialogInterface.OnClickListener() {
+				@Override
+				public void onClick(DialogInterface dialog, int which) {
+					//TODO: perform action options.getPositiveButton().getAction();
+					dialog.dismiss();
+				}
+			});
+		}
+		if (options.getNegativeButton().isVisible()) {
+			builder.setNegativeButton(options.getNegativeButton().getText(), new DialogInterface.OnClickListener() {
+				@Override
+				public void onClick(DialogInterface dialog, int which) {
+					//TODO: perform action options.getNegativeButton().getAction();
+					dialog.dismiss();
+				}
+			});
+		}
 		dialog = builder.create();
 
 		return this;
@@ -32,4 +45,11 @@ public class AlertOverlay implements OverlayInterface {
 	public void show() {
 		dialog.show();
 	}
+
+	@Override
+	public void dismiss() {
+		if (dialog != null) {
+			dialog.dismiss();
+		}
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/CustomOverlay.java

@@ -4,17 +4,33 @@ package com.reactnativenavigation.viewcontrollers.overlay;
 import android.content.Context;
 
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.views.CustomDialog;
 
 public class CustomOverlay implements OverlayInterface {
 
+	private CustomDialog dialog;
+
 	@Override
-	public CustomOverlay create(Context context, OverlayOptions options) {
+	public CustomOverlay create(ViewController root, OverlayOptions options) {
 		//TODO; implement
+
+		ViewController viewController = options.getCustomView();
+		dialog = new CustomDialog(root.getActivity(), viewController.getView());
+
 		return this;
 	}
 
 	@Override
 	public void show() {
-		//TODO; implement
+		dialog.show();
+	}
+
+	@Override
+	public void dismiss() {
+		if (dialog != null) {
+			dialog.dismiss();
+		}
 	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/DialogViewController.java

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.viewcontrollers.overlay;
+
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.view.View;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+
+public class DialogViewController extends ViewController {
+
+	private ContainerViewController.ContainerViewCreator viewCreator;
+	private String containerName;
+
+	public DialogViewController(Activity activity, String id, String containerName, ContainerViewController.ContainerViewCreator viewCreator) {
+		super(activity, id);
+		this.viewCreator = viewCreator;
+		this.containerName = containerName;
+	}
+
+	@NonNull
+	@Override
+	protected View createView() {
+		return viewCreator.create(getActivity(), getId(), containerName).asView();
+	}
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/FabOverlay.java

@@ -1,21 +0,0 @@
-package com.reactnativenavigation.viewcontrollers.overlay;
-
-
-import android.content.Context;
-
-import com.reactnativenavigation.parse.OverlayOptions;
-
-public class FabOverlay implements OverlayInterface {
-
-
-	@Override
-	public FabOverlay create(Context context, OverlayOptions options) {
-		//TODO; implement
-		return this;
-	}
-
-	@Override
-	public void show() {
-		//TODO; implement
-	}
-}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayFabric.java → lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayFactory.java

@@ -4,13 +4,13 @@ package com.reactnativenavigation.viewcontrollers.overlay;
 import android.content.Context;
 
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 
-public class OverlayFabric {
+public class OverlayFactory {
 
-	private enum Overlay {
+	public enum Overlay {
 		AlertDialog("alert", new AlertOverlay()),
 		Snackbar("snackbar", new SnackbarOverlay()),
-		Fab("fab", new FabOverlay()),
 		CustomDialog("custom", new CustomOverlay());
 
 		private String name;
@@ -27,12 +27,12 @@ public class OverlayFabric {
 					return overlay;
 				}
 			}
-			return CustomDialog;
+			return AlertDialog;
 		}
 	}
 
-	public static OverlayInterface create(String type, Context context, OverlayOptions options) {
-		return Overlay.create(type).overlayInstance.create(context, options);
+	public static OverlayInterface create(String type, ViewController viewController, OverlayOptions options) {
+		return Overlay.create(type).overlayInstance.create(viewController, options);
 	}
 
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/OverlayInterface.java

@@ -1,11 +1,14 @@
 package com.reactnativenavigation.viewcontrollers.overlay;
 
 
+import android.app.Activity;
 import android.content.Context;
 
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 
 public interface OverlayInterface {
-	OverlayInterface create(Context context, OverlayOptions options);
+	OverlayInterface create(ViewController viewController, OverlayOptions options);
 	void show();
+	void dismiss();
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/overlay/SnackbarOverlay.java

@@ -1,21 +1,88 @@
 package com.reactnativenavigation.viewcontrollers.overlay;
 
 
+import android.app.Activity;
 import android.content.Context;
+import android.support.design.widget.Snackbar;
+import android.text.SpannableStringBuilder;
+import android.text.Spanned;
+import android.text.style.ForegroundColorSpan;
+import android.view.View;
 
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+import static com.reactnativenavigation.parse.OverlayOptions.NO_COLOR;
 
 public class SnackbarOverlay implements OverlayInterface {
 
+	private Snackbar snackbar;
+	private OverlayOptions options;
 
 	@Override
-	public SnackbarOverlay create(Context context, OverlayOptions options) {
-		//TODO; implement
+	public SnackbarOverlay create(ViewController viewController, OverlayOptions options) {
+		this.options = options;
+
+		init(viewController);
+		setAction();
+		setStyle();
+
 		return this;
 	}
 
+	private void init(ViewController viewController) {
+		snackbar = Snackbar.make(viewController.getView(),
+				options.getTextColor() == NO_COLOR ? options.getText() : getStyledText(),
+				getDuration(options.getDuration()));
+	}
+
+	private Spanned getStyledText() {
+		SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(options.getText());
+		spannableStringBuilder.setSpan(new ForegroundColorSpan(options.getTextColor()), 0,
+				spannableStringBuilder.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
+		return spannableStringBuilder;
+	}
+
 	@Override
 	public void show() {
-		//TODO; implement
+		snackbar.show();
+	}
+
+	@Override
+	public void dismiss() {
+		snackbar.dismiss();
+	}
+
+	private int getDuration(String duration) {
+		switch (duration) {
+			case "short":
+				return Snackbar.LENGTH_SHORT;
+			case "long":
+				return Snackbar.LENGTH_LONG;
+			case "indefinite":
+				return Snackbar.LENGTH_INDEFINITE;
+			default:
+				return Snackbar.LENGTH_SHORT;
+		}
+	}
+
+	private void setAction() {
+		if (options.getButton() != null) {
+			snackbar.setAction(options.getButton().getText(), new View.OnClickListener() {
+				@Override
+				public void onClick(View v) {
+					//TODO: perform action
+				}
+			});
+		}
+	}
+
+	private void setStyle() {
+		if (options.getButton() != null && options.getButton().getTextColor() != NO_COLOR) {
+			snackbar.setActionTextColor(options.getButton().getTextColor());
+		}
+		if (options.getBackgroundColor() != NO_COLOR) {
+			snackbar.getView().setBackgroundColor(options.getBackgroundColor());
+		}
 	}
 }

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

@@ -0,0 +1,29 @@
+package com.reactnativenavigation.views;
+
+import android.app.Dialog;
+import android.content.Context;
+import android.support.annotation.NonNull;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewTreeObserver;
+import android.view.WindowManager;
+
+import com.facebook.react.ReactRootView;
+
+
+public class CustomDialog extends Dialog {
+
+	private View container;
+
+	public CustomDialog(@NonNull Context context, @NonNull View container) {
+		super(context);
+
+		this.container = container;
+		init();
+	}
+
+	private void init() {
+		addContentView(container, new WindowManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
+	}
+}

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

@@ -1,5 +1,7 @@
 package com.reactnativenavigation.parse;
 
+import android.graphics.Color;
+
 import com.reactnativenavigation.BaseTest;
 
 import org.json.JSONObject;
@@ -20,10 +22,22 @@ public class OverlayOptionsTest extends BaseTest {
 		JSONObject json = new JSONObject();
 		json.put("title", "the title");
 		json.put("text", "the text");
+		JSONObject nestedButton = new JSONObject();
+		nestedButton.put("text", "OK");
+		nestedButton.put("action", "action");
+		json.put("positiveButton", nestedButton);
+		json.put("textColor", Color.RED);
+		json.put("duration", "short");
+		json.put("backgroundColor", Color.RED);
 
 		OverlayOptions result = OverlayOptions.parse(json);
 		assertThat(result.getTitle()).isEqualTo("the title");
 		assertThat(result.getText()).isEqualTo("the text");
+		assertThat(result.getPositiveButton().getText()).isEqualTo("OK");
+		assertThat(result.getPositiveButton().getAction()).isEqualTo("action");
+		assertThat(result.getTextColor()).isEqualTo(Color.RED);
+		assertThat(result.getDuration()).isEqualTo("short");
+		assertThat(result.getBackgroundColor()).isEqualTo(Color.RED);
 	}
 
 	@Test

lib/src/Navigation.js

@@ -71,6 +71,10 @@ class Navigation {
   showOverlay(type, options) {
     return this.commands.showOverlay(type, options);
   }
+
+  dismissOverlay() {
+    return this.commands.dismissOverlay();
+  }
 }
 
 const singleton = new Navigation();

lib/src/adapters/NativeCommandsSender.js

@@ -44,6 +44,11 @@ class NativeCommandsSender {
   showOverlay(type, options) {
     return this.nativeCommandsModule.showOverlay(type, options);
   }
+
+  dismissOverlay() {
+    this.nativeCommandsModule.dismissOverlay();
+    return Promise.resolve(true);
+  }
 }
 
 module.exports = NativeCommandsSender;

lib/src/commands/Commands.js

@@ -56,9 +56,21 @@ class Commands {
   }
 
   showOverlay(type, options) {
-    const input = _.cloneDeep(options);
-    OptionsProcessor.processOptions(input);
-    return this.nativeCommandsSender.showOverlay(type, input);
+    let promise;
+    if (type === 'custom') {
+      const layout = this.layoutTreeParser.createDialogContainer({ name: options });
+      this.layoutTreeCrawler.crawl(layout);
+      promise = this.nativeCommandsSender.showOverlay(type, layout);
+    } else {
+      const input = _.cloneDeep(options);
+      OptionsProcessor.processOptions(input);
+      promise = this.nativeCommandsSender.showOverlay(type, input);
+    }
+    return promise;
+  }
+
+  dismissOverlay() {
+    return this.nativeCommandsSender.dismissOverlay();
   }
 }
 

lib/src/commands/Commands.test.js

@@ -229,5 +229,18 @@ describe('Commands', () => {
       uut.showOverlay('alert', obj);
       expect(mockCommandsSender.showOverlay.mock.calls[0][1]).not.toBe(obj);
     });
+
+    it('resolves with the parsed layout', async () => {
+      mockCommandsSender.showOverlay.mockReturnValue(Promise.resolve('result'));
+      const result = await uut.showOverlay('custom', 'com.example.MyScreen');
+      expect(result).toEqual('result');
+    });
+  });
+
+  describe('dismissOverlay', () => {
+    it('check promis returns true', () => {
+      uut.dismissOverlay();
+      expect(mockCommandsSender.dismissOverlay).toHaveBeenCalledTimes(1);
+    });
   });
 });

lib/src/commands/LayoutTreeParser.js

@@ -23,6 +23,14 @@ class LayoutTreeParser {
     };
   }
 
+  createDialogContainer(data) {
+    return {
+      type: LayoutTypes.CustomDialog,
+      data,
+      children: []
+    };
+  }
+
   _createTabs(tabs) {
     return {
       type: LayoutTypes.BottomTabs,

lib/src/commands/LayoutTreeParser.test.js

@@ -292,4 +292,10 @@ describe('LayoutTreeParser', () => {
       expect(uut.createContainer({ foo: 'bar' })).toEqual({ type: 'Container', data: { foo: 'bar' }, children: [] });
     });
   });
+
+  describe('createDialogCOntainer', () => {
+    it('creates dialog container object with passed data', () => {
+      expect(uut.createDialogContainer({ foo: 'bar' })).toEqual({ type: 'CustomDialog', data: { foo: 'bar' }, children: [] });
+    });
+  });
 });

lib/src/commands/LayoutTypes.js

@@ -5,5 +5,6 @@ module.exports = {
   SideMenuRoot: 'SideMenuRoot',
   SideMenuCenter: 'SideMenuCenter',
   SideMenuLeft: 'SideMenuLeft',
-  SideMenuRight: 'SideMenuRight'
+  SideMenuRight: 'SideMenuRight',
+  CustomDialog: 'CustomDialog'
 };

playground/src/containers/CustomDialog.js

@@ -0,0 +1,47 @@
+const React = require('react');
+const { PureComponent } = require('react');
+
+const { View, Text, Button } = require('react-native');
+const Navigation = require('react-native-navigation');
+
+class CustomDialog extends PureComponent {
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>Test view</Text>
+        <Button title="OK" onPress={this.onCLickOk} />
+      </View>
+    );
+  }
+
+  onCLickOk() {
+    Navigation.dismissOverlay();
+  }
+}
+
+const styles = {
+  root: {
+    flex: 1,
+    backgroundColor: 'green',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+module.exports = CustomDialog;

playground/src/containers/LifecycleScreen.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const { Component } = require('react');
 
-const { View, Text, Button } = require('react-native');
+const { View, Text, Button, Platform } = require('react-native');
 
 const Navigation = require('react-native-navigation');
 
@@ -19,13 +19,29 @@ class LifecycleScreen extends Component {
   }
 
   didDisappear() {
-    setTimeout(() => {
+    if (Platform.OS === 'ios') {
       alert('didDisappear'); // eslint-disable-line no-alert
-    }, 1000);
+    } else {
+      Navigation.showOverlay('alert', {
+        text: 'didDisappear',
+        positiveButton: {
+          text: 'OK'
+        }
+      });
+    }
   }
 
   componentWillUnmount() {
-    alert('componentWillUnmount'); // eslint-disable-line no-alert
+    if (Platform.OS === 'ios') {
+      alert('componentWillUnmount'); // eslint-disable-line no-alert
+    } else {
+      Navigation.showOverlay('alert', {
+        text: 'componentWillUnmount',
+        positiveButton: {
+          text: 'OK'
+        }
+      });
+    }
   }
 
   onNavigationButtonPressed(id) {
@@ -37,7 +53,7 @@ class LifecycleScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
-        <Button title="Push to test didDisappear" onPress={this.onClickPush}/>
+        <Button title="Push to test didDisappear" onPress={this.onClickPush} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/containers/OptionsScreen.js

@@ -50,7 +50,8 @@ class OptionsScreen extends Component {
         <Button title="Show Top Bar" onPress={this.onClickShowTopBar} />
         <Button title="Hide Top Bar" onPress={this.onClickHideTopBar} />
         <Button title="scrollView Screen" onPress={this.onClickScrollViewScreen} />
-        <Button title="Show alert" onPress={this.onClickAlert} />
+        <Button title="Show custom alert" onPress={this.onClickAlert} />
+        <Button title="Show snackbar" onPress={this.onClickSnackbar} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
@@ -122,8 +123,19 @@ class OptionsScreen extends Component {
   }
 
   onClickAlert() {
-    Navigation.showOverlay('alert', {
-      text: 'test!'
+    Navigation.showOverlay('custom', 'navigation.playground.CustomDialog');
+  }
+
+  onClickSnackbar() {
+    Navigation.showOverlay('snackbar', {
+      text: 'Test!',
+      // textColor: 'red',
+      // backgroundColor: 'green',
+      duration: 'long',
+      button: {
+        text: 'Action',
+        textColor: 'blue'
+      }
     });
   }
 }

playground/src/containers/index.js

@@ -8,6 +8,7 @@ const OptionsScreen = require('./OptionsScreen');
 const OrientationSelectScreen = require('./OrientationSelectScreen');
 const OrientationDetectScreen = require('./OrientationDetectScreen');
 const ScrollViewScreen = require('./ScrollViewScreen');
+const CustomDialog = require('./CustomDialog');
 
 function registerContainers() {
   Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
@@ -19,6 +20,7 @@ function registerContainers() {
   Navigation.registerContainer(`navigation.playground.OptionsScreen`, () => OptionsScreen);
   Navigation.registerContainer(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
   Navigation.registerContainer(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
+  Navigation.registerContainer('navigation.playground.CustomDialog', () => CustomDialog);
 }
 
 module.exports = {