Awesome Open Source
Awesome Open Source
main image


PRs Welcome Platform License Greenkeeper badge npm version

Use this library if you have a small problem with the font size 🎉

How to install

yarn add react-native-responsive-fontsize
# or
npm install react-native-responsive-fontsize --save

How it looks on different device sizes

iPhone SE iPhone X


arguments Description
RFPercentage percent: number The font size is calculated as a percentage of the height(width in landscape mode) of the device.
RFValue value: number, standardScreenHeight?: number The font size is calculated based on standardScreenHeight and passed value
  • when using RFValue's standardScreenHeight
    • default standardScreenHeight is 680
    • In landscape mode, please pass the screen width


import { RFPercentage, RFValue } from "react-native-responsive-fontsize";

const styles = StyleSheet.create({
  welcome: {
    fontSize: RFValue(24, 580) // second argument is standardScreenHeight(optional),
    textAlign: "center",
    margin: 10,
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
    fontSize: RFPercentage(5),



Load map (I'm waiting for your help)

  • [x] support landscape mode
  • [x] make test code
Alternatives To React Native Responsive Fontsize
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Reactjs (161,116
Github (43,714
Git (34,430
Responsive (8,508
Landscape (1,515
Font Size (683
Reponsive (7