fix: show a missing icon symbol instead of empty area in bottom tab bar

example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -17,6 +17,7 @@ import {
   useTheme,
   useLinkBuilder,
 } from '@react-navigation/native';
+import { MissingIcon } from '@react-navigation/elements';
 import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
@@ -348,7 +349,12 @@ export default function BottomTabBar({
                     options.tabBarInactiveBackgroundColor
                   }
                   button={options.tabBarButton}
-                  icon={options.tabBarIcon}
+                  icon={
+                    options.tabBarIcon ??
+                    (({ color, size }) => (
+                      <MissingIcon color={color} size={size} />
+                    ))
+                  }
                   badge={options.tabBarBadge}
                   badgeStyle={options.tabBarBadgeStyle}
                   label={label}

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -37,7 +37,7 @@ type Props = {
   /**
    * Icon to display for the tab.
    */
-  icon?: (props: {
+  icon: (props: {
     focused: boolean;
     size: number;
     color: string;

packages/elements/src/MissingIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Text, TextStyle, StyleProp, StyleSheet } from 'react-native';
+
+type Props = {
+  color?: string;
+  size?: number;
+  style?: StyleProp<TextStyle>;
+};
+
+export default function MissingIcon({ color, size, style }: Props) {
+  return <Text style={[styles.icon, { color, fontSize: size }, style]}>⏷</Text>;
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});

packages/elements/src/index.tsx

@@ -9,6 +9,7 @@ export { default as useHeaderHeight } from './Header/useHeaderHeight';
 export { default as getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 export { default as getHeaderTitle } from './Header/getHeaderTitle';
 
+export { default as MissingIcon } from './MissingIcon';
 export { default as PlatformPressable } from './PlatformPressable';
 export { default as ResourceSavingScene } from './ResourceSavingScene';
 export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';