Skip to content

Commit 0889b0b

Browse files
lukewalczaklukewalczak
authored
fix: adjust label opacity (#4700)
1 parent 9060c3c commit 0889b0b

File tree

2 files changed

+35
-7
lines changed

2 files changed

+35
-7
lines changed

‎src/components/BottomNavigation/BottomNavigationBar.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -747,7 +747,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
747747
: 0) - (!isV3 ? 2 : 0),
748748
};
749749

750-
const isV3Shifting = isV3 && shifting && labeled;
750+
const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled);
751751

752752
const font = isV3 ? theme.fonts.labelMedium : {};
753753

@@ -778,7 +778,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
778778
style={[
779779
styles.iconContainer,
780780
isV3 && styles.v3IconContainer,
781-
(!isV3 || isV3Shifting) && {
781+
isLegacyOrV3Shifting && {
782782
transform: [{ translateY }],
783783
},
784784
]}
@@ -803,7 +803,11 @@ const BottomNavigationBar = <Route extends BaseRoute>({
803803
style={[
804804
styles.iconWrapper,
805805
isV3 && styles.v3IconWrapper,
806-
{ opacity: isV3 ? v3ActiveOpacity : activeOpacity },
806+
{
807+
opacity: isLegacyOrV3Shifting
808+
? activeOpacity
809+
: v3ActiveOpacity,
810+
},
807811
]}
808812
>
809813
{renderIcon ? (
@@ -825,7 +829,9 @@ const BottomNavigationBar = <Route extends BaseRoute>({
825829
styles.iconWrapper,
826830
isV3 && styles.v3IconWrapper,
827831
{
828-
opacity: isV3 ? v3InactiveOpacity : inactiveOpacity,
832+
opacity: isLegacyOrV3Shifting
833+
? inactiveOpacity
834+
: v3InactiveOpacity,
829835
},
830836
]}
831837
>
@@ -867,8 +873,10 @@ const BottomNavigationBar = <Route extends BaseRoute>({
867873
<Animated.View
868874
style={[
869875
styles.labelWrapper,
870-
(!isV3 || isV3Shifting) && {
871-
opacity: activeOpacity,
876+
{
877+
opacity: isLegacyOrV3Shifting
878+
? activeOpacity
879+
: v3ActiveOpacity,
872880
},
873881
]}
874882
>
@@ -898,7 +906,11 @@ const BottomNavigationBar = <Route extends BaseRoute>({
898906
<Animated.View
899907
style={[
900908
styles.labelWrapper,
901-
{ opacity: inactiveOpacity },
909+
{
910+
opacity: isLegacyOrV3Shifting
911+
? inactiveOpacity
912+
: v3InactiveOpacity,
913+
},
902914
]}
903915
>
904916
{renderLabel ? (

‎src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ exports[`allows customizing Route's type via generics 1`] = `
298298
{
299299
"bottom": 0,
300300
"left": 0,
301+
"opacity": 1,
301302
"position": "absolute",
302303
"right": 0,
303304
"top": 0,
@@ -551,6 +552,7 @@ exports[`allows customizing Route's type via generics 1`] = `
551552
{
552553
"bottom": 0,
553554
"left": 0,
555+
"opacity": 0,
554556
"position": "absolute",
555557
"right": 0,
556558
"top": 0,
@@ -2735,6 +2737,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
27352737
{
27362738
"bottom": 0,
27372739
"left": 0,
2740+
"opacity": 1,
27382741
"position": "absolute",
27392742
"right": 0,
27402743
"top": 0,
@@ -3062,6 +3065,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
30623065
{
30633066
"bottom": 0,
30643067
"left": 0,
3068+
"opacity": 0,
30653069
"position": "absolute",
30663070
"right": 0,
30673071
"top": 0,
@@ -3389,6 +3393,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
33893393
{
33903394
"bottom": 0,
33913395
"left": 0,
3396+
"opacity": 0,
33923397
"position": "absolute",
33933398
"right": 0,
33943399
"top": 0,
@@ -3716,6 +3721,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
37163721
{
37173722
"bottom": 0,
37183723
"left": 0,
3724+
"opacity": 0,
37193725
"position": "absolute",
37203726
"right": 0,
37213727
"top": 0,
@@ -4043,6 +4049,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
40434049
{
40444050
"bottom": 0,
40454051
"left": 0,
4052+
"opacity": 0,
40464053
"position": "absolute",
40474054
"right": 0,
40484055
"top": 0,
@@ -6007,6 +6014,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
60076014
{
60086015
"bottom": 0,
60096016
"left": 0,
6017+
"opacity": 1,
60106018
"position": "absolute",
60116019
"right": 0,
60126020
"top": 0,
@@ -6195,6 +6203,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
61956203
{
61966204
"bottom": 0,
61976205
"left": 0,
6206+
"opacity": 0,
61986207
"position": "absolute",
61996208
"right": 0,
62006209
"top": 0,
@@ -6383,6 +6392,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
63836392
{
63846393
"bottom": 0,
63856394
"left": 0,
6395+
"opacity": 0,
63866396
"position": "absolute",
63876397
"right": 0,
63886398
"top": 0,
@@ -7830,6 +7840,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
78307840
{
78317841
"bottom": 0,
78327842
"left": 0,
7843+
"opacity": 1,
78337844
"position": "absolute",
78347845
"right": 0,
78357846
"top": 0,
@@ -8157,6 +8168,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
81578168
{
81588169
"bottom": 0,
81598170
"left": 0,
8171+
"opacity": 0,
81608172
"position": "absolute",
81618173
"right": 0,
81628174
"top": 0,
@@ -8484,6 +8496,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
84848496
{
84858497
"bottom": 0,
84868498
"left": 0,
8499+
"opacity": 0,
84878500
"position": "absolute",
84888501
"right": 0,
84898502
"top": 0,
@@ -9960,6 +9973,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
99609973
{
99619974
"bottom": 0,
99629975
"left": 0,
9976+
"opacity": 1,
99639977
"position": "absolute",
99649978
"right": 0,
99659979
"top": 0,
@@ -10287,6 +10301,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
1028710301
{
1028810302
"bottom": 0,
1028910303
"left": 0,
10304+
"opacity": 0,
1029010305
"position": "absolute",
1029110306
"right": 0,
1029210307
"top": 0,
@@ -10614,6 +10629,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
1061410629
{
1061510630
"bottom": 0,
1061610631
"left": 0,
10632+
"opacity": 0,
1061710633
"position": "absolute",
1061810634
"right": 0,
1061910635
"top": 0,

0 commit comments

Comments
 (0)