feat: add custom microsoft font as the default text font

Author: luizbaldi

example/package.json

@@ -16,6 +16,7 @@
     "@react-navigation/native": "^5.8.1",
     "@react-navigation/stack": "^5.11.0",
     "expo": "^38.0.0",
+    "expo-font": "~8.2.1",
     "expo-splash-screen": "^0.3.1",
     "react": "16.11.0",
     "react-dom": "16.11.0",

example/src/App.tsx

@@ -1,11 +1,34 @@
+/* eslint-disable global-require */
 import React from 'react';
-
+import { View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { Hourglass, fontNames } from 'react95-native';
 
 import { LocalThemeProvider } from './util/LocalThemeContext';
 import MainNavigation from './MainNavigation';
 
 const App = () => {
+  const [fontLoaded] = useFonts({
+    [fontNames.normal]: require('./assets/fonts/MS-Sans-Serif.ttf'),
+    [fontNames.bold]: require('./assets/fonts/MS-Sans-Serif-Bold.ttf'),
+  });
+
+  if (!fontLoaded) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'teal',
+        }}
+      >
+        <Hourglass size={60} />
+      </View>
+    );
+  }
+
   return (
     <LocalThemeProvider>
       <NavigationContainer>

example/src/assets/fonts/MS-Sans-Serif-Bold.ttf

@@ -11,6 +11,11 @@ const TypographyExample = () => {
           <Text>Simple text</Text>
         </Panel>
       </Container.Section>
+      <Container.Section title='Bold'>
+        <Panel>
+          <Text bold>Bold text</Text>
+        </Panel>
+      </Container.Section>
       <Container.Section title='Disabled'>
         <Panel>
           <Text disabled>Disabled</Text>

example/src/assets/fonts/MS-Sans-Serif.ttf

@@ -3,6 +3,11 @@ import { Text as NativeText, StyleProp, TextStyle } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
 
+export const fontNames = {
+  normal: 'MS Sans Serif',
+  bold: 'MS Sans Serif Bold',
+};
+
 type Props = React.ComponentProps<typeof NativeText> & {
   bold?: boolean;
   children: React.ReactNode;
@@ -25,9 +30,11 @@ const Text = ({
     if (disabled) {
       return theme.text.disabled;
     }
+
     if (secondary) {
       return theme.text.secondary;
     }
+
     return theme.text.default;
   };
 
@@ -36,7 +43,7 @@ const Text = ({
       style={[
         getTextStyle(),
         {
-          fontWeight: bold ? 'bold' : 'normal',
+          fontFamily: bold ? fontNames.bold : fontNames.normal,
         },
         style,
       ]}

example/src/examples/TypographyExample.tsx

@@ -1,2 +1,2 @@
-export { default as Text } from './Text';
+export { default as Text, fontNames } from './Text';
 export { default as Anchor } from './Anchor';

src/Typography/Text.tsx

@@ -1,7 +1,7 @@
 export { default as Button } from './Button';
 export { default as TextInput } from './TextInput';
 export { default as Panel } from './Panel';
-export { Text, Anchor } from './Typography';
+export { Text, Anchor, fontNames } from './Typography';
 export { default as AppBar } from './AppBar';
 export { default as Cutout } from './Cutout';
 export { default as Window } from './Window';