RN (ReactNative) 사용자 폰트 적용하기

1. 폰트 다운받아서

2. 프로젝트 asset 으로 폰트를 등록

3. compnents 폴더에 text.jsx 또는 text.tsx 만들어서

import React from 'react';
import {
  Text as ReactText,
  StyleSheet,
  StyleProp,
  TextStyle,
} from 'react-native';

type TextProps = {
  children: React.ReactNode;
  style?: StyleProp<TextStyle>;
};

export const Text = ({style, children}: TextProps) => {
  return <ReactText style={[styles.font, style]}>{children}</ReactText>;
};

const styles = StyleSheet.create({
  font: {
    fontFamily: 'Nunito-Regular',
  },
});

사용하는 곳에서는 (App.tsx)

React Text 컴포넌트 대신에 만들어둔 Text 컴포넌트를 이용해서

style 을 props 로 넘겨주면 사용 끝

import React from 'react';
import {SafeAreaView, StyleSheet, StatusBar} from 'react-native';
import {Text} from './components/Text';

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <Text>This font-weight is 'regular' </Text>
        <Text style={styles.boldFont}>This font-weight is 'bold' </Text>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boldFont: {
    fontFamily: 'Nunito-Bold',
  },
});

export default App;

 

나중에

네이버 나눔폰트로 app 에 적용할 때 사용하려고 기록 남겨둡니다

 

참고사이트

https://blog.logrocket.com/react-native-vector-icons-fonts-react-native-app-ui/