Support showing Overlays and Modals before root is set (#3910)

Support displaying modals and overlays before root is set

lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java

 
 import android.annotation.TargetApi;
 import android.content.Intent;
+import android.graphics.Color;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AppCompatActivity;
 import android.view.KeyEvent;
+import android.view.View;
 
 import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 import com.facebook.react.modules.core.PermissionAwareActivity;
     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
+        addDefaultSplashLayout();
         navigator = new Navigator(this, new ChildControllersRegistry(), new ModalStack(this), new OverlayManager());
         getReactGateway().onActivityCreated(this);
     }
 
+    @Override
+    public void onPostCreate(@Nullable Bundle savedInstanceState) {
+        super.onPostCreate(savedInstanceState);
+        navigator.setContentLayout(findViewById(android.R.id.content));
+    }
+
     @Override
     protected void onResume() {
         super.onResume();
     public void onReload() {
         navigator.destroyViews();
     }
+
+    private void addDefaultSplashLayout() {
+        View view = new View(this);
+        view.setBackgroundColor(Color.WHITE);
+        setContentView(view);
+    }
 }

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

 import android.graphics.Color;
 import android.os.Build;
 import android.view.View;
-import android.view.ViewGroup;
 import android.view.ViewGroup.MarginLayoutParams;
 
 import com.reactnativenavigation.parse.Options;
         this.defaultOptions = defaultOptions;
     }
 
