Added monospace code font

App.tsx

@@ -1,17 +1,23 @@
-import 'react-native-gesture-handler';
-import { NavigationContainer } from '@react-navigation/native';
-import { StatusBar } from 'expo-status-bar';
-import BottomTabNav from './navigation/BottomTabNav';
+import "react-native-gesture-handler";
+import { NavigationContainer } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import BottomTabNav from "./navigation/BottomTabNav";
+import { useFonts } from "expo-font";
+import AppLoading from "expo-app-loading";
 
 export default function App() {
+  let [fontsLoaded] = useFonts({
+    Hack: require("./assets/fonts/Hack-Regular.ttf"),
+  });
+
+  if (!fontsLoaded) {
+    return <AppLoading />;
+  }
 
   return (
-    <NavigationContainer >
-
+    <NavigationContainer>
       <BottomTabNav />
       <StatusBar style="light" />
-
     </NavigationContainer>
-
   );
 }

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "practical03-solution",
-    "slug": "practical03-solution",
+    "name": "codedash",
+    "slug": "codedash",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

components/Code/Code.tsx

@@ -1,8 +1,9 @@
 import styles from './CodeStyle';
 import Highlight, { defaultProps, Language } from "prism-react-renderer";
-import {View, Text} from 'react-native';
+import {View, Text, Platform} from 'react-native';
 //import theme from "prism-react-renderer/themes/nightOwl";
 import theme from "prism-react-renderer/themes/okaidia";
+import { useFonts } from 'expo-font';
 
 
 
@@ -14,6 +15,14 @@ interface CodeProps {
 
 function Code({code, language}: CodeProps){
 
+  let [fontsLoaded] = useFonts({
+    Hack: require("../../assets/fonts/Hack-Regular.ttf"),
+  });
+
+  const courierFont = Platform.Version >= 15 ? 'Courier New' : 'Courier';
+  const platformFont = Platform.OS === "ios" ? courierFont : "monospace";
+  const fontFamily = (fontsLoaded) ? "Hack" : platformFont;
+
   return (
     <View style={styles.container}>
       <Highlight {...defaultProps} theme={theme} code={code} language={language}>
@@ -24,7 +33,17 @@ function Code({code, language}: CodeProps){
                 {line.map((token, key) => {
                   const props = getTokenProps({ token, key });
                   return (
-                    <Text key={props.key} style={{color: props.style?.color ?? "#fff"} as any}>
+                    <Text
+                      key={props.key}
+                      style={
+                        {
+                          color: props.style?.color ?? "#fff",
+                          fontFamily: fontFamily,
+                          fontSize: 12,
+                          fontWeight: props.style?.fontWeight ?? "normal",
+                        } as any
+                      }
+                    >
                       {props.children}
                     </Text>
                   );

components/Code/CodeStyle.js

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "flex-start",
     justifyContent: "flex-start",
+    flexWrap: "wrap",
   },
 });