# @freakycoder/react-native-helpers

> All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use

Latest version **2.5.1** (published 2025-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @freakycoder/react-native-helpers
pnpm add @freakycoder/react-native-helpers
yarn add @freakycoder/react-native-helpers
bun add @freakycoder/react-native-helpers
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.5.1 |
| Published | 2025-02-26 |
| First published | 2019-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 110.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 87 |
| Author | Kuray |
| Maintainers | freakycoder |
| Keywords | ios, width, notch, screen, helper, height, iPhoneX, android, helpers, normalize, normalizeText, FreakyCoder, freakycoder, kuray, Kuray, react, react-native, javascript, ui-lib, rn |

## Links

- npm: https://www.npmjs.com/package/@freakycoder/react-native-helpers
- Repository: https://github.com/WrathChaos/react-native-helpers
- Homepage: https://www.freakycoder.com
- Issues: https://github.com/WrathChaos/react-native-helpers/issues
- npm.io page: https://npm.io/package/@freakycoder/react-native-helpers

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.5.1 (latest) — 2025-02-26
- 2.5.0 — 2025-02-05
- 2.4.0 — 2024-09-12
- 2.3.0 — 2023-11-30
- 2.2.2 — 2023-09-16
- 2.2.1 — 2023-09-09
- 2.2.0 — 2023-09-09
- 2.1.0 — 2023-07-10
- 2.0.2 — 2022-10-06
- 2.0.0 — 2022-09-30
- 1.0.2 — 2021-08-19
- 1.0.1 — 2020-11-05
- 1.0.0 — 2020-10-31
- 0.1.3 — 2020-03-15
- 0.1.2 — 2019-12-16
- … 7 more at https://npm.io/package/@freakycoder/react-native-helpers/versions

## README

<img alt="React Native Helpers" src="assets/logo.png" width="1050"/>

[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-helpers)

<b><i>All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use</i></b>

[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

<p align="center">
<img alt="React Native Helpers" src="https://github.com/WrathChaos/react-native-helpers/blob/master/assets/Screenshots/example.png" width="49.7%" />
</p>

## Installation

Add the dependency:

### React Native

```bash
npm i @freakycoder/react-native-helpers
```

## DeviceInfo Usage

```tsx
import {
  Screen,
  ScreenWidth,
  ScreenHeight,
  isIOS,
  isAndroid,
  isTablet
} from "@freakycoder/react-native-helpers";

<View>
  <Container title="Device OS" subtitle={isIOS ? "iOS" : "Android"} />
  <Container title="Screen Height" subtitle={ScreenHeight} />
  <Container title="Screen Width" subtitle={ScreenWidth} />
  <Container title="Tablet?: " subtitle={isTablet ? "Tablet" : "Phone"} />
</View>;
```

## Notch & DynamicIsland Usage

```ts
import {
  getStatusBarHeight,
  hasNotch,
  hasNotchOnly,
  hasDynamicIsland,
  getStatusBarHeight,
} from "@freakycoder/react-native-helpers";

<View>
  <Container
    title="hasNotch?"
    subtitle={hasNotch() ? "Has Notch" : "NOT notch"}
  />
  <Container
    title="hasDynamicIsland?"
    subtitle={
      hasDynamicIsland(Screen) ? "Has Dynamic Island" : "NOT Dynamic Island"
    }
  />
  <Container title="getStatusBarHeight?" subtitle={getStatusBarHeight()} />
</View>;
```

## Open Applications or Stores by Linking

```ts
import { openAppInPlayStore, openAppInAppStore, openExternalApp } from "@freakycoder/react-native-helpers";

openAppInPlayStore('com.example.android');
openAppInAppStore('123456789');
openExternalApp('com.example.android', '123456789');
```

## Normalize Text Usage

Method to normalize size of fonts across devices

```ts
import { normalizeText } from "@freakycoder/react-native-helpers";

fontSize: normalizeText(24),
```

## Native Number Format Usage

Method to format the number of your texted number. You can change each options.

```ts
import { numberFormat } from "@freakycoder/react-native-helpers";

<Text>{numberFormat(50319341)</Text> // Output: 50.319.341
<Text>
  {numberFormat(1093495, "en", {
    style: "currency",
    currency: "GBP"
  })}
</Text>// Output: £ 50.319.341
```

# Configuration - Props

## DeviceInfo Props

| Property          |  Type   | Description                                                                                                                |
|-------------------|:-------:|----------------------------------------------------------------------------------------------------------------------------|
| isIOS             | boolean | returns if it is an iOS device or not                                                                                      |
| isAndroid         | boolean | returns if it is an Android device or not                                                                                  |
| isTablet          | boolean | returns if it is a tablet or phone                                                                                         |
| ScreenWidth       | number  | get the device's screen width                                                                                              |
| ScreenHeight      | number  | get the device's screen height                                                                                             |
| ScreenScale       | number  | get the device's screen scale ratio                                                                                        |
| ScreenFontScale   | number  | get the device's screen font scale ratio (depends on the user's device font scale setting)                                 |
| WindowWidth       | number  | get the device's window width                                                                                              |
| WindowHeight      | number  | get the device's window height                                                                                             |
| WindowScale       | number  | get the device's window scale ratio                                                                                        |
| WindowFontScale   | number  | get the device's window font scale ratio (depends on the user's device font scale setting)                                 |
| PlatformVersion   | number  | returns the platform version                                                                                               |
| ScreenMin         | number  | get the device's screen width/height which are **minimum** depend on the landscape or portrait mode                        |
| ScreenMax         | number  | get the device's screen width/height which are **maximum** depend on the landscape or portrait mode                        |
| vh                | number  | get the device's height but as a **viewport unit**                                                                         |
| vw                | number  | get the device's width but as a **viewport unit**                                                                          |
| vmin              | number  | get the device's screen width/height as a **viewport unit** which are **minimum** depend on the landscape or portrait mode |
| vmax              | number  | get the device's screen width/height as a **viewport unit** which are **maximum** depend on the landscape or portrait mode |
| getDeviceLanguage | string  | get the device's language (en_US)                                                                                          |

