[FEAT] customization of backdrop

[felippewick]

Hey!

First of all, thank you for this awesome library!
I was wondering if there are any plans to allow the customization of the backdrop (view behind the sheet)? Like color and opacity?

That would be awesome, especially for smaller sheets.

Thanks a lot!

[lodev09]

Unfortunately, this isn't possible on IOS, natively. Hopefully this becomes possible on future versions but I really doubt it.

[felippewick]

That's a bummer. But thanks for your quick reply!

[hirbod]

Haha @felippewick, I am wrecking around my head here too.

[lodev09]

I did play with modifying the UIDimmedView but it requires lots of code/modification on how IOS handles the dimming. I'm able to change the alpha but it would require other modifications to work with the animations (e.g. dragging the sheet and animate the dimming).

Still not worth it at this time. However, I'm open to PRs/suggestions

[hirbod]

If you are able to implement a progress value callback (ideally a useSharedValue) from -1 to any index and vice versa, we could just interpolate and clamp it in user land and build a custom backdrop component.

[hirbod]

I'll add 150 USD bounty on that request. Needs to work on drag for both iOS and Android, and of course when it's closing/opening.

[lodev09]

If you are able to implement a progress value callback (ideally a useSharedValue) from -1 to any index and vice versa, we could just interpolate and clamp it in user land and build a custom backdrop component.

I like the idea of a user providing a custom backdrop component instead. I can open up a PR to expose an onDrag event. I believe reanimated has a feature to wrap a nativeEvent

[lodev09]

@hirbod this is available (in main branch as of this writing). You can now utilize drag events and it does support reanimated. Just need to add dim prop and utilize useAnimatedProps from Reanimated :)

[hirbod]

@lodev09 that is lovely. We're not using your library anymore unfortunately. Some features have been strongly requested long time ago and we went back to Gorhom.

I'll still give it a try though and see if we could use this again in our new app.

[mikhail-create]

Hey!

We faced a backdrop customization issue requested by our customer. We implemented two solutions for iOS.

The first one involves a patch for TrueSheetViewController.swift. In this case, we can only manipulate the opacity, but it meets our requirements.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    UIView.animate(withDuration: 0.4) {
        self.presentingViewController?.view.alpha = 0.2
    }
    delegate?.viewControllerWillAppear()
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    UIView.animate(withDuration: 0.4) {
        self.presentingViewController?.view.alpha = 1
    }
}

The second solution involves creating a BottomSheetProvider component, which includes the backdrop component with animations. In this case, we also added a new prop, onWillPresent, to achieve smooth backdrop animations. Feel free to ask for some code examples of the provider component.

I hope this helps someone out there or sparks new ideas for their solutions.

[lodev09]

I just merged PR #124 to support drag events and Reanimated. If I can expose an dimAlpha prop, could probably take advantage of Animated.createAnimatedComponent and pass the shared value to that prop -- I'm not 100% sure if that's how reanimated works tho.

onWillPresent and onWillDismiss is in my next to-do #132

[lodev09]

ah yeah, Reanimated does support native props. I have tried this before with the Camera
https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps/