Nitpick naming, use normal Pressable on web

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

modules/bottom-sheet/android/build.gradle

@@ -0,0 +1,56 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.bottomsheet'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.bottomsheet"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  buildFeatures {
+    compose true
+  }
+  composeOptions {
+    kotlinCompilerExtensionVersion = "1.5.8"
+  }
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "androidx.compose.material3:material3:1.3.0"
+  implementation "androidx.compose.material:material:1.7.2"
+  implementation "com.facebook.react:react-native:+"
+}

modules/bottom-sheet/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt

@@ -0,0 +1,150 @@
+package expo.modules.bottomsheet
+
+import android.content.Context
+import android.view.View
+import android.widget.FrameLayout
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.platform.ComposeView
+import androidx.core.view.allViews
+import com.facebook.react.ReactRootView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class BottomSheetView(
+  context: Context,
+  appContext: AppContext,
+) : ExpoView(context, appContext) {
+  val sheetState = mutableStateOf(SheetState())
+
+  private var reactRootView: ReactRootView? = null
+  private var innerView: View? = null
+
+  private var sheetView: ComposeView? = null
+
+  private val onStateChange by EventDispatcher()
+  private val onAttemptDismiss by EventDispatcher()
+
+  // Props
+  var preventDismiss = false
+  var minHeight = 0f
+  var maxHeight = 0f
+
+  private var isOpen: Boolean = false
+    set(value) {
+      if (field == value) return
+
+      field = value
+      this.sheetState.value.isOpen = value
+      onStateChange(
+        mapOf(
+          "state" to if (value) "open" else "closed",
+        ),
+      )
+    }
+
+  private var isOpening: Boolean = false
+    set(value) {
+      field = value
+      if (value) {
+        onStateChange(mapOf("state" to "opening"))
+      }
+    }
+
+  private var isClosing: Boolean = false
+    set(value) {
+      field = value
+      if (value) {
+        onStateChange(mapOf("state" to "closing"))
+      }
+    }
+
+  private var hasInitiallyOpened = false
+
+  // Lifecycle
+
+  override fun addView(
+    child: View?,
+    index: Int,
+  ) {
+    this.innerView = child
+  }
+
+  override fun onLayout(
+    changed: Boolean,
+    l: Int,
+    t: Int,
+    r: Int,
+    b: Int,
+  ) {
+    this.innerView?.let {
+      val height =
+        it.allViews
+          .last()
+          .measuredHeight
+          .toFloat()
+      this.present(height)
+    }
+  }
+
+  private fun destroy() {
+    this.isClosing = false
+    this.isOpen = false
+
+    this.getRootLayout().removeView(this.sheetView)
+    this.sheetView = null
+
+    this.reactRootView = null
+    this.innerView = null
+  }
+
+  // Presentation
+
+  private fun present(contentHeight: Float) {
+    val innerView = this.innerView ?: return
+
+    // For GestureRootView to work, we need to create a ReactRootView for the innerView to be
+    // contained inside of
+    val reactRootView = ReactRootView(context)
+    reactRootView.addView(innerView)
+    this.reactRootView = reactRootView
+
+    this.isOpening = true
+    this.sheetView =
+      ComposeView(context).also {
+        it.setContent {
+          SheetView(
+            state = sheetState,
+            innerView = reactRootView,
+            contentHeight = innerView.height.toFloat(),
+            onDismissRequest = {
+              onAttemptDismiss(mapOf())
+              if (!preventDismiss) {
+                dismiss()
+              }
+            },
+            onExpanded = {
+              isOpening = false
+              isOpen = true
+              hasInitiallyOpened = true
+            },
+            onHidden = {
+              if (hasInitiallyOpened) {
+                destroy()
+              }
+            },
+          )
+        }
+        getRootLayout().addView(it)
+      }
+  }
+
+  fun dismiss() {
+    this.isClosing = true
+    this.destroy()
+  }
+
+  // Utils
+
+  private fun getRootLayout(): FrameLayout = appContext.currentActivity!!.findViewById(android.R.id.content)
+}

modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt

@@ -0,0 +1,53 @@
+package expo.modules.bottomsheet
+
+import android.graphics.Color
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class BottomSheetModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("BlueskyBottomSheet")
+
+      Function("getSafeAreaInset") {
+        return@Function 10 // @TODO
+      }
+
+      View(BottomSheetView::class) {
+        Events(
+          arrayOf(
+            "onStateChange",
+            "onAttemptDismiss",
+          ),
+        )
+
+        AsyncFunction("dismiss") { view: BottomSheetView ->
+          view.dismiss()
+        }
+
+        Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
+          view.preventDismiss = prop
+        }
+
+        Prop("minHeight") { view: BottomSheetView, prop: Float ->
+          view.minHeight = prop
+        }
+
+        Prop("maxHeight") { view: BottomSheetView, prop: Float ->
+          view.maxHeight = prop
+        }
+
+        Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
+          view.sheetState.value.cornerRadius = prop
+        }
+
+        Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
+          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+        }
+
+        Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
+          view.sheetState.value.preventExpansion = prop
+        }
+      }
+    }
+}

modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt

@@ -0,0 +1,70 @@
+package expo.modules.bottomsheet
+
+import android.view.View
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+
+data class SheetState(
+  var isOpen: Boolean = false,
+  var cornerRadius: Float? = null,
+  var containerBackgroundColor: Int? = null,
+  var preventExpansion: Boolean = false,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SheetView(
+  state: MutableState<SheetState>,
+  innerView: View,
+  contentHeight: Float,
+  onDismissRequest: () -> Unit,
+  onExpanded: () -> Unit,
+  onHidden: () -> Unit,
+) {
+  val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
+
+  ModalBottomSheet(
+    sheetState = sheetState,
+    onDismissRequest = onDismissRequest,
+    shape =
+      RoundedCornerShape(
+        topStart = state.value.cornerRadius ?: 0f,
+        topEnd = state.value.cornerRadius ?: 0f,
+      ),
+    containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
+  ) {
+    Column(
+      Modifier
+        .fillMaxWidth()
+        .height(contentHeight.dp)
+        // Prevent covering up the handle
+        .padding(top = 34.dp),
+    ) {
+      AndroidView(
+        factory = { innerView },
+      )
+    }
+  }
+
+  LaunchedEffect(sheetState.currentValue) {
+    if (sheetState.currentValue == SheetValue.PartiallyExpanded || sheetState.currentValue == SheetValue.Expanded) {
+      onExpanded()
+    } else if (sheetState.currentValue == SheetValue.Hidden) {
+      onHidden()
+    }
+  }
+}

modules/bottom-sheet/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modules": ["BottomSheetModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.bottomsheet.BottomSheetModule"]
+  }
+}

modules/bottom-sheet/index.ts

@@ -0,0 +1,13 @@
+import {
+  BottomSheetSnapPoint,
+  BottomSheetState,
+  BottomSheetViewProps,
+} from './src/BottomSheet.types'
+import {BottomSheetView} from './src/BottomSheetView'
+
+export {
+  BottomSheetSnapPoint,
+  type BottomSheetState,
+  BottomSheetView,
+  type BottomSheetViewProps,
+}

modules/bottom-sheet/ios/BottomSheet.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'BottomSheet'
+  s.version        = '1.0.0'
+  s.summary        = 'A bottom sheet for use in Bluesky'
+  s.description    = 'A bottom sheet for use in Bluesky'
+  s.author         = ''
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '15.0', :tvos => '15.0' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,swift}"
+end

modules/bottom-sheet/ios/BottomSheetModule.swift

@@ -0,0 +1,47 @@
+import ExpoModulesCore
+
+public class BottomSheetModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("BottomSheet")
+
+    AsyncFunction("dismissAll") {
+      SheetManager.shared.dismissAll()
+    }
+
+    View(SheetView.self) {
+      Events([
+        "onAttemptDismiss",
+        "onSnapPointChange",
+        "onStateChange",
+      ])
+
+      AsyncFunction("dismiss") { (view: SheetView) in
+        view.dismiss()
+      }
+
+      AsyncFunction("updateLayout") { (view: SheetView) in
+        view.updateLayout()
+      }
+
+      Prop("cornerRadius") { (view: SheetView, prop: Float) in
+        view.cornerRadius = CGFloat(prop)
+      }
+
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
+
+      Prop("minHeight") { (view: SheetView, prop: Double) in
+        view.minHeight = prop
+      }
+
+      Prop("maxHeight") { (view: SheetView, prop: Double) in
+        view.maxHeight = prop
+      }
+
+      Prop("preventExpansion") { (view: SheetView, prop: Bool) in
+        view.preventExpansion = prop
+      }
+    }
+  }
+}

modules/bottom-sheet/ios/SheetManager.swift

@@ -0,0 +1,28 @@
+//
+//  SheetManager.swift
+//  Pods
+//
+//  Created by Hailey on 10/1/24.
+//
+
+import ExpoModulesCore
+
+class SheetManager {
+  static let shared = SheetManager()
+
+  private var sheetViews = NSHashTable<SheetView>(options: .weakMemory)
+
+  func add(_ view: SheetView) {
+    sheetViews.add(view)
+  }
+
+  func remove(_ view: SheetView) {
+    sheetViews.remove(view)
+  }
+
+  func dismissAll() {
+    sheetViews.allObjects.forEach { sheetView in
+      sheetView.dismiss()
+    }
+  }
+}

