[C-801] Add tag search text to mobile

packages/mobile/src/components/core/Tag.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native'
+
+import type { StylesProp } from 'app/styles'
+import { makeStyles } from 'app/styles'
+
+import { Text } from './Text'
+
+const useStyles = makeStyles(({ spacing, palette }) => ({
+  root: {
+    margin: spacing(1),
+    borderRadius: 2,
+    backgroundColor: palette.neutralLight4,
+    paddingVertical: spacing(1),
+    paddingHorizontal: spacing(2),
+    color: palette.white,
+    textTransform: 'uppercase',
+    overflow: 'hidden'
+  }
+}))
+
+type TagProps = {
+  onPress?: () => void
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+  styles?: StylesProp<{ root: ViewStyle; text: TextStyle }>
+}
+
+export const Tag = (props: TagProps) => {
+  const { onPress, children, style, styles: stylesProp } = props
+  const styles = useStyles()
+
+  return (
+    <Pressable onPress={onPress} style={[style, stylesProp?.root]}>
+      <Text style={[styles.root, stylesProp?.text]} variant='label'>
+        {children}
+      </Text>
+    </Pressable>
+  )
+}

packages/mobile/src/components/core/index.ts

@@ -24,3 +24,4 @@ export * from './ScrollView'
 export * from './FlatList'
 export * from './Divider'
 export * from './AudioText'
+export * from './Tag'

packages/mobile/src/components/header/Header.tsx

@@ -1,13 +1,16 @@
 import type { ReactChild } from 'react'
 
+import type { TextStyle, ViewStyle } from 'react-native'
 import { View } from 'react-native'
 
 import { GradientText } from 'app/components/core'
+import type { StylesProp } from 'app/styles'
 import { makeStyles } from 'app/styles'
 
 type ScreenHeaderProps = {
   children?: ReactChild
   text: string
+  styles?: StylesProp<{ root: ViewStyle; header: TextStyle }>
 }
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
@@ -32,12 +35,16 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
   }
 }))
 
-export const Header = ({ children, text }: ScreenHeaderProps) => {
+export const Header = (props: ScreenHeaderProps) => {
+  const { children, text, styles: stylesProp } = props
   const styles = useStyles()
 
   return (
-    <View style={styles.root}>
-      <GradientText accessibilityRole='header' style={styles.header}>
+    <View style={[styles.root, stylesProp?.root]}>
+      <GradientText
+        accessibilityRole='header'
+        style={[styles.header, stylesProp?.header]}
+      >
         {text}
       </GradientText>
       {children}

packages/mobile/src/screens/search-results-screen/TagSearchScreen.tsx

@@ -4,12 +4,13 @@ import { useIsFocused } from '@react-navigation/native'
 
 import IconNote from 'app/assets/images/iconNote.svg'
 import IconUser from 'app/assets/images/iconUser.svg'
-import { Screen } from 'app/components/core'
+import { Screen, Tag } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { TabNavigator, tabScreen } from 'app/components/top-tab-bar'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useRoute } from 'app/hooks/useRoute'
 import { MessageType } from 'app/message'
+import { makeStyles } from 'app/styles'
 
 import { SearchFocusContext } from './SearchFocusContext'
 import { ProfilesTab } from './tabs/ProfilesTab'
@@ -19,11 +20,22 @@ const messages = {
   header: 'Tag Search'
 }
 
+const useStyles = makeStyles(({ spacing }) => ({
+  headerRoot: {
+    justifyContent: undefined,
+    alignItems: 'center'
+  },
+  tag: {
+    marginLeft: spacing(4)
+  }
+}))
+
 /**
  * Displays tag search results. Uses the same state as normal full search,
  * but only displays matching tracks & profiles.
  */
 export const TagSearchScreen = () => {
+  const styles = useStyles()
   const isFocused = useIsFocused()
   const focusContext = useMemo(() => ({ isFocused }), [isFocused])
   const dispatchWeb = useDispatchWeb()
@@ -51,7 +63,9 @@ export const TagSearchScreen = () => {
 
   return (
     <Screen topbarRight={null}>
-      <Header text={messages.header} />
+      <Header text={messages.header} styles={{ root: styles.headerRoot }}>
+        <Tag style={styles.tag}>{query.replace(/^#/, '')}</Tag>
+      </Header>
       <SearchFocusContext.Provider value={focusContext}>
         <TabNavigator initialScreenName='Tracks'>
           {tracksScreen}

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -36,11 +36,11 @@ import {
   REPOSTING_USERS_ROUTE
 } from 'audius-client/src/utils/route'
 import { open as openOverflowMenu } from 'common/store/ui/mobile-overflow-menu/slice'
-import { Image, Pressable, View } from 'react-native'
+import { Image, View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import IconHidden from 'app/assets/images/iconHidden.svg'
-import { Text } from 'app/components/core'
+import { Tag, Text } from 'app/components/core'
 import { DetailsTile } from 'app/components/details-tile'
 import type { DetailsTileDetail } from 'app/components/details-tile/types'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
@@ -91,17 +91,6 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     paddingVertical: spacing(4)
   },
 
-  tag: {
-    margin: spacing(1),
-    borderRadius: 2,
-    backgroundColor: palette.neutralLight4,
-    paddingVertical: spacing(1),
-    paddingHorizontal: spacing(2),
-    color: palette.white,
-    textTransform: 'uppercase',
-    overflow: 'hidden'
-  },
-
   moodEmoji: {
     marginLeft: spacing(1),
     width: 20,
@@ -331,11 +320,9 @@ export const TrackScreenDetailsTile = ({
     return filteredTags.length > 0 ? (
       <View style={styles.tags}>
         {filteredTags.map((tag) => (
-          <Pressable key={tag} onPress={() => handlePressTag(tag)}>
-            <Text style={styles.tag} variant='label'>
-              {tag}
-            </Text>
-          </Pressable>
+          <Tag key={tag} onPress={() => handlePressTag(tag)}>
+            {tag}
+          </Tag>
         ))}
       </View>
     ) : null