[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]

Here is a better video showcasing why I am not very happy with the result, since dragging does not emit any progress, thus I can't interpolate. If we could define the alpha (we definitely need darker values here), I'd already be super happy!

aaaaSimulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-07-03.at.19.50.35.mp4

[lodev09]

You can try it in this block:

react-native-true-sheet/ios/TrueSheetViewController.swift

Lines 120 to 129 in ecc83c0

	/// This is called multiple times while sheet is being dragged.
	/// let's try to minimize size update by comparing last known width
	override func viewDidLayoutSubviews() {
	super.viewDidLayoutSubviews()
	if lastViewWidth != view.frame.width {
	delegate?.viewControllerDidChangeWidth(view.bounds.width)
	lastViewWidth = view.frame.width
	}
	}

This override is called when you drag the sheet which is kinda weird :D

[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