Package Exports
- @freakycoder/react-native-helpers
- @freakycoder/react-native-helpers/build/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@freakycoder/react-native-helpers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use
Installation
Add the dependency:
React Native
npm i @freakycoder/react-native-helpersDeviceInfo Usage
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
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
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
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.
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.341Configuration - 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
-
LICENSE -
Typescript -
iPhone Series Support -
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.