Fix tabbar blur color

Remove extra LinearGradientA llow separate iOS gradient colors to compensate for blurview darkening/lightening
EdgeApp · Jan 13, 2024 · a76798d · a76798d
1 parent 9a1623a
commit a76798d
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 33 deletions.
diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
@@ -1,26 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MenuTabs should render with loading props 1`] = `
-<BVLinearGradient
-  colors={
-    [
-      0,
-      4278190080,
-    ]
-  }
-  endPoint={
-    {
-      "x": 0,
-      "y": 1,
-    }
-  }
-  locations={null}
-  startPoint={
-    {
-      "x": 0,
-      "y": 0.5,
-    }
-  }
+<View
   style={
     {
       "bottom": 0,
@@ -35,7 +16,7 @@ exports[`MenuTabs should render with loading props 1`] = `
   <BlurView
     blurAmount={10}
     blurType="dark"
-    overlayColor="#00000000"
+    overlayColor="rgba(0, 0, 0, 0)"
     style={
       {
         "bottom": 0,
@@ -49,8 +30,8 @@ exports[`MenuTabs should render with loading props 1`] = `
   <BVLinearGradient
     colors={
       [
-        0,
-        4278190080,
+        436207616,
+        3003121664,
       ]
     }
     endPoint={
@@ -77,5 +58,5 @@ exports[`MenuTabs should render with loading props 1`] = `
       }
     />
   </BVLinearGradient>
-</BVLinearGradient>
+</View>
 `;
diff --git a/src/components/themed/MenuTabs.tsx b/src/components/themed/MenuTabs.tsx
@@ -2,7 +2,7 @@ import { BottomTabBarProps, BottomTabNavigationEventMap } from '@react-navigatio
 import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
 import * as React from 'react'
 import { useMemo } from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -42,7 +42,7 @@ export const MenuTabs = (props: BottomTabBarProps) => {
   const { navigation, state } = props
   const theme = useTheme()
   const activeTabFullIndex = state.index
-  const colors = theme.tabBarBackground
+  const colors = Platform.OS === 'ios' ? theme.tabBarBackgroundIos : theme.tabBarBackground
   const start = theme.tabBarBackgroundStart
   const end = theme.tabBarBackgroundEnd
   const routes = useMemo(
@@ -68,8 +68,8 @@ export const MenuTabs = (props: BottomTabBarProps) => {
   const { drawerOpenRatio, resetDrawerRatio } = useDrawerOpenRatio()
 
   return (
-    <ContainerLinearGradient colors={colors} start={start} end={end}>
-      <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={StyleSheet.absoluteFill} overlayColor="#00000000" />
+    <Container>
+      <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={StyleSheet.absoluteFill} overlayColor="rgba(0, 0, 0, 0)" />
       <LinearGradient colors={colors} start={start} end={end}>
         <Tabs>
           {routes.map((route, index: number) => (
@@ -85,11 +85,11 @@ export const MenuTabs = (props: BottomTabBarProps) => {
           ))}
         </Tabs>
       </LinearGradient>
-    </ContainerLinearGradient>
+    </Container>
   )
 }
 
-const ContainerLinearGradient = styled(LinearGradient)({
+const Container = styled(View)({
   position: 'absolute',
   left: 0,
   right: 0,

diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
@@ -44,7 +44,8 @@ const palette = {
   accentOrange: '#F1AA19',
   darkBlueLightened: '#2B333A',
 
-  blackOp25: 'rgba(0, 0, 0, .25)',
+  blackOp10: 'rgba(0, 0, 0, .1)',
+  blackOp35: 'rgba(0, 0, 0, .25)',
   blackOp50: 'rgba(0, 0, 0, .5)',
   blackOp70: 'rgba(0, 0, 0, .7)',
 
@@ -306,7 +307,8 @@ export const edgeDark: Theme = {
     textShadowRadius: 3
   },
 
-  tabBarBackground: [`${palette.black}00`, palette.black],
+  tabBarBackground: [palette.blackOp35, palette.blackOp70],
+  tabBarBackgroundIos: [palette.blackOp10, palette.blackOp70],
   tabBarBackgroundStart: { x: 0, y: 0.5 },
   tabBarBackgroundEnd: { x: 0, y: 1 },
   tabBarTopOutlineColors: [`${palette.white}22`, `${palette.white}22`],

diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
@@ -269,6 +269,7 @@ export const edgeLight: Theme = {
   },
 
   tabBarBackground: [palette.white, palette.white],
+  tabBarBackgroundIos: [palette.white, palette.white],
   tabBarBackgroundStart: { x: 0, y: 0 },
   tabBarBackgroundEnd: { x: 1, y: 1 },
   tabBarTopOutlineColors: [palette.white, palette.white],

diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
@@ -309,7 +309,8 @@ export const testDark: Theme = {
     textShadowRadius: 3
   },
 
-  tabBarBackground: [`${palette.black}00`, palette.black],
+  tabBarBackground: [palette.black, palette.black],
+  tabBarBackgroundIos: [palette.blackOp25, palette.blackOp50],
   tabBarBackgroundStart: { x: 0, y: 0.5 },
   tabBarBackgroundEnd: { x: 0, y: 1 },
   tabBarTopOutlineColors: [`${palette.white}22`, `${palette.white}22`],

diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
@@ -269,6 +269,7 @@ export const testLight: Theme = {
   },
 
   tabBarBackground: [palette.white, palette.white],
+  tabBarBackgroundIos: [palette.white, palette.white],
   tabBarBackgroundStart: { x: 0, y: 0 },
   tabBarBackgroundEnd: { x: 1, y: 1 },
   tabBarTopOutlineColors: [palette.white, palette.white],

diff --git a/src/types/Theme.ts b/src/types/Theme.ts
@@ -263,6 +263,9 @@ export interface Theme {
   cardTextShadow: TextShadowParams // For added contrast against complex card backgrounds
 
   tabBarBackground: string[]
+  // IOS has a forced darkening and lightening of blurviews so we need
+  // a different color to compensate
+  tabBarBackgroundIos: string[]
   tabBarBackgroundStart: GradientCoords
   tabBarBackgroundEnd: GradientCoords
   tabBarTopOutlineColors: string[]