Floating Button(FAB) On React Native Wont Stay On Top When A Modal, IOS Actionsheet, Picker Component Is Rendered

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.

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: