All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use
Add the dependency:
npm i @freakycoder/react-native-helpers
Zero Dependency
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>;
import {
isIPhoneNotchFamily,
isIPhone11,
isIPhone12,
isIPhone12Mini,
isIPhone12ProMax,
hasNotch,
isIPhoneX,
isIPhoneXr,
isIPhoneXs,
isIPhoneXsMax,
getStatusBarHeight,
} from "@freakycoder/react-native-helpers";
<View>
<Container
title="hasNotch?"
subtitle={hasNotch() ? "iPhone X Family" : "iPhone Family"}
/>
<Container
title="isIPhoneXsMax?"
subtitle={isIPhoneXsMax(Screen) ? "iPhone XsMax" : "NOT iPhone XsMax"}
/>
<Container title="getStatusBarHeight?" subtitle={getStatusBarHeight()} />
</View>;
Method to normalize size of fonts across devices
import { normalizeText } from "@freakycoder/react-native-helpers";
fontSize: normalizeText(24),
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
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 |
Property | Type | Description |
---|---|---|
hasNotch | function | returns if the device has notch or not |
isIPhoneNotchFamily | function | returns if it the iPhone has in the notch family (iPhone X, 11, 12 Series) |
isIPhoneXFamily | function | returns if it the iPhone has in the notch family (iPhone X, 11, 12 Series) (Backward compatibility) |
isIPhoneSE | function(dim) | returns if device is iPhone SE or not |
isIPhoneX | function(dim) | returns if device is iPhone X or not |
isIPhoneXr | function(dim) | returns if device is iPhone Xr or not |
isIPhoneXs | function(dim) | returns if device is iPhone Xs or not |
isIPhoneXsMax | function(dim) | returns if device is iPhone Xs Max or not |
isIPhone11 | function(dim) | returns if device is iPhone 11 or not |
isIPhone11Pro | function(dim) | returns if device is iPhone 11 Pro or not |
isIPhone11ProMax | function(dim) | returns if device is iPhone 11 Pro Max or not |
isIPhone12 | function(dim) | returns if device is iPhone 12 or not |
isIPhone12Pro | function(dim) | returns if device is iPhone 12 Pro or not |
isIPhone12ProMax | function(dim) | returns if device is iPhone 12 Pro Max or not |
isIPhone12Mini | function(dim) | returns if device is iPhone 12 Mini or not |
Property | Type | Description |
---|---|---|
normalize | function(number) | returns the normalized font size |
Property | Type | Description |
---|---|---|
numberFormat | function(value, locale, options) | returns the number formatted font with its given parameters |
Author: WrathChaos
Source Code: https://github.com/WrathChaos/react-native-helpers
#react #react-native #mobile-apps