[font]NotoSansKR

Author: Hyewon0223

App.js

@@ -1,9 +1,14 @@
-import { StatusBar } from 'expo-status-bar';
+import React from 'react';
 import 'react-native-gesture-handler';
-import { StyleSheet, Text, View } from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {useFonts,
+        NotoSansKR_100Thin, NotoSansKR_300Light,
+        NotoSansKR_400Regular, NotoSansKR_500Medium,
+        NotoSansKR_700Bold, NotoSansKR_900Black} from '@expo-google-fonts/noto-sans-kr';
+
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
 import {HomeScreen} from "./src/screens/HomeScreen";
 import {MapScreen} from "./src/screens/MapScreen"
 import {RecordScreen} from "./src/screens/RecordScreen";
@@ -13,24 +18,21 @@ import {SettingScreen} from "./src/screens/SettingScreen";
 const Tab = createBottomTabNavigator();
 
 export default function App() {
+  const [fontsLoaded] = useFonts({
+    NotoSansKR_100Thin, NotoSansKR_300Light, NotoSansKR_400Regular,
+    NotoSansKR_500Medium, NotoSansKR_700Bold, NotoSansKR_900Black
+  });
+
+  if (!fontsLoaded) return null;
   return <SafeAreaProvider>
-      <NavigationContainer>
-        <Tab.Navigator screenOptions={{ headerShown: false }}>
-          <Tab.Screen name="Home" component={HomeScreen}/>
-          <Tab.Screen name="Map" component={MapScreen}/>
-          <Tab.Screen name="Record" component={RecordScreen}/>
-          <Tab.Screen name="Community" component={CommunityScreen}/>
-          <Tab.Screen name="Setting" component={SettingScreen}/>
-        </Tab.Navigator>
-      </NavigationContainer>
+    <NavigationContainer>
+      <Tab.Navigator screenOptions={{headerShown: false}}>
+        <Tab.Screen name="Home" component={HomeScreen}/>
+        <Tab.Screen name="Map" component={MapScreen}/>
+        <Tab.Screen name="Record" component={RecordScreen}/>
+        <Tab.Screen name="Community" component={CommunityScreen}/>
+        <Tab.Screen name="Setting" component={SettingScreen}/>
+      </Tab.Navigator>
+    </NavigationContainer>
   </SafeAreaProvider>
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package.json

@@ -10,17 +10,20 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@expo-google-fonts/noto-sans-kr": "^0.2.2",
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/stack": "^6.2.2",
     "expo": "^46.0.2",
+    "expo-font": "^10.2.0",
     "expo-status-bar": "~1.4.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.3",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-safe-area-context": "^4.3.1",
-    "react-native-web": "~0.18.7"
+    "react-native-web": "~0.18.7",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    assets: ['./src/assets/fonts'],
+};

src/assets/fonts/NotoSansKR-Black.otf

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import {Button, SafeAreaView, Text, View} from 'react-native';
+import {StyleSheet, Button, SafeAreaView, Text, View} from 'react-native';
+import styled from 'styled-components/native';
 
+const Title = styled.Text`
+  font-family: 'NotoSansKR_900Black';
+`
 export const MapScreen = ({navigation}) => {
     return <SafeAreaView>
-        <Text>Map</Text>
+        <Title>지도</Title>
     </SafeAreaView>
 }