Feature Request: Support more dimming for formSheet

[JacobJaffe]

First off, apologizes if I should be posting this in the react-navigation repo instead, I think its more apt here, since I believe this is related to the underlying exposing of the iOS functionality with how UIModalPresentationStyle.formSheet is currently used.

Basically, I'd like to be able to bump-up the "dimmed" background when using a formSheet. Basically what's outlined here: https://stackoverflow.com/questions/77800808/any-way-to-change-the-amount-of-dimming-when-using-a-uisheetpresentationcontroll

Would this be possible to expose to the screen?

Also see my post for this in react-navigation, as per the native-stack navigator: react-navigation/react-navigation#12325

Thank you!

[kkafar]

Hey, this surely can be done on Android, because we're controlling the dimming view directly. iOS however uses the UISheetPresentationController which handles the dimming view internally & I haven't seen any API that would allow controlling this :/

[JacobJaffe]

Bummer. Hopefully that improves on the iOS side, will continue to use an animated overlay for now. Thank you!

[JacobJaffe]

@kkafar, do you know what the best way to hook into the lifecycle of the FormSheet swipe would be to control a SharedValue? I've tried configuring this with a listener for the screen events, but there seems to be a delay for FormSheet closing manually (swiping down), and ideally I'd hook the animation to the visible height / detent.

For a UI example, how Spotify handles Sheet displays with background-dimming is what I'm going for. On their iOS app, when dragging overlays (e.g. menus brought up by long-presses on playlists), the overlay dims according to the height of the Sheet.

I know this is possible in the non-native-stack by hooking into the RN gesture, but it's not clear to me how I would do this / if its possible to hook into the gesture state for the FormSheet on a native-stack?

(A trigger when detent-0 / closed is reached would be suitable also -- the problem is that the sheet closes, and there's a pretty long delay before I can trigger a background animation)

[JacobJaffe]

For context, here's my approach:

1. A wrapper on screens to be dimmed, hooking into a global provider informing the app if a dim should be applied:

const OverlayWrapper: React.FC = ({ children }) => {
  const { overlayShown } = useContext(OverlayContext);
  const isMounted = useIsMounted();
  const overlayOpacity = useSharedValue(0);
  useEffect(() => {
    if (!isMounted.current) return;
    const fadeIn = () => {
      overlayOpacity.value = withTiming(0.5, {
        duration: 200,
        easing: Easing.ease,
      });
    };

    const fadeOut = () => {
      overlayOpacity.value = withTiming(0, {
        duration: 200,
        easing: Easing.ease,
      });
    };

    if (overlayShown) {
      fadeIn();
    } else {
      fadeOut();
    }
  }, [overlayOpacity, overlayShown, isMounted]);

  const animatedStyle = useAnimatedStyle(() => ({
    ...StyleSheet.absoluteFillObject,
    opacity: overlayOpacity.value,
    backgroundColor: "black",
  }));

  return (
    <>
      {children}
      <Animated.View pointerEvents={"none"} style={animatedStyle} />
    </>
  );

2. Logic on the presenting FormSheet screen to inform the app to dim:

  const { setOverlayShown } = useOverlay();
const navigation = useNavigation();

// Ideally, this would trigger when the sheet goes offscreen, which is ~1 second before this.
useFocusEffect(() => {
  setOverlayShown(true);

  return () => {
    setOverlayShown(false);
  };
}, [setOverlayShown, navigation]);

[itsramiel]

@kkafar Can you add support for specifying the background dim color on Android if that is possible as you mentioned? That's a feature I would like to use in an app I am working on.