modules/bottom-sheet/ios/SheetView.swift

@@ -0,0 +1,180 @@
+import ExpoModulesCore
+import UIKit
+
+class SheetView: ExpoView, UISheetPresentationControllerDelegate {
+  // Views
+  private var sheetVc: SheetViewController?
+  private var innerView: UIView?
+
+  // Events
+  private let onAttemptDismiss = EventDispatcher()
+  private let onSnapPointChange = EventDispatcher()
+  private let onStateChange = EventDispatcher()
+
+  // Open event firing
+  private var isOpen: Bool = false {
+    didSet {
+      onStateChange([
+        "state": isOpen ? "open" : "closed"
+      ])
+    }
+  }
+
+  // React view props
+  var preventDismiss = false
+  var preventExpansion = false
+  var cornerRadius: CGFloat?
+  var minHeight = 0.0
+  var maxHeight: CGFloat! {
+    didSet {
+      let screenHeight = Util.getScreenHeight() ?? 0
+      if maxHeight > screenHeight {
+        maxHeight = screenHeight
+      }
+    }
+  }
+
+  private var isOpening = false {
+    didSet {
+      if isOpening {
+        onStateChange([
+          "state": "opening"
+        ])
+      }
+    }
+  }
+  private var isClosing = false {
+    didSet {
+      if isClosing {
+        onStateChange([
+          "state": "closing"
+        ])
+      }
+    }
+  }
+  private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
+    didSet {
+      if selectedDetentIdentifier == .large {
+        onSnapPointChange([
+          "snapPoint": 2
+        ])
+      } else {
+        onSnapPointChange([
+          "snapPoint": 1
+        ])
+      }
+    }
+  }
+
+  // MARK: - Lifecycle
+
+  required init (appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    self.maxHeight = Util.getScreenHeight()
+    SheetManager.shared.add(self)
+  }
+
+  deinit {
+    self.destroy()
+  }
+
+  // We don't want this view to actually get added to the tree, so we'll simply store it for adding
+  // to the SheetViewController
+  override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    self.innerView = subview
+  }
+
+  // We'll grab the content height from here so we know the initial detent to set
+  override func layoutSubviews() {
+    super.layoutSubviews()
+
+    guard let innerView = self.innerView else {
+      return
+    }
+
+    if innerView.subviews.count != 1 {
+      return
+    }
+
+    self.present(contentHeight: innerView.subviews[0].frame.size.height)
+  }
+
+  private func destroy() {
+    self.isClosing = false
+    self.isOpen = false
+    self.sheetVc = nil
+    self.innerView = nil
+    SheetManager.shared.remove(self)
+  }
+
+  // MARK: - Presentation
+
+  func present(contentHeight: CGFloat) {
+    guard !self.isOpen,
+          let innerView = self.innerView,
+          let rvc = self.reactViewController() else {
+      return
+    }
+
+    let sheetVc = SheetViewController()
+    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
+    if let sheet = sheetVc.sheetPresentationController {
+      sheet.delegate = self
+      sheet.preferredCornerRadius = self.cornerRadius
+      self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
+    }
+    sheetVc.view.addSubview(innerView)
+
+    self.sheetVc = sheetVc
+    self.isOpening = true
+
+    rvc.present(sheetVc, animated: true) { [weak self] in
+      self?.isOpening = false
+      self?.isOpen = true
+    }
+  }
+
+  func updateLayout() {
+    if let contentHeight = self.innerView?.subviews[0].frame.size.height {
+      self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight),
+                               preventExpansion: self.preventExpansion)
+    }
+  }
+
+  func dismiss() {
+    self.isClosing = true
+    self.sheetVc?.dismiss(animated: true) { [weak self] in
+      self?.destroy()
+    }
+  }
+
+  // MARK: - Utils
+
+  private func clampHeight(_ height: CGFloat) -> CGFloat {
+    if height < self.minHeight {
+      return self.minHeight
+    } else if height > self.maxHeight {
+      return self.maxHeight
+    }
+    return height
+  }
+
+  // MARK: - UISheetPresentationControllerDelegate
+
+  func presentationControllerShouldDismiss(_ presentationController: UIPresentationController) -> Bool {
+    self.onAttemptDismiss()
+    return !self.preventDismiss
+  }
+
+  func presentationControllerWillDismiss(_ presentationController: UIPresentationController) {
+    self.isClosing = true
+  }
+
+  func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
+    self.destroy()
+  }
+  
+  func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
+    self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
+  }
+}

modules/bottom-sheet/ios/SheetViewController.swift

@@ -0,0 +1,67 @@
+//
+//  SheetViewController.swift
+//  Pods
+//
+//  Created by Hailey on 9/30/24.
+//
+
+import Foundation
+import UIKit
+
+class SheetViewController: UIViewController {
+  init() {
+    super.init(nibName: nil, bundle: nil)
+
+    self.modalPresentationStyle = .formSheet
+    self.isModalInPresentation = false
+
+    if let sheet = self.sheetPresentationController {
+      sheet.prefersGrabberVisible = true
+    }
+  }
+
+  func setDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    guard let sheet = self.sheetPresentationController,
+          let screenHeight = Util.getScreenHeight()
+    else {
+      return
+    }
+
+    if contentHeight > screenHeight {
+      sheet.detents = [
+        .large()
+      ]
+    } else {
+      if #available(iOS 16.0, *) {
+        sheet.detents = [
+          .custom { _ in
+            return contentHeight
+          }
+        ]
+      } else {
+        sheet.detents = [
+          .medium()
+        ]
+      }
+    }
+
+    if !preventExpansion {
+      sheet.detents.append(.large())
+    }
+  }
+
+  func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    if let sheet = self.sheetPresentationController {
+      sheet.animateChanges {
+        self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
+        if #available(iOS 16.0, *) {
+          sheet.invalidateDetents()
+        }
+      }
+    }
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+}

modules/bottom-sheet/ios/Util.swift

@@ -0,0 +1,18 @@
+//
+//  Util.swift
+//  Pods
+//
+//  Created by Hailey on 10/2/24.
+//
+
+class Util {
+  static func getScreenHeight() -> CGFloat? {
+    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+     let window = windowScene.windows.first {
+      let safeAreaInsets = window.safeAreaInsets
+      let fullScreenHeight = UIScreen.main.bounds.height
+      return fullScreenHeight - (safeAreaInsets.top + safeAreaInsets.bottom)
+    }
+    return nil
+  }
+}

