@freakycoder/react-native-helpers
Version:
All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use
184 lines (139 loc) • 8.95 kB
Markdown
<img alt="React Native Helpers" src="assets/logo.png" width="1050"/>
[](https://github.com/WrathChaos/react-native-helpers)
<b><i>All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use</i></b>
[](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
[](https://www.npmjs.com/package/@freakycoder/react-native-helpers)
[](https://opensource.org/licenses/MIT)
<p align="center">
<img alt="React Native Helpers" src="https://github.com/WrathChaos/react-native-helpers/blob/master/assets/Screenshots/example.png" width="49.7%" />
</p>
## Installation
Add the dependency:
### React Native
```bash
npm i @freakycoder/react-native-helpers
```
## DeviceInfo Usage
```tsx
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
```ts
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
```ts
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
```ts
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.
```ts
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 |
| 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
- [x] ~~LICENSE~~
- [x] ~~Typescript~~
- [x] ~~iPhone Series Support~~
- [x] ~~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.