@freakycoder/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

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

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

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

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 |

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
• 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.