## DeviceInfo Props

getStatusBarHeight, hasNotch, hasNotchOnly, hasDynamicIsland

| Property           |   Type   | Description                                                                               |
|--------------------|:--------:|-------------------------------------------------------------------------------------------|
| hasNotch           | function | returns if the device has notch (returns true for dynamic island!)                        |
| hasNotchOnly       | function | returns if the device has notch only, it does not detect if the device has dynamic island |
| hasDynamicIsland   | function | returns if the device has dynamic island                                                  |
| getStatusBarHeight |  number  | returns status bar height of the device                                                   |

## Utils Props

| Property           |                 Type                 | Description                                            |
|--------------------|:------------------------------------:|--------------------------------------------------------|
| openAppInPlayStore |       function(appPackageName)       | opens the app on android or Google Play                |
| openAppInAppStore  |         function(appStoreId)         | opens the app on ios or App Store                      |
| openExternalApp    | function(appPackageName, appStoreId) | opens the app on ios or android - handles the platform |


## Normalize Text Props

| Property  |       Type       | Description                      |
|-----------|:----------------:|----------------------------------|
| normalize | function(number) | returns the normalized font size |

## Custom Text Props

| Property     |               Type               | Description                                                 |
|--------------|:--------------------------------:|-------------------------------------------------------------|
| numberFormat | function(value, locale, options) | returns the number formatted font with its given parameters |

### Roadmap

- [x] ~~LICENSE~~
- [x] ~~Typescript~~
- [x] ~~iPhone Series Support~~
- [x] ~~Dynamic Island~~
- [ ] Separate the style helpers from device
- [ ] More custom text helpers
- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Helpers Library is available under the MIT license. See the LICENSE file for more info.

---
_Source: https://npm.io/package/@freakycoder/react-native-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._