try and split platform code

package.json

@@ -112,6 +112,7 @@
     "eventemitter3": "^5.0.1",
     "expo": "^50.0.17",
     "expo-application": "^5.8.3",
+    "expo-blur": "^13.0.2",
     "expo-build-properties": "^0.11.1",
     "expo-camera": "~14.0.4",
     "expo-clipboard": "^5.0.1",

src/alf/atoms.ts

@@ -1,4 +1,4 @@
-import {Platform} from 'react-native'
+import {Platform, StyleSheet} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
@@ -284,6 +284,21 @@ export const atoms = {
   border_r: {
     borderRightWidth: 1,
   },
+  border_hairline: {
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  border_t_hairline: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  border_b_hairline: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  border_l_hairline: {
+    borderLeftWidth: StyleSheet.hairlineWidth,
+  },
+  border_r_hairline: {
+    borderRightWidth: StyleSheet.hairlineWidth,
+  },
 
   /*
    * Shadow

src/screens/Messages/Conversation/MessageInput.tsx

@@ -24,6 +24,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {useSharedInputStyles} from '#/components/forms/TextField'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
+import {InputPill} from './MessageInputElements'
 
 export function MessageInput({
   onSendMessage,
@@ -82,17 +83,14 @@ export function MessageInput({
   )
 
   return (
-    <View style={a.p_md}>
-      <View
+    <View style={[a.px_md, a.py_sm]}>
+      <InputPill
         style={[
           a.w_full,
-          a.flex_row,
-          t.atoms.bg_contrast_25,
+          a.overflow_hidden,
           {
-            padding: a.p_sm.padding - 2,
-            paddingLeft: a.p_md.padding - 2,
-            borderWidth: 2,
             borderRadius: 23,
+            borderWidth: 2,
             borderColor: 'transparent',
           },
           isFocused && inputStyles.chromeFocus,
@@ -135,7 +133,7 @@ export function MessageInput({
           onPress={onSubmit}>
           <PaperPlane fill={t.palette.white} style={[a.relative, {left: 1}]} />
         </Pressable>
-      </View>
+      </InputPill>
     </View>
   )
 }

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -14,6 +14,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {useSharedInputStyles} from '#/components/forms/TextField'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
+import {InputPill} from './MessageInputElements'
 
 export function MessageInput({
   onSendMessage,
@@ -65,10 +66,9 @@ export function MessageInput({
 
   return (
     <View style={a.p_sm}>
-      <View
+      <InputPill
         style={[
           a.flex_row,
-          t.atoms.bg_contrast_25,
           {
             paddingHorizontal: a.p_sm.padding - 2,
             paddingLeft: a.p_md.padding - 2,
@@ -124,7 +124,7 @@ export function MessageInput({
           onPress={onSubmit}>
           <PaperPlane fill={t.palette.white} style={[a.relative, {left: 1}]} />
         </Pressable>
-      </View>
+      </InputPill>
     </View>
   )
 }

src/screens/Messages/Conversation/MessageInputElements.ios.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import {View, ViewProps} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {BlurView} from 'expo-blur'
+
+import {atoms as a, useTheme} from '#/alf'
+
+export function InputContainer({style, children, ...props}: ViewProps) {
+  const t = useTheme()
+  const lightMode = t.name === 'light'
+  return (
+    <Animated.View
+      style={[t.atoms.border_contrast_high, a.border_t, style]}
+      {...props}>
+      <BlurView tint={lightMode ? 'systemMaterialLight' : 'systemMaterialDark'}>
+        {children}
+      </BlurView>
+    </Animated.View>
+  )
+}
+
+export function InputPill({style, children, ...props}: ViewProps) {
+  const t = useTheme()
+  const lightMode = t.name === 'light'
+  return (
+    <View style={style} {...props}>
+      <BlurView
+        style={[
+          a.flex_row,
+          {
+            padding: a.p_sm.padding - 2,
+            paddingLeft: a.p_md.padding - 2,
+          },
+        ]}
+        tint={
+          lightMode ? 'systemThickMaterialLight' : 'systemThickMaterialDark'
+        }>
+        {children}
+      </BlurView>
+    </View>
+  )
+}

src/screens/Messages/Conversation/MessageInputElements.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {View, ViewProps} from 'react-native'
+import Animated from 'react-native-reanimated'
+
+import {useTheme} from '#/alf'
+
+export function InputContainer({style, ...props}: ViewProps) {
+  const t = useTheme()
+  return <Animated.View style={[t.atoms.bg, style]} {...props} />
+}
+
+export function InputPill({style, ...props}: ViewProps) {
+  const t = useTheme()
+  return <View style={[t.atoms.bg_contrast_25, style]} {...props} />
+}

src/screens/Messages/Conversation/MessagesList.tsx

@@ -24,11 +24,12 @@ import {isWeb} from 'platform/detection'
 import {List} from 'view/com/util/List'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {InputContainer} from './MessageInputElements'
 
 function MaybeLoader({isLoading}: {isLoading: boolean}) {
   return (
@@ -65,7 +66,6 @@ function onScrollToIndexFailed() {
 }
 
 export function MessagesList() {
-  const t = useTheme()
   const convo = useConvoActive()
   const {getAgent} = useAgent()
   const flatListRef = useAnimatedRef<FlatList>()
@@ -318,9 +318,9 @@ export function MessagesList() {
         />
       </ScrollProvider>
       {showNewMessagesPill && <NewMessagesPill />}
-      <Animated.View style={[a.relative, t.atoms.bg, animatedInputStyle]}>
+      <InputContainer style={[a.relative, animatedInputStyle]}>
         <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
-      </Animated.View>
+      </InputContainer>
     </>
   )
 }

yarn.lock

@@ -11673,6 +11673,11 @@ expo-asset@~9.0.2:
     invariant "^2.2.4"
     md5-file "^3.2.3"
 
+expo-blur@^13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-13.0.2.tgz#c2d179b19b13830db1d8b90c51373235f462e958"
+  integrity sha512-t2p7BChO3Reykued++QJRMZ/og6J3aXtSQ+bU31YcBeXhZLkHwjWEhiPKPnJka7J2/yTs4+jOCNDY0kCZmcE3w==
+
 expo-build-properties@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/expo-build-properties/-/expo-build-properties-0.11.1.tgz#dc9ab9fb1ac989b97da500b3ec75139c961d8b26"