added fonts on tailwind

app/components/BarCodeScanner.tsx

@@ -1,10 +1,10 @@
 import { StackScreenProps } from '@react-navigation/stack'
 import { BarCodeScanner as DefaultBarCodeScanner } from 'expo-barcode-scanner'
 import React, { useEffect, useState } from 'react'
-import { Text } from 'react-native'
 import tailwind from 'tailwind-rn'
 import { View } from '.'
 import { Logging } from '../api/logging'
+import { Text } from '../components/Text'
 import { BalanceParamList } from '../screens/AppNavigator/screens/Balances/BalancesNavigator'
 import { translate } from '../translations'
 

app/components/SectionTitle.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Text } from 'react-native'
 import { tailwind } from '../tailwind'
+import { Text } from './Text'
 
 export function SectionTitle ({ text, testID }: { text: string, testID: string }): JSX.Element {
   return (
     <Text
       testID={testID}
-      style={[tailwind('p-4 text-xs text-gray-500 font-bold mt-2')]}
+      style={[tailwind('p-4 text-xs text-gray-500 mt-2 font-medium')]}
     >
       {
         text

app/components/Text.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Text as DefaultText } from 'react-native'
+import { tailwind } from '../tailwind'
+
+export const HeaderFont = tailwind('font-semibold')
+
+export type TextProps = DefaultText['props']
+
+export function Text (props: TextProps): JSX.Element {
+  const { style, ...otherProps } = props
+  return (
+    <DefaultText
+      style={[tailwind('font-normal text-base'), style]} {...otherProps}
+    />
+  )
+}

app/components/index.tsx

@@ -1,17 +1,10 @@
 import React from 'react'
-import { StyleSheet, Text as DefaultText, TextInput as DefaultTextInput, View as DefaultView } from 'react-native'
+import { TextInput as DefaultTextInput, View as DefaultView } from 'react-native'
+import { tailwind } from '../tailwind'
+import { Text as DefaultText, TextProps } from './Text'
 
-const Default = StyleSheet.create({
-  text: {
-    fontSize: 16,
-    fontWeight: '600'
-  }
-})
-
-export function Text (props: DefaultText['props']): JSX.Element {
-  const { style, ...otherProps } = props
-
-  return <DefaultText style={[Default.text, style]} {...otherProps} />
+export function Text (props: TextProps): JSX.Element {
+  return <DefaultText {...props} />
 }
 
 export function View (props: DefaultView['props']): JSX.Element {
@@ -23,5 +16,5 @@ export function View (props: DefaultView['props']): JSX.Element {
 export function TextInput (props: DefaultTextInput['props']): JSX.Element {
   const { style, ...otherProps } = props
 
-  return <DefaultTextInput style={[Default.text, style]} {...otherProps} />
+  return <DefaultTextInput style={[tailwind('font-normal text-base'), style]} {...otherProps} />
 }

app/hooks/useCachedResources.ts

@@ -1,3 +1,10 @@
+import {
+  IBMPlexSans_300Light,
+  IBMPlexSans_400Regular,
+  IBMPlexSans_500Medium,
+  IBMPlexSans_600SemiBold,
+  IBMPlexSans_700Bold
+} from '@expo-google-fonts/ibm-plex-sans'
 import { MaterialIcons } from '@expo/vector-icons'
 import * as Font from 'expo-font'
 import { useEffect, useState } from 'react'
@@ -22,7 +29,11 @@ async function loadResourcesAndDataAsync (): Promise<void> {
   try {
     await Font.loadAsync({
       ...MaterialIcons.font,
-      'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf')
+      LightFont: IBMPlexSans_300Light,
+      RegularFont: IBMPlexSans_400Regular,
+      MediumFont: IBMPlexSans_500Medium,
+      SemiBoldFont: IBMPlexSans_600SemiBold,
+      BoldFont: IBMPlexSans_700Bold
     })
   } catch (e) {
     // TODO(@defich/wallet): We might want to provide this error information to an error reporting service

app/screens/AppNavigator/BottomTabNavigator.tsx

@@ -3,6 +3,7 @@ import { PathConfigMap } from '@react-navigation/core'
 import * as React from 'react'
 import { OceanInterface } from '../../components/OceanInterface/OceanInterface'
 import { VectorIcon, VectorIconName } from '../../constants/Theme'
+import { tailwind } from '../../tailwind'
 
 import { BalancesNavigator } from './screens/Balances/BalancesNavigator'
 import { DexNavigator } from './screens/Dex/DexNavigator'
@@ -33,7 +34,7 @@ export function BottomTabNavigator (): JSX.Element {
       <OceanInterface />
       <BottomTab.Navigator
         initialRouteName='Balances'
-        tabBarOptions={{ adaptive: false }}
+        tabBarOptions={{ adaptive: false, labelStyle: tailwind('font-medium') }}
       >
         <BottomTab.Screen
           name='Balances'

app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native'
 import { Text } from '../../../../components'
 import { BarCodeScanner } from '../../../../components/BarCodeScanner'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
+import { HeaderFont } from '../../../../components/Text'
 import { WalletToken } from '../../../../store/wallet'
 import { tailwind } from '../../../../tailwind'
 import { translate } from '../../../../translations'
@@ -28,7 +29,7 @@ const BalanceStack = createStackNavigator<BalanceParamList>()
 
 export function BalancesNavigator (): JSX.Element {
   return (
-    <BalanceStack.Navigator>
+    <BalanceStack.Navigator screenOptions={{ headerTitleStyle: HeaderFont }}>
       <BalanceStack.Screen
         name='Balances'
         component={BalancesScreen}
@@ -64,7 +65,7 @@ export function BalancesNavigator (): JSX.Element {
             return (
               <View style={tailwind('flex-row items-center')}>
                 <Icon />
-                <Text style={tailwind('ml-2')}>{token.displaySymbol}</Text>
+                <Text style={tailwind('ml-2 font-semibold')}>{token.displaySymbol}</Text>
               </View>
             )
           }

app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx

@@ -79,7 +79,7 @@ function BalanceItemRow ({ token, onPress }: { token: WalletToken, onPress: () =
       <View style={tailwind('flex-row items-center flex-auto')}>
         <Icon />
         <View style={tailwind('mx-3 flex-auto')}>
-          <Text>{token.displaySymbol}</Text>
+          <Text style={tailwind('font-medium')}>{token.displaySymbol}</Text>
           <Text
             numberOfLines={1}
             ellipsizeMode='tail'

app/screens/AppNavigator/screens/Balances/screens/ReceiveScreen.tsx

@@ -1,9 +1,10 @@
 import { MaterialIcons } from '@expo/vector-icons'
 import * as Clipboard from 'expo-clipboard'
 import React from 'react'
-import { Text, TouchableOpacity, View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import QRCode from 'react-native-qrcode-svg'
 import { useSelector } from 'react-redux'
+import { Text } from '../../../../../components/Text'
 import { RootState } from '../../../../../store'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'