refactored text styles, not enough shared

app/navigation/BottomTabBar.tsx

@@ -1,12 +1,19 @@
-import React, { useState } from 'react'
-import { Text, View, Pressable } from 'react-native'
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
-import textStyles from '@app/styles/text'
 import colors from '@app/styles/colors'
 import FastImage from 'react-native-fast-image'
 import NowPlayingBar from '@app/components/NowPlayingBar'
+import PressableOpacity from '@app/components/PressableOpacity'
+import font from '@app/styles/font'
+import dimensions from '@app/styles/dimensions'
 
-const icons: { [key: string]: any } = {
+type TabButtonImage = {
+  regular: number
+  fill: number
+}
+
+const icons: { [key: string]: TabButtonImage } = {
   home: {
     regular: require('@res/icons/home.png'),
     fill: require('@res/icons/home-fill.png'),
@@ -30,11 +37,9 @@ const BottomTabButton: React.FC<{
   label: string
   name: string
   isFocused: boolean
-  img: { regular: number; fill: number }
+  img: TabButtonImage
   navigation: any
 }> = ({ routeKey, label, name, isFocused, img, navigation }) => {
-  const [opacity, setOpacity] = useState(1)
-
   const onPress = () => {
     const event = navigation.emit({
       type: 'tabPress',
@@ -48,47 +53,30 @@ const BottomTabButton: React.FC<{
   }
 
   return (
-    <Pressable
-      onPress={onPress}
-      onPressIn={() => setOpacity(0.6)}
-      onPressOut={() => setOpacity(1)}
-      style={{
-        alignItems: 'center',
-        flex: 1,
-        opacity,
-      }}>
+    // <PressableOpacity onPress={onPress} style={styles.button} ripple={true} rippleColor="rgba(100,100,100,0.18)">
+    <PressableOpacity onPress={onPress} style={styles.button}>
       <FastImage
         source={isFocused ? img.fill : img.regular}
-        style={{
-          height: 26,
-          width: 26,
-        }}
+        style={styles.image}
         tintColor={isFocused ? colors.text.primary : colors.text.secondary}
       />
       <Text
         style={{
-          ...textStyles.xsmall,
+          ...styles.text,
           color: isFocused ? colors.text.primary : colors.text.secondary,
         }}>
         {label}
       </Text>
-    </Pressable>
+    </PressableOpacity>
   )
 }
+const MemoBottomTabButton = React.memo(BottomTabButton)
 
 const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
   return (
     <View>
       <NowPlayingBar />
-      <View
-        style={{
-          height: 54,
-          backgroundColor: colors.gradient.high,
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-around',
-          paddingHorizontal: 28,
-        }}>
+      <View style={styles.container}>
         {state.routes.map((route, index) => {
           const { options } = descriptors[route.key] as any
           const label =
@@ -99,7 +87,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
               : route.name
 
           return (
-            <BottomTabButton
+            <MemoBottomTabButton
               key={route.key}
               routeKey={route.key}
               label={label}
@@ -115,4 +103,28 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    height: dimensions.tabBar,
+    backgroundColor: colors.gradient.high,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingHorizontal: 28,
+  },
+  button: {
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+  },
+  image: {
+    height: 26,
+    width: 26,
+  },
+  text: {
+    fontSize: 10,
+    fontFamily: font.regular,
+  },
+})
+
 export default BottomTabBar

app/navigation/LibraryTopTabNavigator.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatusBar, View } from 'react-native'
+import { StatusBar, StyleSheet, View } from 'react-native'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import AlbumsTab from '@app/screens/LibraryAlbums'
 import ArtistsTab from '@app/screens/LibraryArtists'
@@ -7,36 +7,10 @@ import PlaylistsTab from '@app/screens/LibraryPlaylists'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
 import AlbumView from '@app/screens/AlbumView'
 import { RouteProp } from '@react-navigation/native'
-import text from '@app/styles/text'
+import font from '@app/styles/font'
 import colors from '@app/styles/colors'
 import ArtistView from '@app/screens/ArtistView'
-
-const Tab = createMaterialTopTabNavigator()
-
-const LibraryTopTabNavigator = () => (
-  <Tab.Navigator
-    tabBarOptions={{
-      style: {
-        height: 48,
-        backgroundColor: colors.gradient.high,
-        elevation: 0,
-        marginTop: StatusBar.currentHeight,
-      },
-      labelStyle: {
-        ...text.header,
-        textTransform: null as any,
-        marginTop: 0,
-        marginHorizontal: 2,
-      },
-      indicatorStyle: {
-        backgroundColor: colors.text.primary,
-      },
-    }}>
-    <Tab.Screen name="Albums" component={AlbumsTab} />
-    <Tab.Screen name="Artists" component={ArtistsTab} />
-    <Tab.Screen name="Playlists" component={PlaylistsTab} />
-  </Tab.Navigator>
-)
+import dimensions from '@app/styles/dimensions'
 
 type LibraryStackParamList = {
   LibraryTopTabs: undefined
@@ -66,28 +40,73 @@ const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
   <ArtistView id={route.params.id} title={route.params.title} />
 )
 
-const Stack = createNativeStackNavigator<LibraryStackParamList>()
+const Tab = createMaterialTopTabNavigator()
 
-const itemScreenOptions = {
-  title: '',
-  headerStyle: {
-    backgroundColor: colors.gradient.high,
-  },
-  headerHideShadow: true,
-  headerTintColor: 'white',
-  headerTitleStyle: {
-    ...text.header,
-  } as any,
-}
-
-const LibraryStackNavigator = () => (
-  <View style={{ flex: 1 }}>
-    <Stack.Navigator>
-      <Stack.Screen name="LibraryTopTabs" component={LibraryTopTabNavigator} options={{ headerShown: false }} />
-      <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
-      <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
-    </Stack.Navigator>
-  </View>
+const LibraryTopTabNavigator = () => (
+  <Tab.Navigator
+    tabBarOptions={{
+      style: styles.tabBar,
+      labelStyle: styles.tablabelStyle,
+      indicatorStyle: styles.tabindicatorStyle,
+    }}>
+    <Tab.Screen name="Albums" component={AlbumsTab} />
+    <Tab.Screen name="Artists" component={ArtistsTab} />
+    <Tab.Screen name="Playlists" component={PlaylistsTab} />
+  </Tab.Navigator>
 )
 
+const Stack = createNativeStackNavigator<LibraryStackParamList>()
+
+const LibraryStackNavigator = () => {
+  const itemScreenOptions = {
+    title: '',
+    headerStyle: styles.stackheaderStyle,
+    headerHideShadow: true,
+    headerTintColor: 'white',
+    headerTitleStyle: styles.stackheaderTitleStyle,
+  }
+
+  return (
+    <View style={styles.stackContainer}>
+      <Stack.Navigator>
+        <Stack.Screen name="LibraryTopTabs" component={LibraryTopTabNavigator} options={{ headerShown: false }} />
+        <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
+        <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
+      </Stack.Navigator>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  stackContainer: {
+    flex: 1,
+  },
+  stackheaderStyle: {
+    backgroundColor: colors.gradient.high,
+  },
+  stackheaderTitleStyle: {
+    fontSize: 18,
+    fontFamily: font.semiBold,
+    color: colors.text.primary,
+  },
+  tabBar: {
+    height: dimensions.header,
+    marginTop: StatusBar.currentHeight,
+    backgroundColor: colors.gradient.high,
+    elevation: 0,
+    justifyContent: 'center',
+  },
+  tablabelStyle: {
+    fontSize: 18,
+    fontFamily: font.semiBold,
+    color: colors.text.primary,
+    textTransform: null as any,
+    marginTop: 0,
+    marginHorizontal: 2,
+  },
+  tabindicatorStyle: {
+    backgroundColor: colors.text.primary,
+  },
+})
+
 export default LibraryStackNavigator