modules/bottom-sheet/src/BottomSheet.types.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+import {ColorValue, NativeSyntheticEvent} from 'react-native'
+
+export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
+
+export enum BottomSheetSnapPoint {
+  Hidden,
+  Partial,
+  Full,
+}
+
+export interface BottomSheetViewProps {
+  children: React.ReactNode
+  cornerRadius?: number
+  preventDismiss?: boolean
+  preventExpansion?: boolean
+  containerBackgroundColor?: ColorValue
+  topInset?: number
+  bottomInset?: number
+
+  minHeight?: number
+  maxHeight?: number
+
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+  onSnapPointChange?: (
+    event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
+  ) => void
+  onStateChange?: (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => void
+}

modules/bottom-sheet/src/BottomSheetView.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+import {
+  ColorValue,
+  Dimensions,
+  NativeSyntheticEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
+
+const screenHeight = Dimensions.get('screen').height
+
+const NativeView: React.ComponentType<
+  BottomSheetViewProps & {
+    ref: React.RefObject<any>
+    style: StyleProp<ViewStyle>
+  }
+> = requireNativeViewManager('BottomSheet')
+
+export class BottomSheetView extends React.Component<
+  BottomSheetViewProps,
+  {
+    open: boolean
+  }
+> {
+  ref = React.createRef<any>()
+
+  constructor(props: BottomSheetViewProps) {
+    super(props)
+    this.state = {
+      open: false,
+    }
+  }
+
+  present() {
+    this.setState({open: true})
+  }
+
+  dismiss() {
+    this.ref.current?.dismiss()
+  }
+
+  private onStateChange = (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => {
+    const {state} = event.nativeEvent
+    const isOpen = state !== 'closed'
+    this.setState({open: isOpen})
+    this.props.onStateChange?.(event)
+  }
+
+  private getBackgroundColor = (): ColorValue | undefined => {
+    const parent = React.Children.toArray(
+      this.props.children,
+    )[0] as React.ReactElement
+    if (parent?.props?.style) {
+      const parentStyle = StyleSheet.flatten(parent.props.style) as ViewStyle
+      return parentStyle.backgroundColor ?? 'transparent'
+    }
+    return undefined
+  }
+
+  private updateLayout = () => {
+    this.ref.current?.updateLayout()
+  }
+
+  render() {
+    const {children, ...rest} = this.props
+    const topInset = rest.topInset ?? 0
+    const bottomInset = rest.bottomInset ?? 0
+
+    if (!this.state.open) {
+      return null
+    }
+
+    const backgroundColor = this.getBackgroundColor()
+    return (
+      <NativeView
+        {...rest}
+        onStateChange={this.onStateChange}
+        ref={this.ref}
+        style={{
+          position: 'absolute',
+          height: screenHeight - topInset - bottomInset,
+          width: '100%',
+        }}
+        containerBackgroundColor={backgroundColor}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor,
+            paddingTop: topInset,
+            paddingBottom: bottomInset,
+          }}>
+          <View onLayout={this.updateLayout}>{children}</View>
+        </View>
+      </NativeView>
+    )
+  }
+}

modules/bottom-sheet/src/BottomSheetView.web.tsx

@@ -0,0 +1,5 @@
+import {BottomSheetViewProps} from './BottomSheet.types'
+
+export function BottomSheetView(_: BottomSheetViewProps) {
+  throw new Error('BottomSheetView is not available on web')
+}

package.json

@@ -171,7 +171,7 @@
     "react-native-compressor": "^1.8.24",
     "react-native-date-picker": "^4.4.2",
     "react-native-drawer-layout": "^4.0.0-alpha.3",
-    "react-native-gesture-handler": "~2.16.2",
+    "react-native-gesture-handler": "2.20.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "0.41.2",
     "react-native-ios-context-menu": "^1.15.3",

src/components/BottomSheetLink.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import {StackActions, useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {flatten, useTheme} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {InlineLinkProps, useLink} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
+import {Text} from '#/components/Typography'
+import {router} from '#/routes'
+
+export function BottomSheetInlineLinkText({
+  children,
+  to,
+  action = 'push',
+  disableMismatchWarning,
+  style,
+  onPress: outerOnPress,
+  label,
+  shareOnLongPress,
+  disableUnderline,
+  ...rest
+}: InlineLinkProps) {
+  const t = useTheme()
+  const stringChildren = typeof children === 'string'
+  const navigation = useNavigation<NavigationProp>()
+  const dialog = useDialogContext()
+
+  const {href, isExternal, onLongPress} = useLink({
+    to,
+    displayText: stringChildren ? children : '',
+    action,
+    disableMismatchWarning,
+    onPress: outerOnPress,
+    shareOnLongPress,
+  })
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+
+  const onPress = () => {
+    if (isExternal) {
+      return
+    }
+
+    dialog.close()
+
+    if (action === 'push') {
+      navigation.dispatch(StackActions.push(...router.matchPath(href)))
+    } else if (action === 'replace') {
+      navigation.dispatch(StackActions.replace(...router.matchPath(href)))
+    } else if (action === 'navigate') {
+      // @ts-ignore
+      navigation.navigate(...router.matchPath(href))
+    } else {
+      throw Error('Unsupported navigator action.')
+    }
+  }
+
+  const flattenedStyle = flatten(style) || {}
+
+  // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
+  return (
+    <NormalizedRNGHPressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      role="link"
+      accessibilityLabel={label}
+      accessibilityHint=""
+      style={{flexDirection: 'row'}}>
+      <Text
+        {...rest}
+        style={[
+          {color: t.palette.primary_500},
+          pressed &&
+            !disableUnderline && {
+              textDecorationLine: 'underline',
+              textDecorationColor:
+                flattenedStyle.color ?? t.palette.primary_500,
+            },
+          flattenedStyle,
+        ]}>
+        {children}
+      </Text>
+    </NormalizedRNGHPressable>
+  )
+}

src/components/BottomSheetLink.web.tsx

@@ -0,0 +1,3 @@
+import {Link as BottomSheetLink} from './Link'
+
+export {BottomSheetLink}

src/components/Button.tsx

@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -87,6 +89,7 @@ export type ButtonProps = Pick<
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
+    PressableComponent?: React.ComponentType<PressableProps>
   }
 
 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
@@ -114,10 +117,24 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
+      PressableComponent,
       ...rest
     },
     ref,
   ) => {
+    /*
+     * This will pick the correct default pressable to use. If we are inside a
+     * native dialog, we need to use the RNGH pressable.
+     */
+    const {isNativeDialog} = useDialogContext()
+    if (!PressableComponent) {
+      if (isNativeDialog) {
+        PressableComponent = NormalizedRNGHPressable
+      } else {
+        PressableComponent = Pressable
+      }
+    }
+
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
@@ -449,10 +466,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Pressable
+      <PressableComponent
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
+        // @ts-ignore - this will always be a pressable
         ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
@@ -500,7 +518,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         <Context.Provider value={context}>
           {typeof children === 'function' ? children(context) : children}
         </Context.Provider>
-      </Pressable>
+      </PressableComponent>
     )
   },
 )

src/components/Dialog/context.ts

@@ -6,9 +6,12 @@ import {
   DialogControlRefProps,
   DialogOuterProps,
 } from '#/components/Dialog/types'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 export const Context = React.createContext<DialogContextProps>({
   close: () => {},
+  isNativeDialog: false,
+  nativeSnapPoint: BottomSheetSnapPoint.Hidden,
 })
 
 export function useDialogContext() {

src/components/Dialog/index.tsx

@@ -1,86 +1,31 @@
 import React, {useImperativeHandle} from 'react'
-import {
-  Dimensions,
-  Keyboard,
-  Pressable,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native'
-import Animated, {useAnimatedStyle} from 'react-native-reanimated'
+import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
+import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import BottomSheet, {
-  BottomSheetBackdropProps,
-  BottomSheetFlatList,
-  BottomSheetFlatListMethods,
-  BottomSheetScrollView,
-  BottomSheetScrollViewMethods,
-  BottomSheetTextInput,
-  BottomSheetView,
-  useBottomSheet,
-  WINDOW_HEIGHT,
-} from '@discord/bottom-sheet/src'
-import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
 
 import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, flatten, useTheme} from '#/alf'
-import {Context} from '#/components/Dialog/context'
+import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
   DialogControlProps,
   DialogInnerProps,
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Portal} from '#/components/Portal'
+import {
+  BottomSheetSnapPoint,
+  BottomSheetView,
+} from '../../../modules/bottom-sheet'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(BottomSheetTextInput)
-
-function Backdrop(props: BottomSheetBackdropProps) {
-  const t = useTheme()
-  const bottomSheet = useBottomSheet()
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const opacity =
-      (Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000
-
-    return {
-      opacity: Math.min(Math.max(opacity, 0), 0.55),
-    }
-  })
-
-  const onPress = React.useCallback(() => {
-    bottomSheet.close()
-  }, [bottomSheet])
-
-  return (
-    <Animated.View
-      style={[
-        t.atoms.bg_contrast_300,
-        {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          position: 'absolute',
-        },
-        animatedStyle,
-      ]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel="Dialog backdrop"
-        accessibilityHint="Press the backdrop to close the dialog"
-        style={{flex: 1}}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}
+export const Input = createInput(TextInput)
 
 export function Outer({
   children,
@@ -88,24 +33,36 @@ export function Outer({
   onClose,
   nativeOptions,
   testID,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  return (
+    <Portal>
+      <OuterWithoutPortal
+        control={control}
+        onClose={onClose}
+        nativeOptions={nativeOptions}
+        testID={testID}>
+        {children}
+      </OuterWithoutPortal>
+    </Portal>
+  )
+}
+
+export function OuterWithoutPortal({
+  children,
+  control,
+  onClose,
+  nativeOptions,
+  testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
-  const sheet = React.useRef<BottomSheet>(null)
-  const sheetOptions = nativeOptions?.sheet || {}
-  const hasSnapPoints = !!sheetOptions.snapPoints
+  const ref = React.useRef<BottomSheetView>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
 
-  /*
-   * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
-   */
-  const [openIndex, setOpenIndex] = React.useState(-1)
-
-  /*
-   * `openIndex` is the index of the snap point to open the bottom sheet to. If >0, the bottom sheet is open.
-   */
-  const isOpen = openIndex > -1
+  const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
+    BottomSheetSnapPoint.Partial,
+  )
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -119,25 +76,19 @@ export function Outer({
     closeCallbacks.current = []
   }, [])
 
-  const open = React.useCallback<DialogControlProps['open']>(
-    ({index} = {}) => {
-      // Run any leftover callbacks that might have been queued up before calling `.open()`
-      callQueuedCallbacks()
-
-      setDialogIsOpen(control.id, true)
-      // can be set to any index of `snapPoints`, but `0` is the first i.e. "open"
-      setOpenIndex(index || 0)
-      sheet.current?.snapToIndex(index || 0)
-    },
-    [setDialogIsOpen, control.id, callQueuedCallbacks],
-  )
+  const open = React.useCallback<DialogControlProps['open']>(() => {
+    // Run any leftover callbacks that might have been queued up before calling `.open()`
+    callQueuedCallbacks()
+    setDialogIsOpen(control.id, true)
+    ref.current?.present()
+  }, [setDialogIsOpen, control.id, callQueuedCallbacks])
 
   // This is the function that we call when we want to dismiss the dialog.
   const close = React.useCallback<DialogControlProps['close']>(cb => {
     if (typeof cb === 'function') {
       closeCallbacks.current.push(cb)
     }
-    sheet.current?.close()
+    ref.current?.dismiss()
   }, [])
 
   // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -146,8 +97,6 @@ export function Outer({
     // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this
     // tells us that we need to toggle the accessibility overlay setting
     setDialogIsOpen(control.id, false)
-    setOpenIndex(-1)
-
     callQueuedCallbacks()
     onClose?.()
   }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
@@ -161,120 +110,76 @@ export function Outer({
     [open, close],
   )
 
-  React.useEffect(() => {
-    return () => {
-      setDialogIsOpen(control.id, false)
-    }
-  }, [control.id, setDialogIsOpen])
+  const context = React.useMemo(
+    () => ({close, isNativeDialog: true, nativeSnapPoint: snapPoint}),
+    [close, snapPoint],
+  )
 
-  const context = React.useMemo(() => ({close}), [close])
+  const Wrapper = isIOS ? View : GestureHandlerRootView
 
   return (
-    isOpen && (
-      <Portal>
-        <FullWindowOverlay>
-          <View
-            // iOS
-            accessibilityViewIsModal
-            // Android
-            importantForAccessibility="yes"
-            style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
-            <BottomSheet
-              enableDynamicSizing={!hasSnapPoints}
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              {...sheetOptions}
-              snapPoints={sheetOptions.snapPoints || ['100%']}
-              ref={sheet}
-              index={openIndex}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              backdropComponent={Backdrop}
-              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-              handleStyle={{display: 'none'}}
-              onClose={onCloseAnimationComplete}>
-              <Context.Provider value={context}>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    t.atoms.bg,
-                    {
-                      borderTopLeftRadius: 40,
-                      borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
-                    },
-                  ]}
-                />
-                {children}
-              </Context.Provider>
-            </BottomSheet>
-          </View>
-        </FullWindowOverlay>
-      </Portal>
-    )
+    <Context.Provider value={context}>
+      <BottomSheetView
+        ref={ref}
+        topInset={30}
+        bottomInset={insets.bottom}
+        onSnapPointChange={e => {
+          setSnapPoint(e.nativeEvent.snapPoint)
+        }}
+        onStateChange={e => {
+          if (e.nativeEvent.state === 'closed') {
+            onCloseAnimationComplete()
+          }
+        }}
+        cornerRadius={20}
+        {...nativeOptions}>
+        <Wrapper testID={testID} style={[t.atoms.bg]}>
+          {children}
+        </Wrapper>
+      </BottomSheetView>
+    </Context.Provider>
   )
 }
 
 export function Inner({children, style}: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
-    <BottomSheetView
+    <View
       style={[
-        a.py_xl,
         a.px_xl,
         {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
           paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
         },
-        flatten(style),
+        style,
       ]}>
       {children}
-    </BottomSheetView>
+    </View>
   )
 }
 
-export const ScrollableInner = React.forwardRef<
-  BottomSheetScrollViewMethods,
-  DialogInnerProps
->(function ScrollableInner({children, style}, ref) {
-  const insets = useSafeAreaInsets()
-  return (
-    <BottomSheetScrollView
-      keyboardShouldPersistTaps="handled"
-      style={[
-        a.flex_1, // main diff is this
-        a.p_xl,
-        a.h_full,
-        {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        },
-        style,
-      ]}
-      contentContainerStyle={a.pb_4xl}
-      ref={ref}>
-      {children}
-      <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-    </BottomSheetScrollView>
-  )
-})
+export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
+  function ScrollableInner({children, style}, ref) {
+    const insets = useSafeAreaInsets()
+    const {nativeSnapPoint} = useDialogContext()
+    return (
+      <ScrollView
+        style={[a.px_xl, style]}
+        ref={ref}
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}>
+        {children}
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      </ScrollView>
+    )
+  },
+)
 
 export const InnerFlatList = React.forwardRef<
