⭐️ Support Detents for Page Sheet for Improved Bottom Sheet UX

[trevorwhealy]

Proposal to include this new behavior in iOS 15 to make bottom sheets.

This is pseudocode, just seems like the correct place to extend the behavior.

The parent API would also need additional prop changes to support this.

For achieving UIs that look like this:

[dominicstop]

Hello!! Thank you for making this, i really appreciate it — i already plan on adding this feature in the future (but it'll require Xcode 12)


I'll implement this after the typescript + swift re-write haha — I'll have to transfer over the "view controller" logic from react-native-ios-navigator, first though, and fix the current bugs (I'm also experimenting with C++ native modules i.e. TurboModules).


I'll update you once I've finished implementing this feature ✨


(the earliest I can promise is the 1st week of January next year)

[trevorwhealy]

@dominicstop of course - nice work on this great library by the way. I was trying to build something similar for a few weeks, but your implementation is more robust and complete. In my version, I was really trying to keep the API small since I'm not as comfortable with Swift. Something like this:

import { promptNativeBottomSheet, dismissNativeBottomSheet, NativeBottomSheet } = NativeModules

const App = () => {
   return <View>
      <Button onPress={() => promptNativeBottomSheet(1)} title="Prompt bottom sheet" />
      <NativeBottomSheet id={1}>
          <Button onPress={() => dismissNativeBottomSheet(1)} title="Dismiss bottom sheet" />
      </NativeBottomSheet>
   </View>
}

Alternatively tried something like this, but keeping track of the visibility flag across the bridge was kind of awkward.

import { NativeBottomSheet } = NativeModules

const App = () => {
   const [isVisible, setIsVisible] = useState(false)
   return <View>
      <Button onPress={() => setIsVisible(true)} title="Press me" />
      <NativeBottomSheet isVisible={isVisible} onDismiss={() => setIsVisible(false)} />
   </View>
}

Early January would be a pretty quick turnaround actually. Please feel free to message me anytime between then, now, or after, if you want me to help test out the implementation!

[dominicstop]

I would love help with testing actually haha — I'll update you with the progress via this thread.


I'm going to start working on it after I'm done refactoring the docs for react-native-ios-context-menu ✨

[vbylen]

Hey @dominicstop, it seems like your iOS modal is pretty much the best one out there. When I saw the proposed improvements I got even more excited. Please do let us know your progress, or if you need any help.

[nandorojo]

There is an open PR on the React Native repo for this too for reference: facebook/react-native#34834