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-helpers
DeviceInfo Usage
import {
Screen,
ScreenWidth,
ScreenHeight,
isIOS,
isAndroid,
} 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} />
</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.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 |
| 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
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Helpers Library is available under the MIT license. See the LICENSE file for more info.
