Package Exports

@freakycoder/react-native-helpers

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

React Native Helpers

Installation

Add the dependency:

React Native

npm i @freakycoder/react-native-helpers

Peer Dependencies

Zero Dependency

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 (iPhoneX & iPhone 11 & iPhone 12 & iPhone SE & StatusBar) Usage

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>;

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

DeviceInfo Props

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