callstack · lukewalczak · May 15, 2025 · May 9, 2025 · May 12, 2025 · May 12, 2025
diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
@@ -7,7 +7,7 @@ import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
   return (
-    <ScreenWrapper contentContainerStyle={styles.v3Container}>
+    <ScreenWrapper contentContainerStyle={styles.container}>
       <List.Section title="Default">
         <View style={styles.row}>
           <IconButton icon="camera" size={24} onPress={() => {}} />
@@ -175,7 +175,7 @@ const ButtonExample = () => {
 ButtonExample.title = 'Icon Button';
 
 const styles = StyleSheet.create({
-  v3Container: {
+  container: {
     flexDirection: 'column',
   },
   row: {

diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
@@ -69,7 +69,7 @@ const MenuExample = ({ navigation }: Props) => {
         >
           <Menu.Item onPress={() => {}} title="Undo" />
           <Menu.Item onPress={() => {}} title="Redo" />
-          <Divider style={styles.md3Divider} />
+          <Divider style={styles.divider} />
           <Menu.Item onPress={() => {}} title="Cut" disabled />
           <Menu.Item onPress={() => {}} title="Copy" disabled />
           <Menu.Item onPress={() => {}} title="Paste" />
@@ -93,7 +93,7 @@ const MenuExample = ({ navigation }: Props) => {
               <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
               <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
 
-              <Divider style={styles.md3Divider} />
+              <Divider style={styles.divider} />
 
               <Menu.Item
                 leadingIcon="content-cut"
@@ -126,7 +126,7 @@ const MenuExample = ({ navigation }: Props) => {
           >
             <Menu.Item onPress={() => {}} title="Item 1" />
             <Menu.Item onPress={() => {}} title="Item 2" />
-            <Divider style={styles.md3Divider} />
+            <Divider style={styles.divider} />
             <Menu.Item onPress={() => {}} title="Item 3" disabled />
           </Menu>
           <List.Section style={styles.list} title="Contextual menu">
@@ -190,7 +190,7 @@ const styles = StyleSheet.create({
   alignCenter: {
     alignItems: 'center',
   },
-  md3Divider: {
+  divider: {
     marginVertical: 8,
   },
   bottomMenu: { width: '40%' },

diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
@@ -217,7 +217,7 @@ const Appbar = ({
     shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
   }
 
-  const spacingStyle = styles.v3Spacing;
+  const spacingStyle = styles.spacing;
 
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
@@ -321,7 +321,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 4,
   },
-  v3Spacing: {
+  spacing: {
     width: 52,
   },
   controlsRow: {

diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -119,10 +119,10 @@ const AppbarContent = ({
   const titleTextColor = titleColor ? titleColor : onSurface;
 
   const modeContainerStyles = {
-    small: styles.v3DefaultContainer,
-    medium: styles.v3MediumContainer,
-    large: styles.v3LargeContainer,
-    'center-aligned': styles.v3DefaultContainer,
+    small: styles.defaultContainer,
+    medium: styles.mediumContainer,
+    large: styles.largeContainer,
+    'center-aligned': styles.defaultContainer,
   };
 
   const variant = modeTextVariant[mode] as TypescaleKey;
@@ -197,15 +197,15 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 12,
   },
-  v3DefaultContainer: {
+  defaultContainer: {
     paddingHorizontal: 0,
   },
-  v3MediumContainer: {
+  mediumContainer: {
     paddingHorizontal: 0,
     justifyContent: 'flex-end',
     paddingBottom: 24,
   },
-  v3LargeContainer: {
+  largeContainer: {
     paddingHorizontal: 0,
     paddingTop: 36,
     justifyContent: 'flex-end',

diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
@@ -161,7 +161,7 @@ export const renderAppbarContent = ({
       if (child.type.displayName === 'Appbar.Content') {
         props.mode = mode;
         props.style = [
-          i === 0 && !shouldCenterContent && styles.v3Spacing,
+          i === 0 && !shouldCenterContent && styles.spacing,
           shouldCenterContent && styles.centerAlignedContent,
           child.props.style,
         ];
@@ -175,10 +175,7 @@ const styles = StyleSheet.create({
   centerAlignedContent: {
     alignItems: 'center',
   },
-  v2Spacing: {
-    marginLeft: 8,
-  },
-  v3Spacing: {
+  spacing: {
     marginLeft: 12,
   },
 });
diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -568,12 +568,15 @@ const BottomNavigationBar = <Route extends BaseRoute>({
               outputRange: [1, 0],
             });
 
-            const v3ActiveOpacity = focused ? 1 : 0;
-            const v3InactiveOpacity = shifting
-              ? inactiveOpacity
-              : focused
-              ? 0
-              : 1;
+            const getActiveOpacity = () => {
+              if (shiftingAndLabeled) return activeOpacity;
+              return focused ? 1 : 0;
+            };
+
+            const getInactiveOpacity = () => {
+              if (shiftingAndLabeled) return inactiveOpacity;
+              return focused ? 0 : 1;
+            };
 
             // Scale horizontally the outline pill
             const outlineScale = focused
@@ -607,7 +610,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                   : 0,
             };
 
-            const isLegacyOrV3Shifting = shifting && labeled;
+            const shiftingAndLabeled = shifting && labeled;
 
             return renderTouchable({
               key: route.key,
@@ -627,14 +630,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                   pointerEvents="none"
                   style={
                     labeled
-                      ? styles.v3TouchableContainer
-                      : styles.v3NoLabelContainer
+                      ? styles.touchableContainer
+                      : styles.noLabelContainer
                   }
                 >
                   <Animated.View
                     style={[
                       styles.iconContainer,
-                      isLegacyOrV3Shifting && {
+                      shiftingAndLabeled && {
                         transform: [{ translateY }],
                       },
                     ]}
@@ -659,9 +662,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                       style={[
                         styles.iconWrapper,
                         {
-                          opacity: isLegacyOrV3Shifting
-                            ? activeOpacity
-                            : v3ActiveOpacity,
+                          opacity: getActiveOpacity(),
                         },
                       ]}
                     >
@@ -683,9 +684,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                       style={[
                         styles.iconWrapper,
                         {
-                          opacity: isLegacyOrV3Shifting
-                            ? inactiveOpacity
-                            : v3InactiveOpacity,
+                          opacity: getInactiveOpacity(),
                         },
                       ]}
                     >
@@ -723,9 +722,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                         style={[
                           styles.labelWrapper,
                           {
-                            opacity: isLegacyOrV3Shifting
-                              ? activeOpacity
-                              : v3ActiveOpacity,
+                            opacity: getActiveOpacity(),
                           },
                         ]}
                       >
@@ -756,9 +753,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                           style={[
                             styles.labelWrapper,
                             {
-                              opacity: isLegacyOrV3Shifting
-                                ? inactiveOpacity
-                                : v3InactiveOpacity,
+                              opacity: getInactiveOpacity(),
                             },
                           ]}
                         >
@@ -862,11 +857,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
   },
-  v3TouchableContainer: {
+  touchableContainer: {
     paddingTop: 12,
     paddingBottom: 16,
   },
-  v3NoLabelContainer: {
+  noLabelContainer: {
     height: 80,
     justifyContent: 'center',
     alignItems: 'center',

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -322,16 +322,15 @@ const Button = (
   const iconStyle =
     StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
       ? [
-          styles.iconReverse,
-          styles[`md3IconReverse${compact ? 'Compact' : ''}`],
+          styles.iconReverseBase,
+          styles[`iconReverse${compact ? 'Compact' : ''}`],
           isMode('text') &&
-            styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`],
+            styles[`iconReverseTextMode${compact ? 'Compact' : ''}`],
         ]
       : [
-          styles.icon,
-          styles[`md3Icon${compact ? 'Compact' : ''}`],
-          isMode('text') &&
-            styles[`md3IconTextMode${compact ? 'Compact' : ''}`],
+          styles.iconBase,
+          styles[`icon${compact ? 'Compact' : ''}`],
+          isMode('text') && styles[`iconTextMode${compact ? 'Compact' : ''}`],
         ];
 
   return (
@@ -401,12 +400,12 @@ const Button = (
             numberOfLines={1}
             testID={`${testID}-text`}
             style={[
-              styles.label,
+              styles.labelBase,
               isMode('text')
                 ? icon || loading
-                  ? styles.md3LabelTextAddons
-                  : styles.md3LabelText
-                : styles.md3Label,
+                  ? styles.labelTextAddons
+                  : styles.labelText
+                : styles.label,
               compact && styles.compactLabel,
               uppercase && styles.uppercaseLabel,
               textStyle,
@@ -435,49 +434,49 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
+  iconBase: {
     marginLeft: 12,
     marginRight: -4,
   },
-  iconReverse: {
+  iconReverseBase: {
     marginRight: 12,
     marginLeft: -4,
   },
   /* eslint-disable react-native/no-unused-styles */
-  md3Icon: {
+  icon: {
     marginLeft: 16,
     marginRight: -16,
   },
-  md3IconCompact: {
+  iconCompact: {
     marginLeft: 8,
     marginRight: 0,
   },
-  md3IconReverse: {
+  iconReverse: {
     marginLeft: -16,
     marginRight: 16,
   },
-  md3IconReverseCompact: {
+  iconReverseCompact: {
     marginLeft: 0,
     marginRight: 8,
   },
-  md3IconTextMode: {
+  iconTextMode: {
     marginLeft: 12,
     marginRight: -8,
   },
-  md3IconTextModeCompact: {
+  iconTextModeCompact: {
     marginLeft: 6,
     marginRight: 0,
   },
-  md3IconReverseTextMode: {
+  iconReverseTextMode: {
     marginLeft: -8,
     marginRight: 12,
   },
-  md3IconReverseTextModeCompact: {
+  iconReverseTextModeCompact: {
     marginLeft: 0,
     marginRight: 6,
   },
   /* eslint-enable react-native/no-unused-styles */
-  label: {
+  labelBase: {
     textAlign: 'center',
     marginVertical: 9,
     marginHorizontal: 16,
@@ -488,14 +487,14 @@ const styles = StyleSheet.create({
   uppercaseLabel: {
     textTransform: 'uppercase',
   },
-  md3Label: {
+  label: {
     marginVertical: 10,
     marginHorizontal: 24,
   },
-  md3LabelText: {
+  labelText: {
     marginHorizontal: 12,
   },
-  md3LabelTextAddons: {
+  labelTextAddons: {
     marginHorizontal: 16,
   },
 });

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -352,7 +352,7 @@ const Chip = ({
                   ? [
                       styles.avatar,
                       styles.avatarSelected,
-                      selected && styles.md3SelectedIcon,
+                      selected && styles.selectedIcon,
                     ]
                   : null,
               ]}
@@ -380,12 +380,7 @@ const Chip = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            style={[
-              styles.md3LabelText,
-              labelTextStyle,
-              labelSpacings,
-              textStyle,
-            ]}
+            style={[styles.labelText, labelTextStyle, labelSpacings, textStyle]}
             ellipsizeMode={ellipsizeMode}
             maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
@@ -442,7 +437,7 @@ const styles = StyleSheet.create({
     marginRight: 8,
     padding: 0,
   },
-  md3LabelText: {
+  labelText: {
     textAlignVertical: 'center',
     marginVertical: 6,
   },
@@ -455,7 +450,7 @@ const styles = StyleSheet.create({
     marginLeft: 4,
     marginRight: 0,
   },
-  md3SelectedIcon: {
+  selectedIcon: {
     paddingLeft: 4,
   },
   // eslint-disable-next-line react-native/no-color-literals