Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/heyman333/react-native-responsive-fontsize

🔠 Responsive fontSize based on screen-size of the device in React-Native
https://github.com/heyman333/react-native-responsive-fontsize

font fontsize git github react react-native reponsive

Last synced: 28 days ago
JSON representation

🔠 Responsive fontSize based on screen-size of the device in React-Native

Host: GitHub
URL: https://github.com/heyman333/react-native-responsive-fontsize
Owner: heyman333
License: mit
Created: 2018-04-23T04:21:03.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-01-07T09:18:39.000Z (over 1 year ago)
Last Synced: 2024-04-15T19:08:30.024Z (about 1 month ago)
Topics: font, fontsize, git, github, react, react-native, reponsive
Language: JavaScript
Homepage:
Size: 2.81 MB
Stars: 618
Watchers: 6
Forks: 34
Open Issues: 28
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome - react-native-responsive-fontsize ★22 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)
awesome-react-native - react-native-responsive-fontsize ★22 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)
awesome-react-native - react-native-responsive-fontsize ★22 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)
awesome-react-native - react-native-responsive-fontsize ★83 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)
awesome-react-native - react-native-responsive-fontsize ★83 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)
awesome-react-native - react-native-responsive-fontsize ★83 - Provide responsive fontsize based on device height in React-Native (Components / Text & Rich Content)

README

        

# react-native-responsive-fontsize

[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/heyman333/react-native-responsive-fontSize/pulls)

[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/heyman333/react-native-responsive-fontSize/blob/master/LICENSE) [![Greenkeeper badge](https://badges.greenkeeper.io/heyman333/react-native-responsive-fontSize.svg)](https://greenkeeper.io/)













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



#### How to install

```shell

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

```js

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](https://github.com/heyman333/react-native-responsive-fontSize/releases)

#### Load map (I'm waiting for your help)

- [x] support landscape mode

- [x] make `test code`