Wrap all <Text> in a helper that ensures black color is applied by default

src/view/com/util/DropdownBtn.tsx

@@ -3,7 +3,6 @@ import {
   Share,
   StyleProp,
   StyleSheet,
-  Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
@@ -12,6 +11,7 @@ import {
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import RootSiblings from 'react-native-root-siblings'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 import {toShareUrl} from '../../../lib/strings'
 import {useStores} from '../../../state'

src/view/com/util/EmptyState.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {UserGroupIcon} from '../../lib/icons'
 import {colors} from '../../lib/styles'
 

src/view/com/util/ErrorMessage.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   StyleSheet,
-  Text,
   TouchableOpacity,
   StyleProp,
   View,
@@ -9,6 +8,7 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import LinearGradient from 'react-native-linear-gradient'
+import {Text} from './Text'
 import {colors, gradients} from '../../lib/styles'
 
 export function ErrorMessage({

src/view/com/util/ErrorScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 export function ErrorScreen({

src/view/com/util/Link.tsx

@@ -3,13 +3,13 @@ import {observer} from 'mobx-react-lite'
 import {
   Linking,
   StyleProp,
-  Text,
   TouchableWithoutFeedback,
   TouchableOpacity,
   TextStyle,
   View,
   ViewStyle,
 } from 'react-native'
+import {Text} from './Text'
 import {useStores, RootStoreModel} from '../../../state'
 import {convertBskyAppUrlIfNeeded} from '../../../lib/strings'
 

src/view/com/util/Picker.tsx

@@ -2,7 +2,6 @@ import React, {useRef} from 'react'
 import {
   StyleProp,
   StyleSheet,
-  Text,
   TextStyle,
   TouchableOpacity,
   TouchableWithoutFeedback,
@@ -14,6 +13,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import RootSiblings from 'react-native-root-siblings'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 interface PickerItem {

src/view/com/util/PostCtrls.tsx

@@ -1,14 +1,8 @@
 import React from 'react'
-import {
-  Animated,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  Vibration,
-} from 'react-native'
+import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
+import {Text} from './Text'
 import {UpIcon, UpIconSolid} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'

src/view/com/util/PostEmbeds.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
-import {
-  ImageStyle,
-  StyleSheet,
-  StyleProp,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native'
+import {ImageStyle, StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
 import * as AppBskyEmbedImages from '../../../third-party/api/src/client/types/app/bsky/embed/images'
 import * as AppBskyEmbedExternal from '../../../third-party/api/src/client/types/app/bsky/embed/external'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {colors} from '../../lib/styles'
 import {AutoSizedImage} from './images/AutoSizedImage'
 import {ImagesLightbox} from '../../../state/models/shell-ui'
@@ -152,16 +146,16 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     padding: 10,
   },
-  extImage: {
-    // TODO
-  },
+  extImage: {},
   extTitle: {
     fontSize: 16,
     fontWeight: 'bold',
+    color: colors.black,
   },
   extDescription: {
     marginTop: 4,
     fontSize: 15,
+    color: colors.black,
   },
   extUrl: {
     color: colors.gray4,

src/view/com/util/PostMeta.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'
+import {Text} from '../util/Text'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import {s} from '../../lib/styles'
 import {ago} from '../../../lib/strings'

src/view/com/util/RichText.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {Text, TextStyle, StyleProp} from 'react-native'
+import {TextStyle, StyleProp} from 'react-native'
 import {TextLink} from './Link'
+import {Text} from './Text'
 import {s} from '../../lib/styles'
 import {toShortUrl} from '../../../lib/strings'
 

src/view/com/util/Selector.tsx

@@ -2,10 +2,10 @@ import React, {createRef, useState, useMemo} from 'react'
 import {
   Animated,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {Text} from './Text'
 import {colors} from '../../lib/styles'
 
 interface Layout {
@@ -122,6 +122,7 @@ const styles = StyleSheet.create({
   labelSelected: {
     fontWeight: '600',
     fontSize: 16,
+    color: colors.black,
   },
   underline: {
     position: 'absolute',

src/view/com/util/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Text as RNText, TextProps} from 'react-native'
+import {s} from '../../lib/styles'
+
+export function Text({
+  children,
+  style,
+  ...props
+}: React.PropsWithChildren<TextProps>) {
+  return (
+    <RNText style={[s.black, style]} {...props}>
+      {children}
+    </RNText>
+  )
+}

src/view/com/util/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
+import {Alert, Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {

src/view/com/util/UserInfoText.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useEffect} from 'react'
 import * as GetProfile from '../../../third-party/api/src/client/types/app/bsky/actor/getProfile'
-import {StyleProp, Text, TextStyle} from 'react-native'
+import {StyleProp, TextStyle} from 'react-native'
 import {Link} from './Link'
+import {Text} from './Text'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
 import {useStores} from '../../../state'
 

src/view/com/util/ViewHeader.tsx

@@ -3,12 +3,12 @@ import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserAvatar} from './UserAvatar'
+import {Text} from './Text'
 import {s, colors} from '../../lib/styles'
 import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Text} from '../Text'
 import {colors} from '../../../lib/styles'
 
 export function RadioButton({

src/view/com/util/images/AutoSizedImage.tsx

@@ -5,11 +5,11 @@ import {
   LayoutChangeEvent,
   StyleProp,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View,
   ViewStyle,
 } from 'react-native'
+import {Text} from '../Text'
 import {colors} from '../../../lib/styles'
 
 const MAX_HEIGHT = 300