design(mobile): unify Android Material layouts and native controls

apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt

@@ -8,6 +8,7 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.Typeface
+import android.os.Build
 import android.text.Spannable
 import android.text.SpannableStringBuilder
 import android.text.Spanned
@@ -164,6 +165,17 @@ private class SanitizingSelectionActionModeCallback(
   }
 }
 
+internal fun applySelectionHandleColor(textView: TextView, color: Int) {
+  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+  textView.textSelectHandle?.mutate()?.apply { setTint(color) }?.let(textView::setTextSelectHandle)
+  textView.textSelectHandleLeft?.mutate()?.apply {
+    setTint(color)
+  }?.let(textView::setTextSelectHandleLeft)
+  textView.textSelectHandleRight?.mutate()?.apply {
+    setTint(color)
+  }?.let(textView::setTextSelectHandleRight)
+}
+
 class T3MarkdownTextSelectionModule : Module() {
   private val chipImages = LruCache<String, Map<String, Any>>(128)
 
@@ -183,9 +195,23 @@ class T3MarkdownTextSelectionModule : Module() {
       }
     }.fontMetricsInt
 
+  private fun setSelectionHandleColor(reactTag: Int, color: Int) {
+    val reactContext = appContext.reactContext as? ReactContext ?: return
+    reactContext.runOnUiQueueThread {
+      val textView = runCatching {
+        UIManagerHelper.getUIManagerForReactTag(reactContext, reactTag)?.resolveView(reactTag)
+      }.getOrNull() as? TextView ?: return@runOnUiQueueThread
+      applySelectionHandleColor(textView, color)
+    }
+  }
+
   override fun definition() = ModuleDefinition {
     Name("T3MarkdownTextSelection")
 
+    Function("setSelectionHandleColor") { reactTag: Int, color: Int ->
+      setSelectionHandleColor(reactTag, color)
+    }
+
     Function("renderContextChip") { payloadJson: String ->
       val resources = appContext.reactContext?.resources ?: return@Function null
       val metrics = resources.displayMetrics

apps/mobile/modules/t3-markdown-text/android/src/test/java/expo/modules/t3markdowntext/MarkdownSelectionColorTest.kt

@@ -0,0 +1,67 @@
+package expo.modules.t3markdowntext
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.Drawable
+import android.widget.TextView
+import org.junit.Assert.assertEquals
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.RuntimeEnvironment
+import org.robolectric.annotation.Config
+import org.robolectric.annotation.GraphicsMode
+
+@RunWith(RobolectricTestRunner::class)
+@Config(sdk = [36], manifest = Config.NONE)
+@GraphicsMode(GraphicsMode.Mode.NATIVE)
+class MarkdownSelectionColorTest {
+  private fun textView() = TextView(RuntimeEnvironment.getApplication()).apply {
+    setTextSelectHandle(ColorDrawable(Color.WHITE))
+    setTextSelectHandleLeft(ColorDrawable(Color.WHITE))
+    setTextSelectHandleRight(ColorDrawable(Color.WHITE))
+  }
+
+  private fun renderedColor(drawable: Drawable?): Int {
+    requireNotNull(drawable)
+    val bitmap = Bitmap.createBitmap(4, 4, Bitmap.Config.ARGB_8888)
+    drawable.setBounds(0, 0, 4, 4)
+    drawable.draw(Canvas(bitmap))
+    val color = bitmap.getPixel(2, 2)
+    bitmap.recycle()
+    return color
+  }
+
+  @Test
+  fun retintsAllHandlesWhenTheThemeChangesWithoutChangingTheHighlight() {
+    val text = textView()
+    val highlight = 0x52FF0088
+    text.highlightColor = highlight
+
+    for (color in listOf(Color.MAGENTA, Color.GREEN, Color.MAGENTA)) {
+      applySelectionHandleColor(text, color)
+      assertEquals(color, renderedColor(text.textSelectHandle))
+      assertEquals(color, renderedColor(text.textSelectHandleLeft))
+      assertEquals(color, renderedColor(text.textSelectHandleRight))
+      assertEquals(highlight, text.highlightColor)
+    }
+  }
+
+  @Test
+  fun doesNotTintOtherTextViewsSharingDrawableState() {
+    val original = ColorDrawable(Color.WHITE)
+    val first = textView().apply {
+      setTextSelectHandleLeft(original.constantState!!.newDrawable())
+    }
+    val second = textView().apply {
+      setTextSelectHandleLeft(original.constantState!!.newDrawable())
+    }
+
+    applySelectionHandleColor(first, Color.MAGENTA)
+
+    assertEquals(Color.MAGENTA, renderedColor(first.textSelectHandleLeft))
+    assertEquals(Color.WHITE, renderedColor(second.textSelectHandleLeft))
+  }
+}

apps/mobile/modules/t3-markdown-text/src/MarkdownTextPrimitive.tsx

@@ -1,5 +1,15 @@
 import React, { type Ref } from "react";
-import { Platform, StyleSheet, Text as RNText, type TextProps, type ViewStyle } from "react-native";
+import {
+  findNodeHandle,
+  Platform,
+  processColor,
+  StyleSheet,
+  Text as RNText,
+  type ColorValue,
+  type TextProps,
+  type ViewStyle,
+} from "react-native";
+import { setMarkdownSelectionHandleColor } from "./T3MarkdownTextSelectionModule";
 import T3MarkdownTextRunNativeComponent from "./T3MarkdownTextRunNativeComponent";
 import T3MarkdownTextNativeComponent from "./T3MarkdownTextNativeComponent";
 import { flattenStyles } from "./util";
@@ -34,6 +44,7 @@ export type ContextMenuActionEvent = {
  */
 export type MarkdownTextPrimitiveProps = Omit<TextProps, "onTextLayout"> & {
   nativeTextRef?: Ref<RNText>;
+  selectionHandleColor?: ColorValue;
   uiTextView?: boolean;
   contextMenuConfig?: string;
   contextClipboardConfig?: string;
@@ -116,7 +127,45 @@ function MarkdownTextPrimitiveInner({ nativeTextRef, ...props }: MarkdownTextPri
   return <MarkdownTextPrimitiveChild {...props} />;
 }
 
-export function MarkdownTextPrimitive(props: MarkdownTextPrimitiveProps) {
+function AndroidMarkdownText({
+  nativeTextRef,
+  selectionHandleColor,
+  onLayout,
+  contextClipboardConfig: _contextClipboardConfig,
+  ...props
+}: MarkdownTextPrimitiveProps) {
+  const textRef = React.useRef<RNText | null>(null);
+  React.useImperativeHandle<RNText | null, RNText | null>(nativeTextRef, () => textRef.current, []);
+  const color = processColor(selectionHandleColor);
+  const applyHandleColor = React.useCallback(() => {
+    if (!textRef.current || typeof color !== "number") return;
+    const reactTag = findNodeHandle(textRef.current);
+    if (reactTag !== null) setMarkdownSelectionHandleColor(reactTag, color);
+  }, [color]);
+
+  // RN's selectionColor only sets the highlight. Retint mounted handles when
+  // the theme changes, and after layout when the native view first exists.
+  React.useEffect(applyHandleColor, [applyHandleColor]);
+
+  return (
+    <RNText
+      ref={textRef}
+      {...props}
+      onLayout={(event) => {
+        applyHandleColor();
+        onLayout?.(event);
+      }}
+    />
+  );
+}
+
+export function MarkdownTextPrimitive({
+  selectionHandleColor,
+  ...props
+}: MarkdownTextPrimitiveProps) {
+  if (Platform.OS === "android" && selectionHandleColor !== undefined) {
+    return <AndroidMarkdownText {...props} selectionHandleColor={selectionHandleColor} />;
+  }
   if (Platform.OS !== "ios") {
     const { nativeTextRef, contextClipboardConfig: _contextClipboardConfig, ...textProps } = props;
     return <RNText ref={nativeTextRef} {...textProps} />;

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.tsx

@@ -133,7 +133,13 @@ function HighlightedCodeText(props: {
     }
   }
   return (
-    <MarkdownTextPrimitive uiTextView selectable style={style}>
+    <MarkdownTextPrimitive
+      uiTextView
+      selectable
+      selectionColor={props.textStyle.selectionColor}
+      selectionHandleColor={props.textStyle.selectionHandleColor}
+      style={style}
+    >
       {props.highlighted ? lines : props.content}
     </MarkdownTextPrimitive>
   );
@@ -174,8 +180,10 @@ function NativeCodeBlock(props: {
           justifyContent: "space-between",
         }}
       >
-        <Text
+        <MarkdownTextPrimitive
           selectable
+          selectionColor={props.textStyle.selectionColor}
+          selectionHandleColor={props.textStyle.selectionHandleColor}
           style={{
             flex: 1,
             color: props.textStyle.mutedColor,
@@ -184,7 +192,7 @@ function NativeCodeBlock(props: {
           }}
         >
           {languageLabel}
-        </Text>
+        </MarkdownTextPrimitive>
         <CopyTextButton
           accessibilityLabel={`Copy ${languageLabel.toLowerCase()} code`}
           text={content}
@@ -332,8 +340,10 @@ function NativeMarkdownImage(props: {
         }}
       />
       {props.node.alt ? (
-        <Text
+        <MarkdownTextPrimitive
           selectable
+          selectionColor={props.textStyle.selectionColor}
+          selectionHandleColor={props.textStyle.selectionHandleColor}
           style={{
             color: props.textStyle.mutedColor,
             fontFamily: props.textStyle.fontFamily,
@@ -342,7 +352,7 @@ function NativeMarkdownImage(props: {
           }}
         >
           {props.node.alt}
-        </Text>
+        </MarkdownTextPrimitive>
       ) : null}
     </View>
   );

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownSelectableText.tsx

@@ -338,6 +338,8 @@ export function NativeMarkdownSelectableText(props: {
       }
       uiTextView
       selectable
+      selectionColor={props.textStyle.selectionColor}
+      selectionHandleColor={props.textStyle.selectionHandleColor}
       style={{
         flexShrink: 1,
         minWidth: 0,

apps/mobile/modules/t3-markdown-text/src/SelectableMarkdownText.types.ts

@@ -1,4 +1,6 @@
 export interface NativeMarkdownTextStyle {
+  readonly selectionColor?: string;
+  readonly selectionHandleColor?: string;
   readonly color: string;
   readonly strongColor: string;
   readonly mutedColor: string;

apps/mobile/modules/t3-markdown-text/src/T3MarkdownTextSelectionModule.ts

@@ -1,6 +1,7 @@
 import { requireOptionalNativeModule } from "expo";
 
 interface T3MarkdownTextSelectionNativeModule {
+  readonly setSelectionHandleColor?: (reactTag: number, color: number) => void;
   readonly installCopySanitizer: (reactTag: number, contextClipboardConfig: string) => void;
   readonly renderContextChip?: (payloadJson: string) => {
     readonly uri: string;
@@ -20,6 +21,10 @@ export function installMarkdownCopySanitizer(reactTag: number, contextClipboardC
   nativeModule?.installCopySanitizer(reactTag, contextClipboardConfig);
 }
 
+export function setMarkdownSelectionHandleColor(reactTag: number, color: number): void {
+  nativeModule?.setSelectionHandleColor?.(reactTag, color);
+}
+
 export function renderAndroidContextChip(payloadJson: string) {
   return nativeModule?.renderContextChip?.(payloadJson) ?? null;
 }

apps/mobile/modules/t3-native-controls/android/src/main/java/expo/modules/t3nativecontrols/T3NativeControlsModule.kt

@@ -1,6 +1,7 @@
 package expo.modules.t3nativecontrols
 
 import android.content.Intent
+import android.text.format.DateFormat
 import androidx.core.content.FileProvider
 import expo.modules.kotlin.Promise
 import expo.modules.kotlin.modules.Module
@@ -15,6 +16,11 @@ class T3NativeControlsModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("T3NativeControls")
 
+    Function("is24HourFormat") {
+      val context = appContext.reactContext ?: error("The app is not active.")
+      DateFormat.is24HourFormat(context)
+    }
+
     AsyncFunction("openFile") { uri: String, mimeType: String, promise: Promise ->
       check(filePreviewPromise == null) { "A document viewer is already open." }
       val activity = appContext.currentActivity ?: error("The app is not active.")

apps/mobile/src/App.tsx

@@ -1,8 +1,7 @@
-import { BlurTargetView } from "expo-blur";
 import * as Linking from "expo-linking";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
-import { StatusBar } from "react-native";
+import { StatusBar, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -21,10 +20,8 @@ import {
 import { RootStack } from "./Stack";
 import { appAtomRegistry } from "./state/atom-registry";
 import { OverlayPortalHost } from "./components/OverlayPortal";
-import { appBlurTargetRef } from "./lib/appBlurTarget";
 import { shouldHandleAppLink } from "./lib/appLinking";
 import { useMobileNavigationTheme } from "./lib/useMobileNavigationTheme";
-
 import { SubscriptionUsageCoordinator } from "./widgets/SubscriptionUsageCoordinator";
 
 import "../global.css";
@@ -88,14 +85,13 @@ function AppContent() {
                 this, React Navigation defaults to its light theme and every native
                 header (glass buttons, title, materials) is forced light even when
                 the system is in dark mode. */}
-            {/* Blur target for Android dropdown backdrops — see appBlurTarget.ts. */}
-            <BlurTargetView ref={appBlurTargetRef} style={{ flex: 1 }}>
+            <View style={{ flex: 1 }}>
               <IncomingShareProvider>
                 <Navigation linking={appLinking} theme={navigationTheme} />
               </IncomingShareProvider>
               <ConfirmDialogHost />
               <ThreadArrangementHost />
-            </BlurTargetView>
+            </View>
             {/* Anchored-menu overlays render here — in-window, so the
                 keyboard stays up while a dropdown is open. */}
             <OverlayPortalHost />