Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-navigation/bottom-tabs

Package Overview
Dependencies
Maintainers
6
Versions
260
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-navigation/bottom-tabs - npm Package Compare versions

Comparing version 7.0.0-alpha.8 to 7.0.0-alpha.9

11

lib/commonjs/views/BottomTabBar.js

@@ -119,3 +119,3 @@ "use strict";

tabBarInactiveTintColor,
tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' ? (0, _color.default)(tabBarActiveTintColor ?? colors.primary).alpha(0.12).rgb().string() : undefined,
tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' && tabBarPosition !== 'top' ? (0, _color.default)(tabBarActiveTintColor ?? colors.primary).alpha(0.12).rgb().string() : undefined,
tabBarInactiveBackgroundColor

@@ -204,2 +204,3 @@ } = focusedOptions;

const tabBarBackgroundElement = tabBarBackground?.();
const tabBarIsHorizontal = tabBarPosition === 'bottom' || tabBarPosition === 'top';
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {

@@ -209,3 +210,3 @@ style: [tabBarPosition === 'left' ? styles.left : tabBarPosition === 'right' ? styles.right : styles.bottom, {

borderColor: colors.border
}, tabBarPosition === 'bottom' ? [{
}, tabBarIsHorizontal ? [{
transform: [{

@@ -232,3 +233,3 @@ translateY: visible.interpolate({

pointerEvents: isTabBarHidden ? 'none' : 'auto',
onLayout: tabBarPosition === 'bottom' ? handleLayout : undefined
onLayout: tabBarIsHorizontal ? handleLayout : undefined
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {

@@ -239,3 +240,3 @@ pointerEvents: "none",

accessibilityRole: "tablist",
style: tabBarPosition === 'bottom' ? styles.bottomContent : styles.sideContent
style: tabBarIsHorizontal ? styles.bottomContent : styles.sideContent
}, routes.map((route, index) => {

@@ -307,3 +308,3 @@ const focused = index === state.index;

iconStyle: options.tabBarIconStyle,
style: [tabBarPosition === 'bottom' ? styles.bottomItem : [styles.sideItem, hasHorizontalLabels ? {
style: [tabBarIsHorizontal ? styles.bottomItem : [styles.sideItem, hasHorizontalLabels ? {
justifyContent: 'flex-start'

@@ -310,0 +311,0 @@ } : null], options.tabBarItemStyle]

8

lib/commonjs/views/BottomTabView.js

@@ -120,3 +120,5 @@ "use strict";

style: tabBarPosition === 'left' ? styles.left : tabBarPosition === 'right' ? styles.right : null
}, /*#__PURE__*/React.createElement(_ScreenFallback.MaybeScreenContainer, {
}, tabBarPosition === 'top' ? /*#__PURE__*/React.createElement(_BottomTabBarHeightCallbackContext.BottomTabBarHeightCallbackContext.Provider, {
value: setTabBarHeight
}, renderTabBar()) : null, /*#__PURE__*/React.createElement(_ScreenFallback.MaybeScreenContainer, {
enabled: detachInactiveScreens,

@@ -198,5 +200,5 @@ hasTwoStates: hasTwoStates,

}, descriptor.render())));
})), /*#__PURE__*/React.createElement(_BottomTabBarHeightCallbackContext.BottomTabBarHeightCallbackContext.Provider, {
})), tabBarPosition !== 'top' ? /*#__PURE__*/React.createElement(_BottomTabBarHeightCallbackContext.BottomTabBarHeightCallbackContext.Provider, {
value: setTabBarHeight
}, renderTabBar()));
}, renderTabBar()) : null);
}

@@ -203,0 +205,0 @@ const styles = _reactNative.StyleSheet.create({

11

lib/module/views/BottomTabBar.js

@@ -110,3 +110,3 @@ import { getDefaultSidebarWidth, getLabel, MissingIcon } from '@react-navigation/elements';

tabBarInactiveTintColor,
tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' ? Color(tabBarActiveTintColor ?? colors.primary).alpha(0.12).rgb().string() : undefined,
tabBarActiveBackgroundColor = tabBarPosition !== 'bottom' && tabBarPosition !== 'top' ? Color(tabBarActiveTintColor ?? colors.primary).alpha(0.12).rgb().string() : undefined,
tabBarInactiveBackgroundColor

@@ -195,2 +195,3 @@ } = focusedOptions;

const tabBarBackgroundElement = tabBarBackground?.();
const tabBarIsHorizontal = tabBarPosition === 'bottom' || tabBarPosition === 'top';
return /*#__PURE__*/React.createElement(Animated.View, {

@@ -200,3 +201,3 @@ style: [tabBarPosition === 'left' ? styles.left : tabBarPosition === 'right' ? styles.right : styles.bottom, {

borderColor: colors.border
}, tabBarPosition === 'bottom' ? [{
}, tabBarIsHorizontal ? [{
transform: [{

@@ -223,3 +224,3 @@ translateY: visible.interpolate({

pointerEvents: isTabBarHidden ? 'none' : 'auto',
onLayout: tabBarPosition === 'bottom' ? handleLayout : undefined
onLayout: tabBarIsHorizontal ? handleLayout : undefined
}, /*#__PURE__*/React.createElement(View, {

@@ -230,3 +231,3 @@ pointerEvents: "none",

accessibilityRole: "tablist",
style: tabBarPosition === 'bottom' ? styles.bottomContent : styles.sideContent
style: tabBarIsHorizontal ? styles.bottomContent : styles.sideContent
}, routes.map((route, index) => {

@@ -298,3 +299,3 @@ const focused = index === state.index;

iconStyle: options.tabBarIconStyle,
style: [tabBarPosition === 'bottom' ? styles.bottomItem : [styles.sideItem, hasHorizontalLabels ? {
style: [tabBarIsHorizontal ? styles.bottomItem : [styles.sideItem, hasHorizontalLabels ? {
justifyContent: 'flex-start'

@@ -301,0 +302,0 @@ } : null], options.tabBarItemStyle]

8

lib/module/views/BottomTabView.js

@@ -112,3 +112,5 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

style: tabBarPosition === 'left' ? styles.left : tabBarPosition === 'right' ? styles.right : null
}, /*#__PURE__*/React.createElement(MaybeScreenContainer, {
}, tabBarPosition === 'top' ? /*#__PURE__*/React.createElement(BottomTabBarHeightCallbackContext.Provider, {
value: setTabBarHeight
}, renderTabBar()) : null, /*#__PURE__*/React.createElement(MaybeScreenContainer, {
enabled: detachInactiveScreens,

@@ -190,5 +192,5 @@ hasTwoStates: hasTwoStates,

}, descriptor.render())));
})), /*#__PURE__*/React.createElement(BottomTabBarHeightCallbackContext.Provider, {
})), tabBarPosition !== 'top' ? /*#__PURE__*/React.createElement(BottomTabBarHeightCallbackContext.Provider, {
value: setTabBarHeight
}, renderTabBar()));
}, renderTabBar()) : null);
}

@@ -195,0 +197,0 @@ const styles = StyleSheet.create({

2

lib/typescript/src/types.d.ts

@@ -160,3 +160,3 @@ import type { HeaderOptions, PlatformPressable } from '@react-navigation/elements';

*/
tabBarPosition?: 'bottom' | 'left' | 'right';
tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
/**

@@ -163,0 +163,0 @@ * Whether this screens should render the first time it's accessed. Defaults to `true`.

32

package.json
{
"name": "@react-navigation/bottom-tabs",
"description": "Bottom tab navigator following iOS design guidelines",
"version": "7.0.0-alpha.8",
"version": "7.0.0-alpha.9",
"keywords": [

@@ -39,24 +39,24 @@ "react-native-component",

"dependencies": {
"@react-navigation/elements": "^2.0.0-alpha.5",
"@react-navigation/elements": "^2.0.0-alpha.6",
"color": "^4.2.3"
},
"devDependencies": {
"@react-navigation/native": "^7.0.0-alpha.7",
"@testing-library/react-native": "^12.3.1",
"@types/color": "^3.0.5",
"@types/react": "~18.2.33",
"@react-navigation/native": "^7.0.0-alpha.8",
"@testing-library/react-native": "^12.4.3",
"@types/color": "^3.0.6",
"@types/react": "~18.2.45",
"del-cli": "^5.1.0",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-builder-bob": "^0.23.1",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"typescript": "^5.2.2"
"react-native": "0.73.2",
"react-native-builder-bob": "^0.23.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"typescript": "^5.3.3"
},
"peerDependencies": {
"@react-navigation/native": "^7.0.0-alpha.7",
"@react-navigation/native": "^7.0.0-alpha.8",
"react": "*",
"react-native": "0.72.6",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0"
"react-native": "0.73.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0"
},

@@ -77,3 +77,3 @@ "react-native-builder-bob": {

},
"gitHead": "d0e6a2cd79d2c6aff0cf54e46e31edc407c3c46b"
"gitHead": "e4e445810a3a958c35cc34486b5499baa595500e"
}
lib/commonjs/views/BottomTabBar.js.map

Sorry, the diff of this file is not supported yet

lib/commonjs/views/BottomTabView.js.map

Sorry, the diff of this file is not supported yet

lib/module/views/BottomTabBar.js.map

Sorry, the diff of this file is not supported yet

lib/module/views/BottomTabView.js.map

Sorry, the diff of this file is not supported yet

lib/typescript/src/types.d.ts.map

Sorry, the diff of this file is not supported yet

lib/typescript/src/views/BottomTabView.d.ts.map

Sorry, the diff of this file is not supported yet

src/types.tsx

Sorry, the diff of this file is not supported yet

src/views/BottomTabBar.tsx

Sorry, the diff of this file is not supported yet

src/views/BottomTabView.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc