@react-navigation/bottom-tabs 7.0.0-alpha.0 → 7.0.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,21 +36,21 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.3.9-alpha.0",
+    "@react-navigation/elements": "^1.4.0-alpha.1",
     "color": "^4.2.3"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.0",
+    "@react-navigation/native": "^7.0.0-alpha.2",
     "@testing-library/react-native": "^11.5.0",
     "@types/color": "^3.0.3",
-    "@types/react": "~18.0.26",
+    "@types/react": "~18.0.27",
     "@types/react-native": "~0.70.8",
     "del-cli": "^5.0.0",
-    "react": "18.1.0",
-    "react-native": "0.70.5",
-    "react-native-builder-bob": "^0.20.3",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.20.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {
@@ -74,5 +74,5 @@
       ]
     ]
   },
-  "gitHead": "ad722b882e0c40b1d1bc025d70112ddb126f265e"
+  "gitHead": "36c8f091556157dab74d3483651bbcbd340762ff"
 }

package/src/index.tsx

@@ -1,20 +1,20 @@
 /**
  * Navigators
  */
-export { default as createBottomTabNavigator } from './navigators/createBottomTabNavigator';
+export { createBottomTabNavigator } from './navigators/createBottomTabNavigator';
 
 /**
  * Views
  */
-export { default as BottomTabBar } from './views/BottomTabBar';
-export { default as BottomTabView } from './views/BottomTabView';
+export { BottomTabBar } from './views/BottomTabBar';
+export { BottomTabView } from './views/BottomTabView';
 
 /**
  * Utilities
  */
-export { default as BottomTabBarHeightCallbackContext } from './utils/BottomTabBarHeightCallbackContext';
-export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
-export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+export { BottomTabBarHeightCallbackContext } from './utils/BottomTabBarHeightCallbackContext';
+export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+export { useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
 
 /**
  * Types

package/src/navigators/createBottomTabNavigator.tsx

@@ -15,7 +15,7 @@ import type {
   BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
 } from '../types';
-import BottomTabView from '../views/BottomTabView';
+import { BottomTabView } from '../views/BottomTabView';
 
 type Props = DefaultNavigatorOptions<
   ParamListBase,
@@ -65,7 +65,7 @@ function BottomTabNavigator({
   );
 }
 
-export default createNavigatorFactory<
+export const createBottomTabNavigator = createNavigatorFactory<
   TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,

package/src/utils/BottomTabBarHeightCallbackContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-export default React.createContext<((height: number) => void) | undefined>(
-  undefined
-);
+export const BottomTabBarHeightCallbackContext = React.createContext<
+  ((height: number) => void) | undefined
+>(undefined);

package/src/utils/BottomTabBarHeightContext.tsx

@@ -1,3 +1,5 @@
 import * as React from 'react';
 
-export default React.createContext<number | undefined>(undefined);
+export const BottomTabBarHeightContext = React.createContext<
+  number | undefined
+>(undefined);

package/src/utils/useBottomTabBarHeight.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+import { BottomTabBarHeightContext } from './BottomTabBarHeightContext';
 
-export default function useBottomTabBarHeight() {
+export function useBottomTabBarHeight() {
   const height = React.useContext(BottomTabBarHeightContext);
 
   if (height === undefined) {

package/src/utils/useIsKeyboardShown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { EmitterSubscription, Keyboard, Platform } from 'react-native';
 
-export default function useIsKeyboardShown() {
+export function useIsKeyboardShown() {
   const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
 
   React.useEffect(() => {

package/src/views/Badge.tsx

@@ -22,7 +22,7 @@ type Props = {
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
-export default function Badge({
+export function Badge({
   children,
   style,
   visible = true,
@@ -32,7 +32,7 @@ export default function Badge({
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
   const [rendered, setRendered] = React.useState(visible);
 
-  const theme = useTheme();
+  const { colors, fonts } = useTheme();
 
   React.useEffect(() => {
     if (!rendered) {
@@ -61,7 +61,7 @@ export default function Badge({
   }
 
   // @ts-expect-error: backgroundColor definitely exists
-  const { backgroundColor = theme.colors.notification, ...restStyle } =
+  const { backgroundColor = colors.notification, ...restStyle } =
     StyleSheet.flatten(style) || {};
   const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
 
@@ -90,6 +90,7 @@ export default function Badge({
           fontSize,
           borderRadius,
         },
+        fonts.regular,
         styles.container,
         restStyle,
       ]}

package/src/views/BottomTabBar.tsx

@@ -21,9 +21,9 @@ import {
 import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
-import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
-import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import BottomTabItem from './BottomTabItem';
+import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
+import { useIsKeyboardShown } from '../utils/useIsKeyboardShown';
+import { BottomTabItem } from './BottomTabItem';
 
 type Props = BottomTabBarProps & {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -125,7 +125,7 @@ export const getTabBarHeight = ({
   return DEFAULT_TABBAR_HEIGHT + paddingBottom;
 };
 
-export default function BottomTabBar({
+export function BottomTabBar({
   state,
   navigation,
   descriptors,

package/src/views/BottomTabItem.tsx

@@ -17,7 +17,7 @@ import type {
   BottomTabDescriptor,
   LabelPosition,
 } from '../types';
-import TabBarIcon from './TabBarIcon';
+import { TabBarIcon } from './TabBarIcon';
 
 type Props = {
   /**
@@ -128,7 +128,7 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-export default function BottomTabItem({
+export function BottomTabItem({
   route,
   href,
   focused,
@@ -195,7 +195,7 @@ export default function BottomTabItem({
   iconStyle,
   style,
 }: Props) {
-  const { colors } = useTheme();
+  const { colors, fonts } = useTheme();
 
   const activeTintColor =
     customActiveTintColor === undefined
@@ -219,8 +219,9 @@ export default function BottomTabItem({
         <Text
           numberOfLines={1}
           style={[
-            styles.label,
             { color },
+            fonts.regular,
+            styles.label,
             horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}

package/src/views/BottomTabView.tsx

@@ -20,9 +20,9 @@ import type {
   BottomTabNavigationHelpers,
   BottomTabNavigationProp,
 } from '../types';
-import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
-import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
-import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import { BottomTabBarHeightCallbackContext } from '../utils/BottomTabBarHeightCallbackContext';
+import { BottomTabBarHeightContext } from '../utils/BottomTabBarHeightContext';
+import { BottomTabBar, getTabBarHeight } from './BottomTabBar';
 import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
 
 type Props = BottomTabNavigationConfig & {
@@ -31,7 +31,7 @@ type Props = BottomTabNavigationConfig & {
   descriptors: BottomTabDescriptorMap;
 };
 
-export default function BottomTabView(props: Props) {
+export function BottomTabView(props: Props) {
   const {
     tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
     state,

package/src/views/TabBarIcon.tsx

@@ -8,7 +8,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import Badge from './Badge';
+import { Badge } from './Badge';
 
 type Props = {
   route: Route<string>;
@@ -27,7 +27,7 @@ type Props = {
   style: StyleProp<ViewStyle>;
 };
 
-export default function TabBarIcon({
+export function TabBarIcon({
   route: _,
   horizontal,
   badge,