-  BottomSheetFlatListMethods,
-  BottomSheetFlatListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
+  ListMethods,
+  ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
   const insets = useSafeAreaInsets()
-
   return (
-    <BottomSheetFlatList
+    <List
       keyboardShouldPersistTaps="handled"
       contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
       ListFooterComponent={
@@ -282,42 +187,11 @@ export const InnerFlatList = React.forwardRef<
       }
       ref={ref}
       {...props}
-      style={[
-        a.flex_1,
-        a.p_xl,
-        a.pt_0,
-        a.h_full,
-        {
-          marginTop: 40,
-        },
-        flatten(style),
-      ]}
+      style={style}
     />
   )
 })
 
-export function Handle() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 40}]}>
-      <View
-        style={[
-          a.rounded_sm,
-          {
-            top: a.pt_lg.paddingTop,
-            width: 35,
-            height: 4,
-            alignSelf: 'center',
-            backgroundColor: t.palette.contrast_900,
-            opacity: 0.5,
-          },
-        ]}
-      />
-    </View>
-  )
-}
-
 export function Close() {
   return null
 }

src/components/Dialog/index.web.tsx

@@ -103,6 +103,8 @@ export function Outer({
   const context = React.useMemo(
     () => ({
       close,
+      isNativeDialog: false,
+      nativeSnapPoint: 0,
     }),
     [close],
   )
@@ -229,10 +231,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  return null
-}
-
 export function Close() {
   const {_} = useLingui()
   const {close} = React.useContext(Context)

src/components/Dialog/types.ts

@@ -4,9 +4,10 @@ import type {
   GestureResponderEvent,
   ScrollViewProps,
 } from 'react-native'
-import {BottomSheetProps} from '@discord/bottom-sheet/src'
 
 import {ViewStyleProp} from '#/alf'
+import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 type A11yProps = Required<AccessibilityProps>
 
@@ -37,6 +38,8 @@ export type DialogControlProps = DialogControlRefProps & {
 
 export type DialogContextProps = {
   close: DialogControlProps['close']
+  isNativeDialog: boolean
+  nativeSnapPoint: BottomSheetSnapPoint
 }
 
 export type DialogControlOpenOptions = {
@@ -52,9 +55,7 @@ export type DialogControlOpenOptions = {
 export type DialogOuterProps = {
   control: DialogControlProps
   onClose?: () => void
-  nativeOptions?: {
-    sheet?: Omit<BottomSheetProps, 'children'>
-  }
+  nativeOptions?: Omit<BottomSheetViewProps, 'children'>
   webOptions?: {}
   testID?: string
 }

src/components/LikesDialog.tsx

@@ -1,20 +1,19 @@
-import React, {useMemo, useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-
-import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
-import * as Dialog from '#/components/Dialog'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 interface LikesDialogProps {
   control: Dialog.DialogOuterProps['control']
@@ -24,8 +23,6 @@ interface LikesDialogProps {
 export function LikesDialog(props: LikesDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LikesDialogInner {...props} />
     </Dialog.Outer>
   )

src/components/Link.tsx

@@ -103,17 +103,17 @@ export function useLink({
           linkRequiresWarning(href, displayText),
       )
 
-      if (requiresWarning) {
+      if (isWeb) {
         e.preventDefault()
+      }
 
+      if (requiresWarning) {
         openModal({
           name: 'link-warning',
           text: displayText,
           href: href,
         })
       } else {
-        e.preventDefault()
-
         if (isExternal) {
           openLink(href)
         } else {
@@ -241,6 +241,45 @@ export function Link({
   )
 }
 
+export function BottomSheetLink({
+  children,
+  to,
+  action = 'push',
+  onPress: outerOnPress,
+  download,
+  ...rest
+}: LinkProps) {
+  const {href, isExternal, onPress} = useLink({
+    to,
+    displayText: typeof children === 'string' ? children : '',
+    action,
+    onPress: outerOnPress,
+  })
+
+  return (
+    <Button
+      {...rest}
+      style={[a.justify_start, flatten(rest.style)]}
+      role="link"
+      accessibilityRole="link"
+      href={href}
+      onPress={download ? undefined : onPress}
+      {...web({
+        hrefAttrs: {
+          target: download ? undefined : isExternal ? 'blank' : undefined,
+          rel: isExternal ? 'noopener noreferrer' : undefined,
+          download,
+        },
+        dataSet: {
+          // no underline, only `InlineLink` has underlines
+          noUnderline: '1',
+        },
+      })}>
+      {children}
+    </Button>
+  )
+}
+
 export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
 > &

src/components/Menu/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
-import {isNative} from 'platform/detection'
+import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -18,6 +18,7 @@ import {
   ItemTextProps,
   TriggerProps,
 } from '#/components/Menu/types'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export {
@@ -84,9 +85,9 @@ export function Outer({
   const context = React.useContext(Context)
 
   return (
-    <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
+    <Dialog.Outer
+      control={context.control}
+      nativeOptions={{preventExpansion: true}}>
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
         <Dialog.ScrollableInner label="Menu TODO">
@@ -112,19 +113,20 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   } = useInteractionState()
 
   return (
-    <Pressable
+    <NormalizedRNGHPressable
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
+      onFocus={onFocus}
+      onBlur={onBlur}
       onPress={e => {
+        control?.close()
         onPress(e)
 
         if (!e.defaultPrevented) {
           control?.close()
         }
       }}
-      onFocus={onFocus}
-      onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
@@ -149,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
         {children}
       </ItemContext.Provider>
-    </Pressable>
+    </NormalizedRNGHPressable>
   )
 }
 

src/components/NewskieDialog.tsx

@@ -5,12 +5,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,6 @@ export function NewskieDialog({
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <Dialog.ScrollableInner
           label={_(msg`New user info dialog`)}
           style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>

src/components/NormalizedRNGHPressable.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  MeasureOnSuccessCallback,
+  NativeMouseEvent,
+  NativeSyntheticEvent,
+  PressableProps,
+} from 'react-native'
+import {Pressable as BSPressable} from 'react-native-gesture-handler'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+
+function pressableEventToGestureResponderEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): GestureResponderEvent {
+  return {
+    nativeEvent: {
+      ...event.nativeEvent,
+      touches: [],
+      changedTouches: [],
+      identifier: event.nativeEvent.identifier.toString(),
+      target: event.nativeEvent.target.toString(),
+    },
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+    isDefaultPrevented(): boolean {
+      return false
+    },
+    isPropagationStopped(): boolean {
+      return false
+    },
+    persist() {},
+    type: 'press',
+  }
+}
+
+function pressableEventToMouseEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
+  return {
+    ...event.nativeEvent,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+  }
+}
+
+export class NormalizedRNGHPressable extends React.Component<PressableProps> {
+  static displayName = 'Pressable'
+
+  measure = (_: MeasureOnSuccessCallback) => {}
+
+  measureLayout = (_: number) => {}
+
+  measureInWindow = (
+    _: (x: number, y: number, width: number, height: number) => void,
+  ) => {}
+
+  setNativeProps = (_: PressableProps) => {}
+
+  focus = () => {}
+
+  blur = () => {}
+
+  onPress = (event: PressableEvent) => {
+    if (!this.props.onPress) return
+    this.props.onPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onLongPress = (event: PressableEvent) => {
+    if (!this.props.onLongPress) return
+    this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressIn = (event: PressableEvent) => {
+    if (!this.props.onPressIn) return
+    this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressOut = (event: PressableEvent) => {
+    if (!this.props.onPressOut) return
+    this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onHoverIn = (event: PressableEvent) => {
+    if (!this.props.onHoverIn) return
+    this.props.onHoverIn(pressableEventToMouseEvent(event, this))
+  }
+
+  onHoverOut = (event: PressableEvent) => {
+    if (!this.props.onHoverOut) return
+    this.props.onHoverOut(pressableEventToMouseEvent(event, this))
+  }
+
+  render() {
+    return (
+      <BSPressable
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
+        accessible={true}
+        accessibilityRole="button"
+      />
+    )
+  }
+}

src/components/NormalizedRNGHPressable.web.tsx

@@ -0,0 +1,3 @@
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
+
+export {NormalizedRNGHPressable}

src/components/Prompt.tsx

@@ -3,8 +3,9 @@ import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -25,9 +26,11 @@ export function Outer({
   children,
   control,
   testID,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
+  withoutPortal?: boolean
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -38,11 +41,12 @@ export function Outer({
     [titleId, descriptionId],
   )
 
-  return (
-    <Dialog.Outer control={control} testID={testID}>
-      <Context.Provider value={context}>
-        <Dialog.Handle />
+  const Wrapper =
+    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
 
+  return (
+    <Wrapper control={control} testID={testID}>
+      <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
@@ -52,7 +56,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Dialog.Outer>
+    </Wrapper>
   )
 }
 
@@ -141,7 +145,7 @@ export function Action({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onPress: ButtonProps['onPress']
+  onPress: (e: GestureResponderEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -181,6 +185,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -194,12 +199,16 @@ export function Basic({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onConfirm: ButtonProps['onPress']
+  onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
+  withoutPortal?: boolean
 }>) {
   return (
-    <Outer control={control} testID="confirmModal">
+    <Outer
+      control={control}
+      testID="confirmModal"
+      withoutPortal={withoutPortal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>

src/components/ReportDialog/SelectLabelerView.tsx

@@ -4,7 +4,6 @@ import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, useButtonContext} from '#/components/Button'

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions'
-import {Link} from '#/components/Link'
+import {BottomSheetLink} from '#/components/Link'
 import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
@@ -129,7 +129,7 @@ export function SelectReportOptionView({
               ]}>
               <Trans>Need to report a copyright violation?</Trans>
             </Text>
-            <Link
+            <BottomSheetLink
               to={DMCA_LINK}
               label={_(msg`View details for reporting a copyright violation`)}
               size="small"
@@ -139,7 +139,7 @@ export function SelectReportOptionView({
                 <Trans>View details</Trans>
               </ButtonText>
               <ButtonIcon position="right" icon={SquareArrowTopRight} />
-            </Link>
+            </BottomSheetLink>
           </View>
         )}
       </View>

src/components/ReportDialog/SubmitView.tsx

@@ -16,6 +16,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
@@ -153,7 +154,8 @@ export function SubmitView({
                 <Toggle.Item
                   key={labeler.creator.did}
                   name={labeler.creator.did}
-                  label={title}>
+                  label={title}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <LabelerToggle title={title} />
                 </Toggle.Item>
               )

src/components/ReportDialog/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {Pressable, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -8,7 +9,6 @@ import {useMyLabelersQuery} from '#/state/queries/preferences'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {AppBskyLabelerDefs} from '@atproto/api'
-import {BottomSheetScrollViewMethods} from '@discord/bottom-sheet/src'
 
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -24,8 +24,6 @@ import {ReportDialogProps} from './types'
 export function ReportDialog(props: ReportDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ReportDialogInner {...props} />
     </Dialog.Outer>
   )
@@ -40,7 +38,7 @@ function ReportDialogInner(props: ReportDialogProps) {
   } = useMyLabelersQuery()
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
-  const ref = React.useRef<BottomSheetScrollViewMethods>(null)
+  const ref = React.useRef<ScrollView>(null)
   useOnKeyboardDidShow(() => {
     ref.current?.scrollToEnd({animated: true})
   })

src/components/StarterPack/QrCodeDialog.tsx

@@ -149,7 +149,6 @@ export function QrCodeDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>

src/components/StarterPack/ShareDialog.tsx

@@ -6,14 +6,14 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {shareUrl} from '#/lib/sharing'
+import {logEvent} from '#/lib/statsig/statsig'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {shareUrl} from 'lib/sharing'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isNative, isWeb} from 'platform/detection'
-import * as Toast from 'view/com/util/Toast'
+import {isNative, isWeb} from '#/platform/detection'
+import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
@@ -84,7 +84,6 @@ function ShareDialogInner({
 
   return (
     <>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
           <View style={[a.p_xl, a.align_center]}>

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -3,13 +3,13 @@ import type {ListRenderItemInfo} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
+import {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -45,7 +45,7 @@ export function WizardEditListDialog({
   const {currentAccount} = useSession()
   const initialNumToRender = useInitialNumToRender()
 
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
 
   const getData = () => {
     if (state.currentStep === 'Feeds') return state.feeds
@@ -76,11 +76,7 @@ export function WizardEditListDialog({
     )
 
   return (
-    <Dialog.Outer
-      control={control}
-      testID="newChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['95%']}}}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control} testID="newChatDialog">
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}
@@ -103,13 +99,7 @@ export function WizardEditListDialog({
                       height: 48,
                     },
                   ]
-                : [
-                    a.pb_sm,
-                    a.align_end,
-                    {
-                      height: 68,
-                    },
-                  ],
+                : [a.pb_sm, a.align_end],
             ]}>
             <View style={{width: 60}} />
             <Text style={[a.font_bold, a.text_xl]}>
@@ -143,8 +133,6 @@ export function WizardEditListDialog({
             paddingHorizontal: 0,
             marginTop: 0,
             paddingTop: 0,
-            borderTopLeftRadius: 40,
-            borderTopRightRadius: 40,
           }),
         ]}
         webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}

src/components/TagMenu/index.tsx

@@ -84,8 +84,6 @@ export function TagMenu({
       {children}
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
         <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
           {isPreferencesLoading ? (
             <View style={[a.w_full, a.align_center]}>

src/components/WhoCanReply.tsx

@@ -170,7 +170,6 @@ function WhoCanReplyDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
         style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>

src/components/dialogs/BirthDateSettings.tsx

@@ -30,8 +30,6 @@ export function BirthDateSettingsDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
         <View style={[a.gap_sm, a.pb_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>

src/components/dialogs/Embed.tsx

@@ -27,7 +27,6 @@ type EmbedDialogProps = {
 let EmbedDialog = ({control, ...rest}: EmbedDialogProps): React.ReactNode => {
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <EmbedDialogInner {...rest} />
     </Dialog.Outer>
   )

src/components/dialogs/EmbedConsent.tsx

@@ -49,8 +49,6 @@ export function EmbedConsentDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}
         style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>

src/components/dialogs/GifSelect.ios.tsx

@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonText} from '../Button'
-import {Handle} from '../Dialog'
 import {useThrottledValue} from '../hooks/useThrottledValue'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
@@ -70,7 +69,6 @@ export function GifSelectDialog({
       aria-modal
       accessibilityViewIsModal>
       <View style={[a.flex_1, t.atoms.bg]}>
-        <Handle />
         <ErrorBoundary renderError={renderErrorBoundary}>
           <GifList onSelectGif={onSelectGif} close={close} />
         </ErrorBoundary>

src/components/dialogs/GifSelect.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react'
 import {TextInput, View} from 'react-native'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -19,6 +18,7 @@ import {
 } from '#/state/queries/tenor'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {ListMethods} from '#/view/com/util/List'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -57,11 +57,7 @@ export function GifSelectDialog({
   )
 
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}
-      onClose={onClose}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control} onClose={onClose}>
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>
@@ -80,7 +76,7 @@ function GifList({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const textInputRef = useRef<TextInput>(null)
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
   const [undeferredSearch, setSearch] = useState('')
   const search = useThrottledValue(undeferredSearch, 500)
 

src/components/dialogs/MutedWords.tsx

@@ -30,6 +30,7 @@ import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/P
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 
@@ -39,7 +40,6 @@ export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <MutedWordsInner />
     </Dialog.Outer>
   )
@@ -169,7 +169,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word until you unmute it`)}
                   name="forever"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -184,7 +185,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 24 hours`)}
                   name="24_hours"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -208,7 +210,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 7 days`)}
                   name="7_days"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -223,7 +226,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 30 days`)}
                   name="30_days"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -257,7 +261,8 @@ function MutedWordsInner() {
               <Toggle.Item
                 label={_(msg`Mute this word in post text and tags`)}
                 name="content"
-                style={[a.flex_1]}>
+                style={[a.flex_1]}
+                PressableComponent={NormalizedRNGHPressable}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -273,7 +278,8 @@ function MutedWordsInner() {
               <Toggle.Item
                 label={_(msg`Mute this word in tags only`)}
                 name="tag"
-                style={[a.flex_1]}>
+                style={[a.flex_1]}
+                PressableComponent={NormalizedRNGHPressable}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -303,7 +309,8 @@ function MutedWordsInner() {
               name="exclude_following"
               style={[a.flex_row, a.justify_between]}
               value={excludeFollowing}
-              onChange={setExcludeFollowing}>
+              onChange={setExcludeFollowing}
+              PressableComponent={NormalizedRNGHPressable}>
               <TargetToggle>
                 <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
                   <Toggle.Checkbox />

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -37,6 +37,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type PostInteractionSettingsFormProps = {
@@ -61,7 +62,6 @@ export function PostInteractionSettingsControlledDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -96,7 +96,6 @@ export function PostInteractionSettingsDialog(
 ) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <PostInteractionSettingsDialogControlledInner {...props} />
     </Dialog.Outer>
   )
@@ -305,7 +304,8 @@ export function PostInteractionSettingsForm({
               }
               value={quotesEnabled}
               onChange={onChangeQuotesEnabled}
-              style={[, a.justify_between, a.pt_xs]}>
+              style={[, a.justify_between, a.pt_xs]}
+              PressableComponent={NormalizedRNGHPressable}>
               <Text style={[t.atoms.text_contrast_medium]}>
                 {quotesEnabled ? (
                   <Trans>Quote posts enabled</Trans>

src/components/dialogs/Signin.tsx

@@ -18,7 +18,6 @@ export function SigninDialog() {
   const {signinDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <SigninDialogInner control={control} />
     </Dialog.Outer>
   )

src/components/dialogs/SwitchAccount.tsx

@@ -42,8 +42,6 @@ export function SwitchAccountDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
         <View style={[a.gap_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>

src/components/dialogs/nuxs/NeueTypography.tsx

@@ -43,8 +43,6 @@ export function NeueTypography() {
 
   return (
     <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>

src/components/dms/ConvoMenu.tsx

@@ -136,7 +136,7 @@ let ConvoMenu = ({
           <Menu.Outer>
             <Menu.Item
               label={_(msg`Leave conversation`)}
-              onPress={leaveConvoControl.open}>
+              onPress={() => leaveConvoControl.open()}>
               <Menu.ItemText>
                 <Trans>Leave conversation</Trans>
               </Menu.ItemText>
@@ -195,7 +195,7 @@ let ConvoMenu = ({
               </Menu.Item>
               <Menu.Item
                 label={_(msg`Report conversation`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                 <Menu.ItemText>
                   <Trans>Report conversation</Trans>
                 </Menu.ItemText>
@@ -206,7 +206,7 @@ let ConvoMenu = ({
             <Menu.Group>
               <Menu.Item
                 label={_(msg`Leave conversation`)}
-                onPress={leaveConvoControl.open}>
+                onPress={() => leaveConvoControl.open()}>
                 <Menu.ItemText>
                   <Trans>Leave conversation</Trans>
                 </Menu.ItemText>

src/components/dms/MessageMenu.tsx

@@ -7,11 +7,11 @@ import {useLingui} from '@lingui/react'
 
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
+import {isWeb} from '#/platform/detection'
+import {useConvoActive} from '#/state/messages/convo'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {isWeb} from 'platform/detection'
-import {useConvoActive} from 'state/messages/convo'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ReportDialog} from '#/components/dms/ReportDialog'
@@ -120,7 +120,7 @@ export let MessageMenu = ({
             <Menu.Item
               testID="messageDropdownDeleteBtn"
               label={_(msg`Delete message for me`)}
-              onPress={deleteControl.open}>
+              onPress={() => deleteControl.open()}>
               <Menu.ItemText>{_(msg`Delete for me`)}</Menu.ItemText>
               <Menu.ItemIcon icon={Trash} position="right" />
             </Menu.Item>
@@ -128,7 +128,7 @@ export let MessageMenu = ({
               <Menu.Item
                 testID="messageDropdownReportBtn"
                 label={_(msg`Report message`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                 <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={Warning} position="right" />
               </Menu.Item>

src/components/dms/ReportDialog.tsx

@@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'
 
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {isAndroid} from '#/platform/detection'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
@@ -41,10 +40,7 @@ let ReportDialog = ({
 }): React.ReactNode => {
   const {_} = useLingui()
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control}>
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />

src/components/dms/dialogs/NewChatDialog.tsx

@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import {FAB} from '#/view/com/util/fab/FAB'
 import * as Toast from '#/view/com/util/Toast'
 import {useTheme} from '#/alf'
@@ -55,10 +55,7 @@ export function NewChat({
         accessibilityHint=""
       />
 
-      <Dialog.Outer
-        control={control}
-        testID="newChatDialog"
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+      <Dialog.Outer control={control} testID="newChatDialog">
         <SearchablePeopleList
           title={_(msg`Start a new chat`)}
           onSelectChat={onCreateChat}

src/components/dms/dialogs/SearchablePeopleList.tsx

@@ -5,10 +5,8 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import type {TextInput as TextInputType} from 'react-native'
-import {View} from 'react-native'
+import {TextInput, View} from 'react-native'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,15 +14,15 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {useListConvosQuery} from '#/state/queries/messages/list-converations'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
-import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
+import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {TextInput} from '#/components/dms/dialogs/TextInput'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
@@ -66,9 +64,9 @@ export function SearchablePeopleList({
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const control = Dialog.useDialogContext()
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
   const {currentAccount} = useSession()
-  const inputRef = useRef<TextInputType>(null)
+  const inputRef = useRef<TextInput>(null)
 
   const [searchText, setSearchText] = useState('')
 
@@ -242,13 +240,12 @@ export function SearchablePeopleList({
       <View
         style={[
           a.relative,
-          a.pt_md,
+          web(a.pt_md),
           a.pb_xs,
           a.px_lg,
           a.border_b,
           t.atoms.border_contrast_low,
           t.atoms.bg,
-          native([a.pt_lg]),
         ]}>
         <View
           style={[
@@ -474,7 +471,7 @@ function SearchInput({
   value: string
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInputType>
+  inputRef: React.RefObject<TextInput>
 }) {
   const t = useTheme()
   const {_} = useLingui()

src/components/dms/dialogs/ShareViaChatDialog.tsx

@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import * as Toast from '#/view/com/util/Toast'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from './SearchablePeopleList'
@@ -17,10 +17,7 @@ export function SendViaChatDialog({
   onSelectChat: (chatId: string) => void
 }) {
   return (
-    <Dialog.Outer
-      control={control}
-      testID="sendViaChatChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+    <Dialog.Outer control={control} testID="sendViaChatChatDialog">
       <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
     </Dialog.Outer>
   )

src/components/forms/DateField/index.tsx

@@ -57,7 +57,6 @@ export function DateField({
         accessibilityHint={accessibilityHint}
       />
       <Dialog.Outer control={control} testID={testID}>
-        <Dialog.Handle />
         <Dialog.Inner label={label}>
           <View style={a.gap_lg}>
             <View style={[a.relative, a.w_full, a.align_center]}>

src/components/forms/Toggle.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {isNative} from '#/platform/detection'
-import {HITSLOP_10} from 'lib/constants'
 import {
   atoms as a,
   flatten,
@@ -68,6 +68,7 @@ export type ItemProps = ViewStyleProp & {
   onChange?: (selected: boolean) => void
   isInvalid?: boolean
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
+  PressableComponent?: React.ComponentType<PressableProps>
 }
 
 export function useItemContext() {
@@ -159,6 +160,7 @@ export function Item({
   style,
   type = 'checkbox',
   label,
+  PressableComponent = Pressable,
   ...rest
 }: ItemProps) {
   const {
@@ -206,7 +208,7 @@ export function Item({
 
   return (
     <ItemContext.Provider value={state}>
-      <Pressable
+      <PressableComponent
         accessibilityHint={undefined} // optional
         hitSlop={HITSLOP_10}
         {...rest}
@@ -231,7 +233,7 @@ export function Item({
         onBlur={onBlur}
         style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
         {typeof children === 'function' ? children(state) : children}
-      </Pressable>
+      </PressableComponent>
     </ItemContext.Provider>
   )
 }

src/components/intents/VerifyEmailIntentDialog.tsx

@@ -20,7 +20,6 @@ export function VerifyEmailIntentDialog() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Inner control={control} />
     </Dialog.Outer>
   )

src/components/moderation/LabelsOnMeDialog.tsx

@@ -13,6 +13,7 @@ import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
@@ -31,8 +32,6 @@ export interface LabelsOnMeDialogProps {
 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LabelsOnMeDialogInner {...props} />
     </Dialog.Outer>
   )
@@ -158,23 +157,25 @@ function Label({
       <Divider />
 
       <View style={[a.px_md, a.py_sm, t.atoms.bg_contrast_25]}>
-        <Text style={[t.atoms.text_contrast_medium]}>
-          {isSelfLabel ? (
+        {isSelfLabel ? (
+          <Text style={[t.atoms.text_contrast_medium]}>
             <Trans>This label was applied by you.</Trans>
-          ) : (
-            <Trans>
-              Source:{' '}
-              <InlineLinkText
-                label={sourceName}
-                to={makeProfileLink(
-                  labeler ? labeler.creator : {did: label.src, handle: ''},
-                )}
-                onPress={() => control.close()}>
-                {sourceName}
-              </InlineLinkText>
-            </Trans>
-          )}
-        </Text>
+          </Text>
+        ) : (
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[t.atoms.text_contrast_medium]}>
+              <Trans>Source: </Trans>{' '}
+            </Text>
+            <BottomSheetInlineLinkText
+              label={sourceName}
+              to={makeProfileLink(
+                labeler ? labeler.creator : {did: label.src, handle: ''},
+              )}
+              onPress={() => control.close()}>
+              {sourceName}
+            </BottomSheetInlineLinkText>
+          </View>
+        )}
       </View>
     </View>
   )

src/components/moderation/ModerationDetailsDialog.tsx

@@ -10,6 +10,7 @@ import {listUriToHref} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {InlineLinkText} from '#/components/Link'
@@ -26,7 +27,6 @@ export interface ModerationDetailsDialogProps {
 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <ModerationDetailsDialogInner {...props} />
     </Dialog.Outer>
   )
@@ -141,23 +141,24 @@ function ModerationDetailsDialogInner({
       {modcause?.type === 'label' && (
         <View style={[a.pt_lg]}>
           <Divider />
-          <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
-            {modcause.source.type === 'user' ? (
+          {modcause.source.type === 'user' ? (
+            <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
               <Trans>This label was applied by the author.</Trans>
-            ) : (
-              <Trans>
-                This label was applied by{' '}
-                <InlineLinkText
-                  label={desc.source || _(msg`an unknown labeler`)}
-                  to={makeProfileLink({did: modcause.label.src, handle: ''})}
-                  onPress={() => control.close()}
-                  style={a.text_md}>
-                  {desc.source || _(msg`an unknown labeler`)}
-                </InlineLinkText>
-                .
-              </Trans>
-            )}
-          </Text>
+            </Text>
+          ) : (
+            <>
+              <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
+                <Trans>This label was applied by </Trans>
+              </Text>
+              <BottomSheetInlineLinkText
+                label={desc.source || _(msg`an unknown labeler`)}
+                to={makeProfileLink({did: modcause.label.src, handle: ''})}
+                onPress={() => control.close()}
+                style={a.text_md}>
+                {desc.source || _(msg`an unknown labeler`)}
+              </BottomSheetInlineLinkText>
+            </>
+          )}
         </View>
       )}
 

src/screens/Messages/components/ChatDisabled.tsx

@@ -54,7 +54,6 @@ function AppealDialog() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <DialogInner />
       </Dialog.Outer>
     </>

src/screens/Onboarding/StepProfile/index.tsx

@@ -286,7 +286,6 @@ export function StepProfile() {
       </View>
 
       <Dialog.Outer control={creatorControl}>
-        <Dialog.Handle />
         <Dialog.Inner
           label="Avatar creator"
           style={[

src/screens/StarterPack/StarterPackScreen.tsx

@@ -15,35 +15,35 @@ import {useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {batchedUpdates} from '#/lib/batchedUpdates'
+import {HITSLOP_20} from '#/lib/constants'
+import {isBlockedOrBlocking, isMuted} from '#/lib/moderation/blocked-and-muted'
+import {makeProfileLink, makeStarterPackLink} from '#/lib/routes/links'
+import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
+import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {updateProfileShadow} from '#/state/cache/profile-shadow'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {getAllListMembers} from '#/state/queries/list-members'
+import {useResolvedStarterPackShortLink} from '#/state/queries/resolve-short-link'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {useShortenLink} from '#/state/queries/shorten-link'
 import {useDeleteStarterPackMutation} from '#/state/queries/starter-packs'
+import {useStarterPackQuery} from '#/state/queries/starter-packs'
+import {useAgent, useSession} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {
   ProgressGuideAction,
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
-import {batchedUpdates} from 'lib/batchedUpdates'
-import {HITSLOP_20} from 'lib/constants'
-import {isBlockedOrBlocking, isMuted} from 'lib/moderation/blocked-and-muted'
-import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
-import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isWeb} from 'platform/detection'
-import {updateProfileShadow} from 'state/cache/profile-shadow'
-import {useModerationOpts} from 'state/preferences/moderation-opts'
-import {getAllListMembers} from 'state/queries/list-members'
-import {useResolvedStarterPackShortLink} from 'state/queries/resolve-short-link'
-import {useResolveDidQuery} from 'state/queries/resolve-uri'
-import {useShortenLink} from 'state/queries/shorten-link'
-import {useStarterPackQuery} from 'state/queries/starter-packs'
-import {useAgent, useSession} from 'state/session'
-import {useLoggedOutViewControls} from 'state/shell/logged-out'
-import {useSetActiveStarterPack} from 'state/shell/starter-pack'
+import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
+import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
+import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
 import * as Toast from '#/view/com/util/Toast'
-import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
-import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
-import {CenteredView} from 'view/com/util/Views'
+import {CenteredView} from '#/view/com/util/Views'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -591,7 +591,7 @@ function OverflowMenu({
 
               <Menu.Item
                 label={_(msg`Report starter pack`)}
-                onPress={reportDialogControl.open}>
+                onPress={() => reportDialogControl.open()}>
                 <Menu.ItemText>
                   <Trans>Report starter pack</Trans>
                 </Menu.ItemText>

src/state/dialogs/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {SharedValue, useSharedValue} from 'react-native-reanimated'
 
+import {isWeb} from '#/platform/detection'
 import {DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
 
@@ -16,14 +16,6 @@ interface IDialogContext {
    * `useId`.
    */
   openDialogs: React.MutableRefObject<Set<string>>
-  /**
-   * The counterpart to `accessibilityViewIsModal` for Android. This property
-   * applies to the parent of all non-modal views, and prevents TalkBack from
-   * navigating within content beneath an open dialog.
-   *
-   * @see https://reactnative.dev/docs/accessibility#importantforaccessibility-android
-   */
-  importantForAccessibility: SharedValue<'auto' | 'no-hide-descendants'>
 }
 
 const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
@@ -49,40 +41,36 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     Map<string, React.MutableRefObject<DialogControlRefProps>>
   >(new Map())
   const openDialogs = React.useRef<Set<string>>(new Set())
-  const importantForAccessibility = useSharedValue<
-    'auto' | 'no-hide-descendants'
-  >('auto')
 
   const closeAllDialogs = React.useCallback(() => {
-    openDialogs.current.forEach(id => {
-      const dialog = activeDialogs.current.get(id)
-      if (dialog) dialog.current.close()
-    })
-    return openDialogs.current.size > 0
+    if (isWeb) {
+      openDialogs.current.forEach(id => {
+        const dialog = activeDialogs.current.get(id)
+        if (dialog) dialog.current.close()
+      })
+
+      return openDialogs.current.size > 0
+    } else {
+      // @TODO DIALOGS REFACTOR
+      console.error('HAILEY FIX THIS 🥺📋')
+      return false
+    }
   }, [])
 
-  const setDialogIsOpen = React.useCallback(
-    (id: string, isOpen: boolean) => {
-      if (isOpen) {
-        openDialogs.current.add(id)
-        importantForAccessibility.value = 'no-hide-descendants'
-      } else {
-        openDialogs.current.delete(id)
-        if (openDialogs.current.size < 1) {
-          importantForAccessibility.value = 'auto'
-        }
-      }
-    },
-    [importantForAccessibility],
-  )
+  const setDialogIsOpen = React.useCallback((id: string, isOpen: boolean) => {
+    if (isOpen) {
+      openDialogs.current.add(id)
+    } else {
+      openDialogs.current.delete(id)
+    }
+  }, [])
 
   const context = React.useMemo<IDialogContext>(
     () => ({
       activeDialogs,
       openDialogs,
-      importantForAccessibility,
     }),
-    [importantForAccessibility, activeDialogs, openDialogs],
+    [activeDialogs, openDialogs],
   )
   const controls = React.useMemo(
     () => ({closeAllDialogs, setDialogIsOpen}),

src/view/com/auth/server-input/index.tsx

@@ -12,6 +12,7 @@ import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {InlineLinkText} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {P, Text} from '#/components/Typography'
 
 export function ServerInputDialog({
@@ -66,12 +67,7 @@ export function ServerInputDialog({
   ])
 
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}
-      onClose={onClose}>
-      <Dialog.Handle />
-
+    <Dialog.Outer control={control} onClose={onClose}>
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
@@ -87,7 +83,10 @@ export function ServerInputDialog({
             label="Preferences"
             values={fixedOption}
             onChange={setFixedOption}>
-            <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
+            <ToggleButton.Button
+              name={BSKY_SERVICE}
+              label={_(msg`Bluesky`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Bluesky`)}
               </ToggleButton.ButtonText>
@@ -95,7 +94,8 @@ export function ServerInputDialog({
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
-              label={_(msg`Custom`)}>
+              label={_(msg`Custom`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Custom`)}
               </ToggleButton.ButtonText>

src/view/com/composer/Composer.tsx

@@ -861,6 +861,7 @@ export const ComposePost = ({
         onConfirm={onClose}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
+        withoutPortal={true}
       />
     </KeyboardAvoidingView>
   )

src/view/com/composer/GifAltText.tsx

@@ -12,7 +12,6 @@ import {
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
 import {enforceLen} from '#/lib/strings/helpers'
-import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -96,10 +95,7 @@ export function GifAltText({
 
       <AltTextReminder />
 
-      <Dialog.Outer
-        control={control}
-        nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-        <Dialog.Handle />
+      <Dialog.Outer control={control}>
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -22,8 +22,6 @@ type Props = {
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ImageAltTextInner {...props} />
     </Dialog.Outer>
   )

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {useEnforceMaxGraphemeCount} from '#/lib/strings/helpers'
 import {LANGUAGES} from '#/locale/languages'
-import {isAndroid, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -56,10 +56,7 @@ export function SubtitleDialogBtn(props: Props) {
           {isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>}
         </ButtonText>
       </Button>
-      <Dialog.Outer
-        control={control}
-        nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
-        <Dialog.Handle />
+      <Dialog.Outer control={control}>
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -437,7 +437,7 @@ let PostDropdownBtn = ({
               <Menu.Item
                 testID="postDropdownSendViaDMBtn"
                 label={_(msg`Send via direct message`)}
-                onPress={sendViaChatControl.open}>
+                onPress={() => sendViaChatControl.open()}>
                 <Menu.ItemText>
                   <Trans>Send via direct message</Trans>
                 </Menu.ItemText>
@@ -465,7 +465,7 @@ let PostDropdownBtn = ({
               <Menu.Item
                 testID="postDropdownEmbedBtn"
                 label={_(msg`Embed post`)}
-                onPress={embedPostControl.open}>
+                onPress={() => embedPostControl.open()}>
                 <Menu.ItemText>{_(msg`Embed post`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={CodeBrackets} position="right" />
               </Menu.Item>
@@ -540,7 +540,7 @@ let PostDropdownBtn = ({
                           ? _(msg`Hide reply for me`)
                           : _(msg`Hide post for me`)
                       }
-                      onPress={hidePromptControl.open}>
+                      onPress={() => hidePromptControl.open()}>
                       <Menu.ItemText>
                         {isReply
                           ? _(msg`Hide reply for me`)
@@ -628,7 +628,9 @@ let PostDropdownBtn = ({
                     <Menu.Item
                       testID="postDropdownEditPostInteractions"
                       label={_(msg`Edit interaction settings`)}
-                      onPress={postInteractionSettingsDialogControl.open}
+                      onPress={() =>
+                        postInteractionSettingsDialogControl.open()
+                      }
                       {...(isAuthor
                         ? Platform.select({
                             web: {
@@ -647,7 +649,7 @@ let PostDropdownBtn = ({
                     <Menu.Item
                       testID="postDropdownDeleteBtn"
                       label={_(msg`Delete post`)}
-                      onPress={deletePromptControl.open}>
+                      onPress={() => deletePromptControl.open()}>
                       <Menu.ItemText>{_(msg`Delete post`)}</Menu.ItemText>
                       <Menu.ItemIcon icon={Trash} position="right" />
                     </Menu.Item>

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -86,8 +86,9 @@ let RepostButton = ({
           </Text>
         ) : undefined}
       </Button>
-      <Dialog.Outer control={dialogControl}>
-        <Dialog.Handle />
+      <Dialog.Outer
+        control={dialogControl}
+        nativeOptions={{preventExpansion: true}}>
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
@@ -155,7 +156,6 @@ let RepostButton = ({
             </View>
             <Button
               label={_(msg`Cancel quote post`)}
-              onAccessibilityEscape={close}
               onPress={close}
               size="large"
               variant="solid"

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -78,8 +78,6 @@ export function DisableEmail2FADialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

src/view/screens/Settings/ExportCarDialog.tsx

@@ -52,8 +52,6 @@ export function ExportCarDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

src/view/screens/Storybook/Dialogs.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {NavigationProp} from 'lib/routes/types'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -179,19 +179,13 @@ export function Dialogs() {
       </Prompt.Outer>
 
       <Dialog.Outer control={basic}>
-        <Dialog.Handle />
-
         <Dialog.Inner label="test">
           <H3 nativeID="dialog-title">Dialog</H3>
           <P nativeID="dialog-description">A basic dialog</P>
         </Dialog.Inner>
       </Dialog.Outer>
 
-      <Dialog.Outer
-        control={scrollable}
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
-        <Dialog.Handle />
-
+      <Dialog.Outer control={scrollable}>
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -230,8 +224,6 @@ export function Dialogs() {
       </Dialog.Outer>
 
       <Dialog.Outer control={testDialog}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -356,8 +348,6 @@ export function Dialogs() {
 
       {shouldRenderUnmountTest && (
         <Dialog.Outer control={unmountTestDialog}>
-          <Dialog.Handle />
-
           <Dialog.Inner label="test">
             <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
             <P nativeID="dialog-description">Will unmount in about 5 seconds</P>

src/view/shell/index.tsx

@@ -13,6 +13,13 @@ import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
+import {useDedupe} from '#/lib/hooks/useDedupe'
+import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useNotificationsRegistration} from '#/lib/notifications/notifications'
+import {isStateAtTabRoot} from '#/lib/routes/helpers'
+import {useTheme} from '#/lib/ThemeContext'
+import {isAndroid} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
@@ -20,17 +27,9 @@ import {
   useSetDrawerOpen,
 } from '#/state/shell'
 import {useCloseAnyActiveElement} from '#/state/util'
-import {useDedupe} from 'lib/hooks/useDedupe'
-import {useNotificationsHandler} from 'lib/hooks/useNotificationHandler'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useNotificationsRegistration} from 'lib/notifications/notifications'
-import {isStateAtTabRoot} from 'lib/routes/helpers'
-import {useTheme} from 'lib/ThemeContext'
-import {isAndroid} from 'platform/detection'
-import {useDialogStateContext} from 'state/dialogs'
-import {Lightbox} from 'view/com/lightbox/Lightbox'
-import {ModalsContainer} from 'view/com/modals/Modal'
-import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {Lightbox} from '#/view/com/lightbox/Lightbox'
+import {ModalsContainer} from '#/view/com/modals/Modal'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -61,7 +60,6 @@ function ShellInner() {
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   const {hasSession} = useSession()
   const closeAnyActiveElement = useCloseAnyActiveElement()
-  const {importantForAccessibility} = useDialogStateContext()
 
   useNotificationsRegistration()
   useNotificationsHandler()
@@ -101,9 +99,7 @@ function ShellInner() {
 
   return (
     <>
-      <Animated.View
-        style={containerPadding}
-        importantForAccessibility={importantForAccessibility}>
+      <Animated.View style={containerPadding}>
         <ErrorBoundary>
           <Drawer
             renderDrawerContent={renderDrawerContent}

yarn.lock

@@ -18063,15 +18063,14 @@ react-native-drawer-layout@^4.0.0-alpha.3:
   dependencies:
     use-latest-callback "^0.1.9"
 
-react-native-gesture-handler@~2.16.2:
-  version "2.16.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
-  integrity sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==
+react-native-gesture-handler@2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.0.tgz#2d9ec4e9bd22619ebe36269dda3ecb1173928276"
+  integrity sha512-rFKqgHRfxQ7uSAivk8vxCiW4SB3G0U7jnv7kZD4Y90K5kp6YrU8Q3tWhxe3Rx55BIvSd3mBe9ZWbWVJ0FsSHPA==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
-    lodash "^4.17.21"
     prop-types "^15.7.2"
 
 react-native-get-random-values@^1.6.0: