Pretty up code. Add all my default stuff that I like

components/ui/IconSymbol.ios.tsx

@@ -1,7 +1,7 @@
 import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
 import { StyleProp, ViewStyle } from 'react-native';
 
-export function IconSymbol({
+export const IconSymbol = ({
   name,
   size = 24,
   color,
@@ -13,7 +13,7 @@ export function IconSymbol({
   color: string;
   style?: StyleProp<ViewStyle>;
   weight?: SymbolWeight;
-}) {
+}) => {
   return (
     <SymbolView
       weight={weight}
@@ -29,4 +29,4 @@ export function IconSymbol({
       ]}
     />
   );
-}
+};

components/ui/IconSymbol.tsx

@@ -3,7 +3,7 @@
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { SymbolWeight } from 'expo-symbols';
 import React from 'react';
-import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
+import { OpaqueColorValue, StyleProp, TextStyle } from 'react-native';
 
 // Add your SFSymbol to MaterialIcons mappings here.
 const MAPPING = {
@@ -27,7 +27,7 @@ export type IconSymbolName = keyof typeof MAPPING;
  *
  * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
  */
-export function IconSymbol({
+export const IconSymbol = ({
   name,
   size = 24,
   color,
@@ -36,8 +36,8 @@ export function IconSymbol({
   name: IconSymbolName;
   size?: number;
   color: string | OpaqueColorValue;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
   weight?: SymbolWeight;
-}) {
+}) => {
   return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-}
+};

components/ui/TabBarBackground.ios.tsx

@@ -3,7 +3,7 @@ import { BlurView } from 'expo-blur';
 import { StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export default function BlurTabBarBackground() {
+const BlurTabBarBackground = () => {
   return (
     <BlurView
       // System chrome material automatically adapts to the system's theme
@@ -13,10 +13,11 @@ export default function BlurTabBarBackground() {
       style={StyleSheet.absoluteFill}
     />
   );
-}
+};
+export default BlurTabBarBackground;
 
-export function useBottomTabOverflow() {
+export const useBottomTabOverflow = () => {
   const tabHeight = useBottomTabBarHeight();
   const { bottom } = useSafeAreaInsets();
   return tabHeight - bottom;
-}
+};

components/ui/TabBarBackground.tsx

@@ -1,6 +1,5 @@
 // This is a shim for web and Android where the tab bar is generally opaque.
 export default undefined;
-
-export function useBottomTabOverflow() {
+export const useBottomTabOverflow = () => {
   return 0;
-}
+};