https://github.com/wrathchaos/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 useEasy to use & awesome helpers for React Native.
https://github.com/wrathchaos/react-native-helpers
android device deviceinfo expo freakycoder height helper helpers ios iphonex notch react react-native react-native-helpers width
Last synced: about 2 months ago
JSON representation
All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy useEasy to use & awesome helpers for React Native.
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-helpers
- Owner: WrathChaos
- License: mit
- Created: 2019-05-11T12:30:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-24T16:03:32.000Z (2 months ago)
- Last Synced: 2025-03-28T13:08:13.948Z (about 2 months ago)
- Topics: android, device, deviceinfo, expo, freakycoder, height, helper, helpers, ios, iphonex, notch, react, react-native, react-native-helpers, width
- Language: TypeScript
- Homepage: https://www.freakycoder.com
- Size: 8.32 MB
- Stars: 88
- Watchers: 4
- Forks: 6
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/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
[](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
[](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
[](https://opensource.org/licenses/MIT)
## 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";
;
```
## Notch & DynamicIsland Usage
```ts
import {
getStatusBarHeight,
hasNotch,
hasNotchOnly,
hasDynamicIsland,
getStatusBarHeight,
} from "@freakycoder/react-native-helpers";
;
```
## 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";
{numberFormat(50319341) // Output: 50.319.341
{numberFormat(1093495, "en", {
style: "currency",
currency: "GBP"
})}
// 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, [email protected]
## License
React Native Helpers Library is available under the MIT license. See the LICENSE file for more info.