Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Font Weight Cheatsheet iOS
{ fontWeight: '100' }, // Thin
{ fontWeight: '200' }, // Ultra Light
{ fontWeight: '300' }, // Light
{ fontWeight: '400' }, // Regular
{ fontWeight: '500' }, // Medium
{ fontWeight: '600' }, // Semibold
{ fontWeight: '700' }, // Bold
{ fontWeight: '800' }, // Heavy
{ fontWeight: '900' }, // Black
@furball514

This comment has been minimized.

Copy link

@furball514 furball514 commented Aug 1, 2017

nice!

@hotsen

This comment has been minimized.

Copy link

@hotsen hotsen commented Aug 7, 2017

Aaaah. Zen ...

@lexuanquynh

This comment has been minimized.

Copy link

@lexuanquynh lexuanquynh commented Nov 24, 2017

thanks

@Osama92

This comment has been minimized.

Copy link

@Osama92 Osama92 commented Apr 6, 2018

Awesome!

@CoderXpert

This comment has been minimized.

Copy link

@CoderXpert CoderXpert commented May 3, 2018

💯

@ApoorvTheTecHie

This comment has been minimized.

Copy link

@ApoorvTheTecHie ApoorvTheTecHie commented May 24, 2018

Thanks mate, helped a lot.

@ArthurInTheShell

This comment has been minimized.

Copy link

@ArthurInTheShell ArthurInTheShell commented Jun 5, 2018

It helps a lot! Thanks!

@tonypee

This comment has been minimized.

Copy link

@tonypee tonypee commented Jun 22, 2018

export const fontWeights = {
  Thin: 100,
  UltraLight: 200,
  Light: 300,
  Regular: 400,
  Medium: 500,
  Semibold: 600,
  Bold: 700,
  Heavy: 800,
  Black: 900
};
@buechner

This comment has been minimized.

Copy link

@buechner buechner commented Jul 19, 2018

@tonypee: for usage in StyleSheet i needed to change this to

export const fontWeight = {
    Thin: "100",
    UltraLight: "200",  
    Light: "300",
    Regular: "400",
    Medium: "500",
    Semibold: "600",
    Bold: "700",
    Heavy: "800",
    Black: "900"
};
@badarshahzad

This comment has been minimized.

Copy link

@badarshahzad badarshahzad commented Jul 27, 2018

Sorry but 100 to 400 is not working and 500 is working like 'bold' property. Did you notice this thing?

@stantoncbradley

This comment has been minimized.

Copy link

@stantoncbradley stantoncbradley commented Sep 5, 2018

You can use https://www.npmjs.com/package/react-native-cross-platform-text to consolidate iOS and Android font weights into the same API

@michaelVictoriaDev

This comment has been minimized.

Copy link

@michaelVictoriaDev michaelVictoriaDev commented Aug 20, 2020

WOW thanks for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.