Floating button(FAB) on React Native wont stay on top when a Modal, iOS Actionsheet, picker component is rendered

Question

Using an absolute positioned button in the higher order component will serve purpose in normal use cases but when a modal/actionsheet/picker etc is rendered the button no longer stays on top.

Answer 1

Unfortunately, this isn't possible. Modals, actionsheets, and alerts are rendered in a new window with a higher level and so they will cover everything. You also can't insert a window with a higher level containing your FAB, because then touch events wouldn't make it down to your regular view. More documentation on this here.

I would also argue that you shouldn't try to accomplish this. An action picker like in your screenshot should absolutely cover that action button, and if you're presenting a modal then you could always try adding a new FAB to that instead.

Answer 2

DISCLAIMER: Doing this will almost certainly cause your app to be rejected from the app store, so you should make sure it only shows up on beta and internal builds. If you need it to be accepted by Apple, I would recommend implementing UIActionSheets and UIAlerts through React Native; there are plenty of good libraries out there that simulate modals.

You'll need to do this on the native side. You can add the following code to your AppDelegate:

var debugWindow: UIWindow?

@objc func pressButton(_ sender: UIButton) {
    print("Do debugging here")
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let screenSize = UIScreen.main.bounds

    let buttonController = UIViewController()
    let button = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
    button.setTitle("+", for: .normal)
    button.backgroundColor = UIColor.blue
    button.addTarget(self, action: #selector(pressButton(_:)), for: .touchUpInside)
    button.layer.cornerRadius = 25
    button.layer.masksToBounds = true
    buttonController.view = button

    debugWindow = UIWindow.init(frame: CGRect(x: screenSize.width - 100, y: screenSize.height - 100, width: 50, height: 50))
    debugWindow!.rootViewController = buttonController
    debugWindow!.windowLevel = UIWindow.Level.alert + 1000;
    debugWindow!.makeKeyAndVisible()

    return true
}

This will create a button that will be tappable no matter what modals are displayed: