Awesome Open Source
Awesome Open Source
main image

react-native-responsive-fontsize

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

Methods

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

Usage

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),
  },
});

Changelog

releases

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