Native BottomSheets

.gitignore

@@ -245,4 +245,6 @@ lib/Mock/*.d.ts
 Mock.js
 Mock.d.ts
 
-Gemfile.lock
+Gemfile.lock
+
+playground/ios/.xcode.env.local

lib/android/app/build.gradle

@@ -194,7 +194,7 @@ dependencies {
 
     implementation 'androidx.appcompat:appcompat:1.3.1'
     implementation 'androidx.annotation:annotation:1.2.0'
-    implementation 'com.google.android.material:material:1.2.0-alpha03'
+    implementation 'com.google.android.material:material:1.9.0'
 
     implementation 'com.github.wix-playground:ahbottomnavigation:3.3.0'
 //    implementation project(':AHBottomNavigation')

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

@@ -22,6 +22,8 @@
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentPresenter;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
+import com.reactnativenavigation.viewcontrollers.sheet.SheetPresenter;
+import com.reactnativenavigation.viewcontrollers.sheet.SheetViewController;
 import com.reactnativenavigation.viewcontrollers.sidemenu.SideMenuController;
 import com.reactnativenavigation.viewcontrollers.sidemenu.SideMenuPresenter;
 import com.reactnativenavigation.viewcontrollers.stack.StackControllerBuilder;
@@ -32,6 +34,7 @@
 import com.reactnativenavigation.viewcontrollers.viewcontroller.Presenter;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
 import com.reactnativenavigation.views.component.ComponentViewCreator;
+import com.reactnativenavigation.views.sheet.SheetViewCreator;
 import com.reactnativenavigation.views.stack.topbar.TopBarBackgroundViewCreator;
 import com.reactnativenavigation.views.stack.topbar.titlebar.TitleBarButtonCreator;
 import com.reactnativenavigation.views.stack.topbar.titlebar.TitleBarReactViewCreator;
@@ -82,6 +85,8 @@ public ViewController<?> create(final LayoutNode node) {
 				return createComponent(node);
 			case ExternalComponent:
 				return createExternalComponent(context, node);
+			case Sheet:
+				return createSheet(node);
 			case Stack:
 				return createStack(node);
 			case BottomTabs:
@@ -101,6 +106,21 @@ public ViewController<?> create(final LayoutNode node) {
 		}
 	}
 
+	private ViewController<?> createSheet(LayoutNode node) {
+		String id = node.id;
+		String name = node.data.optString("name");
+		return new SheetViewController(activity,
+				childRegistry,
+				id,
+				name,
+				new SheetViewCreator(reactInstanceManager),
+				parseOptions(node.getOptions()),
+				new Presenter(activity, defaultOptions),
+				new SheetPresenter(defaultOptions),
+				reactInstanceManager
+		);
+	}
+
 	private ViewController<?> createSideMenuRoot(LayoutNode node) {
 		SideMenuController sideMenuController = new SideMenuController(activity,
 				childRegistry,

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

@@ -7,6 +7,7 @@
 
 public class LayoutNode {
 	public enum Type {
+        Sheet,
 		Component,
         ExternalComponent,
 		Stack,

lib/android/app/src/main/java/com/reactnativenavigation/options/layout/LayoutOptions.kt

@@ -6,6 +6,7 @@ import com.reactnativenavigation.options.OrientationOptions
 import com.reactnativenavigation.options.params.*
 import com.reactnativenavigation.options.params.Number
 import com.reactnativenavigation.options.parsers.BoolParser
+import com.reactnativenavigation.options.parsers.FloatParser
 import com.reactnativenavigation.options.parsers.NumberParser
 import org.json.JSONObject
 
@@ -19,6 +20,15 @@ class LayoutOptions {
     @JvmField
     var topMargin: Number = NullNumber()
 
+    @JvmField
+    var sheetFullScreen: Bool = NullBool()
+
+    @JvmField
+    var sheetBackdropOpacity: FloatParam = NullFloatParam()
+
+    @JvmField
+    var sheetBorderTopRadius: Number = NullNumber()
+
     @JvmField
     var adjustResize: Bool = NullBool()
 
@@ -38,6 +48,9 @@ class LayoutOptions {
         if (other.orientation.hasValue()) orientation = other.orientation
         if (other.direction.hasValue()) direction = other.direction
         if (other.adjustResize.hasValue()) adjustResize = other.adjustResize
+        if (other.sheetFullScreen.hasValue()) sheetFullScreen = other.sheetFullScreen
+        if (other.sheetBackdropOpacity.hasValue()) sheetBackdropOpacity = other.sheetBackdropOpacity
+        if (other.sheetBorderTopRadius.hasValue()) sheetBorderTopRadius = other.sheetBorderTopRadius
         insets.merge(other.insets, null)
     }
 
@@ -48,6 +61,9 @@ class LayoutOptions {
         if (!orientation.hasValue()) orientation = defaultOptions.orientation
         if (!direction.hasValue()) direction = defaultOptions.direction
         if (!adjustResize.hasValue()) adjustResize = defaultOptions.adjustResize
+        if (!sheetFullScreen.hasValue()) sheetFullScreen = defaultOptions.sheetFullScreen
+        if (!sheetBackdropOpacity.hasValue()) sheetBackdropOpacity = defaultOptions.sheetBackdropOpacity
+        if (!sheetBorderTopRadius.hasValue()) sheetBorderTopRadius = defaultOptions.sheetBorderTopRadius
         insets.merge(null, defaultOptions.insets)
 
     }
@@ -64,8 +80,11 @@ class LayoutOptions {
             result.orientation = OrientationOptions.parse(json)
             result.direction = LayoutDirection.fromString(json.optString("direction", ""))
             result.adjustResize = BoolParser.parse(json, "adjustResize")
+            result.sheetFullScreen = BoolParser.parse(json, "sheetFullScreen")
+            result.sheetBorderTopRadius = NumberParser.parse(json, "sheetBorderTopRadius")
+            result.sheetBackdropOpacity = FloatParser.parse(json, "sheetBackdropOpacity")
             return result
         }
     }
-
+    
 }

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

@@ -211,6 +211,15 @@ public void dismissAllOverlays(String commandId, Promise promise) {
         handle(() -> navigator().dismissAllOverlays(new NativeCommandListener("dismissAllOverlays", commandId, promise, eventEmitter, now)));
     }
 
+    @ReactMethod
+    public void setupSheetContentNodes(String componentId, int headerTag,  int contentTag,  int footerTag, Promise promise) {
+        try {
+            navigator().setupSheetContentNodes(componentId, headerTag, contentTag, footerTag);
+        } catch(Exception e) {} // Nothing to do
+
+        promise.resolve(null);
+    }
+
     private Navigator navigator() {
         return activity().getNavigator();
     }

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

@@ -24,7 +24,7 @@
 public class ReactView extends ReactRootView implements IReactView, Renderable {
 
     private final ReactInstanceManager reactInstanceManager;
-    private final String componentId;
+    public final String componentId;
     private final String componentName;
     private boolean isAttachedToReactInstance = false;
     private final JSTouchDispatcher jsTouchDispatcher;

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

@@ -9,6 +9,7 @@
 import com.reactnativenavigation.react.CommandListener;
 import com.reactnativenavigation.react.CommandListenerAdapter;
 import com.reactnativenavigation.react.events.EventEmitter;
+import com.reactnativenavigation.viewcontrollers.sheet.SheetViewController;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.overlay.ModalOverlay;
 
@@ -65,31 +66,48 @@ public void showModal(ViewController<?> viewController, ViewController<?> root,
     }
 
     public boolean dismissModal(String componentId, @Nullable ViewController<?> root, CommandListener listener) {
-        ViewController<?> toDismiss = findModalByComponentId(componentId);
+       ViewController<?> toDismiss = findModalByComponentId(componentId);
         if (toDismiss != null) {
-            boolean isDismissingTopModal = isTop(toDismiss);
-            modals.remove(toDismiss);
-            @Nullable ViewController<?> toAdd = isEmpty() ? root : isDismissingTopModal ? get(size() - 1) : null;
-            if (isDismissingTopModal) {
-                if (toAdd == null) {
-                    listener.onError("Could not dismiss modal");
+            if (toDismiss instanceof SheetViewController) {
+                SheetViewController sheetViewController = (SheetViewController) toDismiss;
+
+                if (sheetViewController.sheetView.isPresented()) {
+                    sheetViewController.sheetView.hide();
                     return false;
                 }
+
+                return doDismissModal(toDismiss, root, listener);
+            } else {
+                return doDismissModal(toDismiss, root, listener);
             }
-            presenter.dismissModal(toDismiss, toAdd, root, new CommandListenerAdapter(listener) {
-                @Override
-                public void onSuccess(String childId) {
-                    eventEmitter.emitModalDismissed(toDismiss.getId(), toDismiss.getCurrentComponentName(), 1);
-                    super.onSuccess(toDismiss.getId());
-                }
-            });
-            return true;
         } else {
             listener.onError("Nothing to dismiss");
             return false;
         }
     }
 
+    public boolean doDismissModal(ViewController<?> toDismiss, @Nullable ViewController<?> root, CommandListener listener) {
+        boolean isDismissingTopModal = isTop(toDismiss);
+        modals.remove(toDismiss);
+        @Nullable ViewController<?> toAdd = isEmpty() ? root : isDismissingTopModal ? get(size() - 1) : null;
+        if (isDismissingTopModal) {
+            if (toAdd == null) {
+                listener.onError("Could not dismiss modal");
+                return false;
+            }
+        }
+
+        presenter.dismissModal(toDismiss, toAdd, root, new CommandListenerAdapter(listener) {
+            @Override
+            public void onSuccess(String childId) {
+                eventEmitter.emitModalDismissed(toDismiss.getId(), toDismiss.getCurrentComponentName(), 1);
+                super.onSuccess(toDismiss.getId());
+            }
+        });
+
+        return true;
+    }
+
     public void dismissAllModals(@Nullable ViewController<?> root, Options mergeOptions, CommandListener listener) {
         if (modals.isEmpty()) {
             listener.onSuccess(perform(root, "", ViewController::getId));

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

@@ -23,6 +23,7 @@
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.overlay.OverlayManager;
 import com.reactnativenavigation.viewcontrollers.parent.ParentController;
+import com.reactnativenavigation.viewcontrollers.sheet.SheetViewController;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.Presenter;
 import com.reactnativenavigation.viewcontrollers.viewcontroller.RootPresenter;
@@ -249,6 +250,13 @@ private void applyOnStack(String fromId, CommandListener listener, Func1<StackCo
         }
     }
 
+    public void setupSheetContentNodes(String componentId, int headerTag,  int contentTag,  int footerTag) {
+        SheetViewController sheetController = (SheetViewController)findController(componentId);
+        if (sheetController != null) {
+            sheetController.setupContentViews(headerTag, contentTag, footerTag);
+        }
+    }
+
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         modalStack.onConfigurationChanged(newConfig);