-    public void applyLayoutOptions(ViewGroup.LayoutParams layoutParams) {
-
+    public void mergeOptions(View view, Options options) {
+        mergeStatusBarOptions(view, options.statusBar);
     }
 
-    public void present(View view, Options options) {
+    public void applyOptions(View view, Options options) {
         Options withDefaultOptions = options.copy().withDefaultOptions(defaultOptions);
         applyOrientation(withDefaultOptions.layout.orientation);
         applyViewOptions(view, withDefaultOptions);
                     0 : UiUtils.getStatusBarHeight(activity);
         }
     }
+
+
+    private void mergeStatusBarOptions(View view, StatusBarOptions statusBar) {
+        mergeStatusBarBackgroundColor(statusBar);
+        mergeTextColorScheme(statusBar.textColorScheme);
+        mergeStatusBarVisible(view, statusBar.visible, statusBar.drawBehind);
+    }
+
+    private void mergeStatusBarBackgroundColor(StatusBarOptions statusBar) {
+        if (statusBar.backgroundColor.hasValue() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            activity.getWindow().setStatusBarColor(statusBar.backgroundColor.get(Color.BLACK));
+        }
+    }
+
+    private void mergeTextColorScheme(TextColorScheme scheme) {
+        if (!scheme.hasValue() || Build.VERSION.SDK_INT < Build.VERSION_CODES.M) return;
+        final View view = activity.getWindow().getDecorView();
+        if (scheme == TextColorScheme.Dark) {
+            int flags = view.getSystemUiVisibility();
+            flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
+            view.setSystemUiVisibility(flags);
+        } else {
+            clearDarkTextColorScheme(view);
+        }
+    }
+
+    private void mergeStatusBarVisible(View view, Bool visible, Bool drawBehind) {
+        if (visible.hasValue()) {
+            int flags = view.getSystemUiVisibility();
+            if (visible.isTrue()) {
+                flags &= ~View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN & ~View.SYSTEM_UI_FLAG_FULLSCREEN;
+            } else {
+                flags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_FULLSCREEN;
+            }
+            view.setSystemUiVisibility(flags);
+        } else if (drawBehind.hasValue()) {
+            if (drawBehind.isTrue()) {
+                view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
+            } else {
+                view.setSystemUiVisibility(~View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
+            }
+        }
+    }
+
 }

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

     @Override
     public void applyOptions(Options options) {
         super.applyOptions(options);
-        presenter.present(getView(), options);
+        presenter.applyOptions(getView(), options);
         if (isRoot()) {
             presenter.applyRootOptions(getView(), options);
         }
     }
 
+    @Override
+    public void mergeOptions(Options options) {
+        presenter.mergeOptions(getView(), options);
+        super.mergeOptions(options);
+    }
+
     @Override
     public void destroy() {
         if (!isDestroyed() && getView() instanceof Component) {

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

 import com.reactnativenavigation.presentation.OverlayManager;
 import com.reactnativenavigation.react.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
-import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 public class Navigator extends ParentController {
 
     private final ModalStack modalStack;
-    private ViewController root;
-    private FrameLayout rootLayout;
-    private FrameLayout contentLayout;
     private final OverlayManager overlayManager;
+    private ViewController root;
+    private final FrameLayout rootLayout;
+    private final FrameLayout modalsLayout;
+    private final FrameLayout overlaysLayout;
+    private ViewGroup contentLayout;
     private Options defaultOptions = new Options();
 
     @Override
         return defaultOptions;
     }
 
+    public FrameLayout getRootLayout() {
+        return rootLayout;
+    }
+
+    public void setEventEmitter(EventEmitter eventEmitter) {
+        modalStack.setEventEmitter(eventEmitter);
+    }
+
+    public void setContentLayout(ViewGroup contentLayout) {
+        this.contentLayout = contentLayout;
+        contentLayout.addView(rootLayout);
+        contentLayout.addView(modalsLayout);
+        contentLayout.addView(overlaysLayout);
+    }
+
     public Navigator(final Activity activity, ChildControllersRegistry childRegistry, ModalStack modalStack, OverlayManager overlayManager) {
         super(activity, childRegistry,"navigator" + CompatUtils.generateViewId(), new OptionsPresenter(activity, new Options()), new Options());
         this.modalStack = modalStack;
         this.overlayManager = overlayManager;
-    }
-
-    public FrameLayout getContentLayout() {
-        return contentLayout;
+        rootLayout = new FrameLayout(getActivity());
+        modalsLayout = new FrameLayout(getActivity());
+        overlaysLayout = new FrameLayout(getActivity());
+        modalStack.setModalsContainer(modalsLayout);
     }
 
     @NonNull
     @Override
     protected ViewGroup createView() {
-        rootLayout = new FrameLayout(getActivity());
-        contentLayout = new FrameLayout(getActivity());
-        rootLayout.addView(contentLayout);
-        modalStack.setContentLayout(contentLayout);
         return rootLayout;
     }
 
     }
 
     public void destroyViews() {
-        modalStack.dismissAllModals(new CommandListenerAdapter(), root);
+        modalStack.destroy();
         overlayManager.destroy();
         destroyRoot();
     }
 
     public void setRoot(final ViewController viewController, CommandListener commandListener) {
         destroyRoot();
-        if (view == null) {
-            getActivity().setContentView(getView());
+        if (isRootNotCreated()) {
+            removePreviousContentView();
+            getView();
         }
         root = viewController;
-        contentLayout.addView(viewController.getView());
+        rootLayout.addView(viewController.getView());
         if (viewController.options.animations.startApp.hasAnimation()) {
             new NavigationAnimator(viewController.getActivity(), new ElementTransitionManager())
                     .animateStartApp(viewController.getView(), viewController.options.animations.startApp, new AnimatorListenerAdapter() {
         }
     }
 
+    private void removePreviousContentView() {
+        contentLayout.removeViewAt(0);
+    }
+
     public void mergeOptions(final String componentId, Options options) {
         ViewController target = findControllerById(componentId);
         if (target != null) {
     }
 
     public void dismissModal(final String componentId, CommandListener listener) {
+        if (isRootNotCreated() && modalStack.size() == 1) {
+            listener.onError("Can not dismiss modal if root is not set and only one modal is displayed.");
+            return;
+        }
         modalStack.dismissModal(componentId, root, listener);
     }
 
     }
 
     public void showOverlay(ViewController overlay, CommandListener listener) {
-        overlayManager.show(rootLayout, overlay, listener);
+        overlayManager.show(overlaysLayout, overlay, listener);
     }
 
     public void dismissOverlay(final String componentId, CommandListener listener) {
                          " was not found.");
     }
 
-    public void setEventEmitter(EventEmitter eventEmitter) {
-        modalStack.setEventEmitter(eventEmitter);
+    private boolean isRootNotCreated() {
+        return view == null;
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java

 import com.reactnativenavigation.anim.ModalAnimator;
 import com.reactnativenavigation.parse.ModalPresentationStyle;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.react.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 
 public class ModalPresenter {
 
-    @Nullable private ViewGroup content;
+    private ViewGroup modalsContainer;
     private ModalAnimator animator;
     private Options defaultOptions = new Options();
-    private EventEmitter eventEmitter;
 
     ModalPresenter(ModalAnimator animator) {
         this.animator = animator;
     }
 
-    public void setContentLayout(ViewGroup contentLayout) {
-        this.content = contentLayout;
+    public void setModalsContainer(ViewGroup modalsLayout) {
+        this.modalsContainer = modalsLayout;
     }
 
     public void setDefaultOptions(Options defaultOptions) {
     }
 
     public void showModal(ViewController toAdd, ViewController toRemove, CommandListener listener) {
-        if (content == null) {
-            listener.onError("Could not show modal before setRoot is called");
+        if (modalsContainer == null) {
+            listener.onError("Can not show modal before activity is created");
             return;
         }
         Options options = toAdd.resolveCurrentOptions(defaultOptions);
         toAdd.setWaitForRender(options.animations.showModal.waitForRender);
-        content.addView(toAdd.getView());
+        modalsContainer.addView(toAdd.getView());
         if (options.animations.showModal.enable.isTrueOrUndefined()) {
             if (options.animations.showModal.waitForRender.isTrue()) {
                 toAdd.setOnAppearedListener(() -> animateShow(toAdd, toRemove, listener, options));
         });
     }
 
-    private void onShowModalEnd(ViewController toAdd, ViewController toRemove, CommandListener listener) {
-        if (toAdd.options.modal.presentationStyle != ModalPresentationStyle.OverCurrentContext) {
+    private void onShowModalEnd(ViewController toAdd, @Nullable ViewController toRemove, CommandListener listener) {
+        if (toRemove != null && toAdd.options.modal.presentationStyle != ModalPresentationStyle.OverCurrentContext) {
             toRemove.detachView();
         }
         listener.onSuccess(toAdd.getId());
     }
 
     public void dismissTopModal(ViewController toDismiss, @NonNull ViewController toAdd, CommandListener listener) {
-        if (content == null) {
-            listener.onError("Could not dismiss modal before setRoot is called");
+        if (modalsContainer == null) {
+            listener.onError("Can not dismiss modal before activity is created");
             return;
         }
-        toAdd.attachView(content, 0);
+        toAdd.attachView(modalsContainer, 0);
         dismissModal(toDismiss, listener);
     }
 
     public void dismissModal(ViewController toDismiss, CommandListener listener) {
-        if (content == null) {
-            listener.onError("Could not dismiss modal before setRoot is called");
+        if (modalsContainer == null) {
+            listener.onError("Can not dismiss modal before activity is created");
             return;
         }
         if (toDismiss.options.animations.dismissModal.enable.isTrueOrUndefined()) {

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalStack.java

         this.presenter = presenter;
     }
 
-    public void setContentLayout(ViewGroup contentLayout) {
-        presenter.setContentLayout(contentLayout);
+    public void setModalsContainer(ViewGroup modalsLayout) {
+        presenter.setModalsContainer(modalsLayout);
     }
 
     public void setDefaultOptions(Options defaultOptions) {
         presenter.showModal(viewController, toRemove, listener);
     }
 
-    public void dismissModal(String componentId, ViewController root, CommandListener listener) {
+    public boolean dismissModal(String componentId, @Nullable ViewController root, CommandListener listener) {
         ViewController toDismiss = findModalByComponentId(componentId);
         if (toDismiss != null) {
             boolean isTop = isTop(toDismiss);
             modals.remove(toDismiss);
-            ViewController toAdd = isEmpty() ? root : isTop ? get(size() - 1) : null;
+            @Nullable ViewController toAdd = isEmpty() ? root : isTop ? get(size() - 1) : null;
             CommandListenerAdapter onDismiss = new CommandListenerAdapter(listener) {
                 @Override
                 public void onSuccess(String childId) {
                 }
             };
             if (isTop) {
+                if (toAdd == null) {
+                    listener.onError("Could not dismiss modal");
+                    return false;
+                }
                 presenter.dismissTopModal(toDismiss, toAdd, onDismiss);
             } else {
                 presenter.dismissModal(toDismiss, onDismiss);
             }
+            return true;
         } else {
             listener.onError("Nothing to dismiss");
+            return false;
         }
     }
 
         if (peek().handleBack(listener)) {
             return true;
         }
-        dismissModal(peek().getId(), root, listener);
-        return true;
+        return dismissModal(peek().getId(), root, listener);
     }
 
     public ViewController peek() {
         }
         return null;
     }
+
+    public void destroy() {
+        for (ViewController modal : modals) {
+            modal.destroy();
+        }
+        modals.clear();
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java

         }
     }
 
+    protected void disableModalAnimations(ViewController... modals) {
+        disableShowModalAnimation(modals);
+        disableDismissModalAnimation(modals);
+    }
+
     protected void disableShowModalAnimation(ViewController... modals) {
         for (ViewController modal : modals) {
             modal.options.animations.showModal.enable = new Bool(false);

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

 package com.reactnativenavigation.viewcontrollers;
 
+import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.view.View;
+import android.widget.FrameLayout;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.TestActivity;
         child5 = new SimpleViewController(activity, childRegistry, "child5", tabOptions);
 
         activityController.visible();
+        activityController.postCreate(Bundle.EMPTY);
     }
 
     @Test
     }
 
     @Test
-    public void setRoot_setContentViewWhenFirstRootIsSet() {
-        assertThat(uut.view).isNull();
-        uut.setRoot(child1, new CommandListenerAdapter());
-        assertThat(uut.view).isNotNull();
+    public void setRoot_clearsSplashLayout() {
+        disableModalAnimations(child1);
+
+        FrameLayout content = activity.findViewById(android.R.id.content);
+        assertThat(content.getChildCount()).isEqualTo(4); // 3 frame layouts and the default splash layout
+
+        uut.setRoot(child2, new CommandListenerAdapter());
+
+        assertThat(content.getChildCount()).isEqualTo(3);
     }
 
     @Test
     public void setRoot_AddsChildControllerView() {
         uut.setRoot(child1, new CommandListenerAdapter());
-        assertIsChild(uut.getContentLayout(), child1.getView());
+        assertIsChild(uut.getRootLayout(), child1.getView());
     }
 
     @Test
     public void setRoot_ReplacesExistingChildControllerViews() {
         uut.setRoot(child1, new CommandListenerAdapter());
         uut.setRoot(child2, new CommandListenerAdapter());
-        assertIsChild(uut.getContentLayout(), child2.getView());
+        assertIsChild(uut.getRootLayout(), child2.getView());
     }
 
     @Test
         verify(parentVisibilityListener, times(2)).onViewAppeared(parentController.getView());
     }
 
+    @Test
+    public void dismissModal_rejectIfRootIsNotSetAndSingleModalIsDisplayed() {
+        disableModalAnimations(child1, child2);
+        uut.showModal(child1, new CommandListenerAdapter());
+        uut.showModal(child2, new CommandListenerAdapter());
+
+        CommandListenerAdapter listener1 = spy(new CommandListenerAdapter());
+        uut.dismissModal(child2.getId(), listener1);
+        verify(listener1).onSuccess(any());
+        assertThat(child2.isDestroyed()).isTrue();
+
+        CommandListenerAdapter listener2 = spy(new CommandListenerAdapter());
+        uut.dismissModal(child1.getId(), listener2);
+        verify(listener2).onError(any());
+        assertThat(child1.isDestroyed()).isFalse();
+    }
+
     @Test
     public void dismissAllModals_onViewAppearedInvokedOnRoot() {
         disablePushAnimation(child2);
         });
     }
 
+    @Test
+    public void handleBack_falseIfRootIsNotSetAndSingleModalIsDisplayed() {
+        disableShowModalAnimation(child1, child2, child3);
+        uut.showModal(child1, new CommandListenerAdapter());
+        uut.showModal(child2, new CommandListenerAdapter());
+
+        assertThat(uut.handleBack(new CommandListenerAdapter())).isTrue();
+        assertThat(uut.handleBack(new CommandListenerAdapter())).isFalse();
+    }
+
     @Test
     public void destroy_destroyedRoot() {
         disablePushAnimation(child1);
 
     @Test
     public void destroyViews() {
-        disableShowModalAnimation(child1);
         uut.setRoot(parentController, new CommandListenerAdapter());
         uut.showModal(child1, new CommandListenerAdapter());
         uut.showOverlay(child2, new CommandListenerAdapter());

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

         TopTabsLayoutCreator layoutCreator = Mockito.mock(TopTabsLayoutCreator.class);
         Mockito.when(layoutCreator.create()).thenReturn(topTabsLayout);
         OptionsPresenter presenter = new OptionsPresenter(activity, new Options());
+        options.topBar.buttons.back.visible = new Bool(false);
         uut = spy(new TopTabsController(activity, childRegistry, "componentId", tabControllers, layoutCreator, options, presenter));
         tabControllers.forEach(viewController -> viewController.setParentController(uut));
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/child/ChildControllerTest.java

         uut.applyOptions(options);
         verify(presenter, times(0)).applyRootOptions(uut.getView(), options);
     }
+
+    @Test
+    public void mergeOptions() {
+        Options options = new Options();
+        uut.mergeOptions(options);
+        verify(presenter).mergeOptions(uut.getView(), options);
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenterTest.java

 
         animator = spy(new ModalAnimator(activity));
         uut = new ModalPresenter(animator);
-        uut.setContentLayout(contentLayout);
+        uut.setModalsContainer(contentLayout);
         modal1 = spy(new SimpleViewController(activity, childRegistry, MODAL_ID_1, new Options()));
         modal2 = spy(new SimpleViewController(activity, childRegistry, MODAL_ID_2, new Options()));
     }
 
     @Test
     public void showModal_rejectIfContentIsNull() {
-        uut.setContentLayout(null);
+        uut.setModalsContainer(null);
         CommandListenerAdapter listener = Mockito.mock(CommandListenerAdapter.class);
         uut.showModal(modal1, modal2, listener);
         verify(listener).onError(any());
     public void dismissModal_previousViewIsAddedAtIndex0() {
         modal2.ensureViewIsCreated();
         FrameLayout spy = spy(new FrameLayout(newActivity()));
-        uut.setContentLayout(spy);
+        uut.setModalsContainer(spy);
         uut.dismissTopModal(modal1, modal2, new CommandListenerAdapter());
         verify(spy, times(1)).addView(modal2.getView(), 0);
     }
 
     @Test
     public void dismissTopModal_rejectIfContentIsNull() {
-        uut.setContentLayout(null);
+        uut.setModalsContainer(null);
         CommandListenerAdapter listener = Mockito.mock(CommandListenerAdapter.class);
         uut.dismissTopModal(modal1, modal2, listener);
         verify(listener).onError(any());
 
     @Test
     public void dismissModal_rejectIfContentIsNull() {
-        uut.setContentLayout(null);
+        uut.setModalsContainer(null);
         CommandListenerAdapter listener = Mockito.mock(CommandListenerAdapter.class);
         uut.dismissModal(modal1, listener);
         verify(listener).onError(any());

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/modal/ModalStackTest.java

         animator = spy(new ModalAnimatorMock(activity));
         presenter = spy(new ModalPresenter(animator));
         uut = new ModalStack(presenter);
-        uut.setContentLayout(activityContentView);
+        uut.setModalsContainer(activityContentView);
         uut.setEventEmitter(Mockito.mock(EventEmitter.class));
         modal1 = spy(new SimpleViewController(activity, childRegistry, MODAL_ID_1, new Options()));
         modal2 = spy(new SimpleViewController(activity, childRegistry, MODAL_ID_2, new Options()));
         verify(presenter).setDefaultOptions(defaultOptions);
     }
 
+    @Test
+    public void destroy() {
+        showModalsWithoutAnimation(modal1, modal2);
+        uut.destroy();
+        verify(modal1).destroy();
+        verify(modal2).destroy();
+    }
+
     private ViewController findModal(String id) {
         return uut.findControllerById(id);
     }
+
+    private void showModalsWithoutAnimation(ViewController... modals) {
+        for (ViewController modal : modals) {
+            showModalWithoutAnimation(modal);
+        }
+    }
+
+    private void showModalWithoutAnimation(ViewController modal) {
+        disableShowModalAnimation(modal);
+        uut.showModal(modal, rootController, new CommandListenerAdapter());
+    }
 }

playground/android/app/build.gradle

 
     defaultConfig {
         applicationId "com.reactnativenavigation.playground"
-        minSdkVersion 19
+        minSdkVersion 21
         targetSdkVersion 25
         versionCode 1
         versionName "1.0"

playground/android/app/src/main/java/com/reactnativenavigation/playground/MainActivity.java

 package com.reactnativenavigation.playground;
 
 import android.content.Intent;
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.widget.ImageView;
 
 import com.reactnativenavigation.NavigationActivity;
 
 public class MainActivity extends NavigationActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setSplashLayout();
+    }
+
+    private void setSplashLayout() {
+        ImageView img = new ImageView(this);
+        img.setImageDrawable(getDrawable(R.drawable.ic_android));
+        setContentView(img);
+    }
+
     @Override
     public void onWindowFocusChanged(boolean hasFocus) {
         dismissSystemAlertsToPreventDetoxFromTimingOut(hasFocus);

playground/android/app/src/main/res/drawable/ic_android.xml

+<vector android:height="64dp" android:tint="#A4C639"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="64dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
+</vector>

playground/src/app.js

 
 function start() {
   registerScreens();
-  Navigation.events().registerAppLaunchedListener(() => {
+  Navigation.events().registerAppLaunchedListener(async () => {
     Navigation.setDefaultOptions({
       bottomTab: {
         iconColor: '#1B4C77',
       }
     });
 
+    // await Navigation.showModal({
+    //   stack: {
+    //     children: [
+    //       {
+    //         component: {
+    //           name: 'navigation.playground.ModalScreen'
+    //         }
+    //       }
+    //     ]
+    //   }
+    // });
+
     Navigation.setRoot({
       root: {
         stack: {