https://github.com/fiberjw/umiko

Font weights in React Native, but if they actually worked correctly.
https://github.com/fiberjw/umiko

expo react react-native typography

Last synced: 3 months ago
JSON representation

Font weights in React Native, but if they actually worked correctly.

• Host: GitHub
• URL: https://github.com/fiberjw/umiko
• Owner: FiberJW
• Created: 2020-05-01T00:14:26.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-20T13:11:00.000Z (almost 6 years ago)
• Last Synced: 2025-12-30T12:35:16.783Z (6 months ago)
• Topics: expo, react, react-native, typography
• Language: JavaScript
• Homepage:
• Size: 3.39 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  





`umiko`





  Font weights in React Native, but if they actually worked correctly.



---



[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://github.com/expo/expo)

[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://github.com/expo/expo)

[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://github.com/expo/expo)



## NANI??

This library was inspired by the realization that `expo-fonts` can load fonts from remote URLs and that when you set up fonts in your Expo/RN app, you have to do more ceremony than you have to do on the web.

In RN, you have to specify a different `fontFamily` for different weights of the same typeface rather than just being able to specify a `fontWeight` and resolve to the right file as you are able to do on the web with `@font-face` in CSS.

The initial version of the library will support `Inter`, but hopefully it's simple enough for you to be able to PR in other typefaces that you want to use this way easily.

## Example

```tsx

import React from "react";

import { ScrollView, StyleSheet } from "react-native";

import { useTypefaces, Text } from "umiko";

export default function App() {

  const fontsLoaded = useTypefaces({ Inter: true });

  return fontsLoaded ? (

    

      {[

        "normal",

        "bold",

        "100",

        "200",

        "300",

        "400",

        "500",

        "600",

        "700",

        "800",

        "900",

      ].map((weight) => (

        

          Inter {weight}

        

      ))}

    

  ) : null;

}

```



  



Check out the [demo](./packages/demo/App.tsx) to learn more about how to use it.

## Caveats

- You must `import { Text } from 'umiko';` to get proper font usage.

- Nesting `` components doesn't inherit styles from its parent, so you must specify styles for each `Text`.

- This only supports inline styles. Registering styles from `StyleSheet.create` will result in an error.