Skip to content

Commit c52ba5b

Browse files
WrathChaosWrathChaos
committed
feat: dynamic island and iphone 14 series
1 parent 9115995 commit c52ba5b

File tree

3 files changed

+80
-130
lines changed

3 files changed

+80
-130
lines changed

‎README.md

Lines changed: 17 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -50,27 +50,23 @@ import {
5050

5151
```js
5252
import {
53-
isIPhoneNotchFamily,
54-
isIPhone11,
55-
isIPhone12,
56-
isIPhone12Mini,
57-
isIPhone12ProMax,
53+
getStatusBarHeight,
5854
hasNotch,
59-
isIPhoneX,
60-
isIPhoneXr,
61-
isIPhoneXs,
62-
isIPhoneXsMax,
55+
hasNotchOnly,
56+
hasDynamicIsland,
6357
getStatusBarHeight,
6458
} from "@freakycoder/react-native-helpers";
6559

6660
<View>
6761
<Container
6862
title="hasNotch?"
69-
subtitle={hasNotch() ? "iPhone X Family" : "iPhone Family"}
63+
subtitle={hasNotch() ? "Has Notch" : "NOT notch"}
7064
/>
7165
<Container
72-
title="isIPhoneXsMax?"
73-
subtitle={isIPhoneXsMax(Screen) ? "iPhone XsMax" : "NOT iPhone XsMax"}
66+
title="hasDynamicIsland?"
67+
subtitle={
68+
hasDynamicIsland(Screen) ? "Has Dynamic Island" : "NOT Dynamic Island"
69+
}
7470
/>
7571
<Container title="getStatusBarHeight?" subtitle={getStatusBarHeight()} />
7672
</View>;
@@ -122,23 +118,14 @@ import { numberFormat } from "@freakycoder/react-native-helpers";
122118
123119
## DeviceInfo Props
124120
125-
| Property | Type | Description |
126-
| ------------------- | :-----------: | --------------------------------------------------------------------------------------------------- |
127-
| hasNotch | function | returns if the device has notch or not |
128-
| isIPhoneNotchFamily | function | returns if it the iPhone has in the notch family (iPhone X, 11, 12 Series) |
129-
| isIPhoneXFamily | function | returns if it the iPhone has in the notch family (iPhone X, 11, 12 Series) (Backward compatibility) |
130-
| isIPhoneSE | function(dim) | returns if device is iPhone SE or not |
131-
| isIPhoneX | function(dim) | returns if device is iPhone X or not |
132-
| isIPhoneXr | function(dim) | returns if device is iPhone Xr or not |
133-
| isIPhoneXs | function(dim) | returns if device is iPhone Xs or not |
134-
| isIPhoneXsMax | function(dim) | returns if device is iPhone Xs Max or not |
135-
| isIPhone11 | function(dim) | returns if device is iPhone 11 or not |
136-
| isIPhone11Pro | function(dim) | returns if device is iPhone 11 Pro or not |
137-
| isIPhone11ProMax | function(dim) | returns if device is iPhone 11 Pro Max or not |
138-
| isIPhone12 | function(dim) | returns if device is iPhone 12 or not |
139-
| isIPhone12Pro | function(dim) | returns if device is iPhone 12 Pro or not |
140-
| isIPhone12ProMax | function(dim) | returns if device is iPhone 12 Pro Max or not |
141-
| isIPhone12Mini | function(dim) | returns if device is iPhone 12 Mini or not |
121+
getStatusBarHeight, hasNotch, hasNotchOnly, hasDynamicIsland
122+
123+
| Property | Type | Description |
124+
| ------------------ | :------: | ----------------------------------------------------------------------------------------- |
125+
| hasNotch | function | returns if the device has notch (returns true for dynamic island!) |
126+
| hasNotchOnly | function | returns if the device has notch only, it does not detect if the device has dynamic island |
127+
| hasDynamicIsland | function | returns if the device has dynamic island |
128+
| getStatusBarHeight | number | returns status bar height of the device |
142129
143130
## Normalize Text Props
144131
@@ -157,37 +144,10 @@ import { numberFormat } from "@freakycoder/react-native-helpers";
157144
- [x] ~~LICENSE~~
158145
- [x] ~~Typescript~~
159146
- [x] ~~iPhone Series Support~~
147+
- [x] ~~Dynamic Island~~
160148
- [ ] More custom text helpers
161149
- [ ] Write an article about the lib on Medium
162150
163-
# Changelog
164-
165-
## [1.0.0](https://github.com/WrathChaos/react-native-helpers/tree/1.0.0) (2020-10-31)
166-
167-
## ⚠️ Breaking Change ⚠️
168-
169-
- `isIPhoneXFamily` is renamed to `isIPhoneNotchFamily`
170-
171-
[Full Changelog](https://github.com/WrathChaos/react-native-helpers/compare/0.1.3...1.0.0)
172-
173-
## [0.1.3](https://github.com/WrathChaos/react-native-helpers/tree/0.1.3) (2020-03-15)
174-
175-
[Full Changelog](https://github.com/WrathChaos/react-native-helpers/compare/0.1.2...0.1.3)
176-
177-
## [0.1.2](https://github.com/WrathChaos/react-native-helpers/tree/0.1.2) (2019-12-16)
178-
179-
[Full Changelog](https://github.com/WrathChaos/react-native-helpers/compare/0.1.1...0.1.2)
180-
181-
## [0.1.1](https://github.com/WrathChaos/react-native-helpers/tree/0.1.1) (2019-12-16)
182-
183-
[Full Changelog](https://github.com/WrathChaos/react-native-helpers/compare/0.0.2...0.1.1)
184-
185-
## [0.0.2](https://github.com/WrathChaos/react-native-helpers/tree/0.0.2) (2019-07-05)
186-
187-
[Full Changelog](https://github.com/WrathChaos/react-native-helpers/compare/0ec4a22f68b857dfbd311d9b9dd1f9e3926bd1c3...0.0.2)
188-
189-
\* _This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)_
190-
191151
## Author
192152
193153
FreakyCoder, kurayogun@gmail.com

‎lib/helpers/notch/Notch.ts

Lines changed: 62 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,95 @@
11
import { Dimensions, ScaledSize, Platform, StatusBar } from "react-native";
22
const DEFAULT_STATUSBAR_HEIGHT = 30;
33
// ? iPhone X Family
4-
// iPhone X Dimension
54
const iPhoneX_HEIGHT = 812;
6-
// iPhone Xr Dimension
7-
const iPhoneXr_HEIGHT = 896;
8-
// iPhone XS Dimension
9-
const iPhoneXs_HEIGHT = 896;
10-
// iPhone XsMax Dimension
115
const iPhoneXsMax_HEIGHT = 896;
12-
// iPhone SE Dimension
136
const iPhoneSE_HEIGHT = 568;
14-
// ? iPhone 11 Family
15-
// iPhone 11 Dimension
16-
const iPhone11_HEIGHT = 896;
17-
// iPhone 11 Pro Dimension
187
const iPhone11Pro_HEIGHT = 812;
19-
// iPhone 11 Pro Max Dimension
208
const iPhone11ProMax_HEIGHT = 896;
21-
// ? iPhone 12 Family
22-
// iPhone 12 Dimension
23-
const iPhone12_HEIGHT = 844;
24-
// iPhone 12 Pro Dimension
25-
const iPhone12Pro_HEIGHT = 844;
26-
// iPhone 12 Pro Max Dimension
279
const iPhone12ProMax_HEIGHT = 926;
28-
// iPhone 12 Mini Dimension
2910
const iPhone12Mini_HEIGHT = 812;
30-
31-
/**
32-
* This and hasNotch functions are the same,
33-
* just want to make two functions with different names
34-
* hasNotch is more accurate name
35-
*/
36-
37-
const isIPhoneNotchFamily = (): boolean => {
38-
return detection();
39-
};
40-
41-
const isIPhoneXFamily = (): boolean => {
42-
return detection();
43-
};
44-
45-
const hasNotch = (): boolean => {
46-
return detection();
47-
};
11+
const iPhone14_HEIGHT = 844;
12+
const iPhone14Plus_HEIGHT = 926;
13+
const iPhone14Pro_HEIGHT = 852;
14+
const iPhone14ProMax_HEIGHT = 932;
4815

4916
const isIPhoneSE = (dim: ScaledSize) => dim.height === iPhoneSE_HEIGHT;
50-
// ? iPhone X Family
5117
const isIPhoneX = (dim: ScaledSize) => dim.height === iPhoneX_HEIGHT;
52-
const isIPhoneXr = (dim: ScaledSize) => dim.height === iPhoneXr_HEIGHT;
53-
const isIPhoneXs = (dim: ScaledSize) => dim.height === iPhoneXs_HEIGHT;
5418
const isIPhoneXsMax = (dim: ScaledSize) => dim.height === iPhoneXsMax_HEIGHT;
55-
// ? iPhone 11 Family
56-
const isIPhone11 = (dim: ScaledSize) => dim.height === iPhone11_HEIGHT;
19+
5720
const isIPhone11Pro = (dim: ScaledSize) => dim.height === iPhone11Pro_HEIGHT;
5821
const isIPhone11ProMax = (dim: ScaledSize) =>
5922
dim.height === iPhone11ProMax_HEIGHT;
60-
// ? iPhone 12 Family
61-
const isIPhone12 = (dim: ScaledSize) => dim.height === iPhone12_HEIGHT;
62-
const isIPhone12Pro = (dim: ScaledSize) => dim.height === iPhone12Pro_HEIGHT;
23+
6324
const isIPhone12ProMax = (dim: ScaledSize) =>
6425
dim.height === iPhone12ProMax_HEIGHT;
6526
const isIPhone12Mini = (dim: ScaledSize) => dim.height === iPhone12Mini_HEIGHT;
6627

28+
const isIPhone14 = (dim: ScaledSize) => dim.height === iPhone14_HEIGHT;
29+
const isIPhone14Plus = (dim: ScaledSize) => dim.height === iPhone14Plus_HEIGHT;
30+
const isIPhone14Pro = (dim: ScaledSize) => dim.height === iPhone14Pro_HEIGHT;
31+
const isIPhone14ProMax = (dim: ScaledSize) =>
32+
dim.height === iPhone14ProMax_HEIGHT;
33+
6734
const detection = (): boolean => {
6835
const dim = Dimensions.get("window");
6936
return (
7037
Platform.OS === "ios" &&
7138
!Platform.isPad &&
72-
!Platform.isTVOS &&
73-
(isIPhoneX(dim) ||
74-
isIPhoneXr(dim) ||
75-
isIPhoneXs(dim) ||
76-
isIPhoneXsMax(dim) ||
77-
isIPhone11(dim) ||
39+
!Platform.isTV &&
40+
(isIPhone14(dim) ||
41+
isIPhone14Pro(dim) ||
42+
isIPhone14ProMax(dim) ||
43+
isIPhone14Plus(dim) ||
44+
isIPhone12ProMax(dim) ||
45+
isIPhone12Mini(dim) ||
46+
isIPhone11ProMax(dim) ||
7847
isIPhone11Pro(dim) ||
48+
isIPhoneSE(dim) ||
49+
isIPhoneX(dim) ||
50+
isIPhoneXsMax(dim))
51+
);
52+
};
53+
54+
const detectionNotchOnly = (): boolean => {
55+
const dim = Dimensions.get("window");
56+
return (
57+
Platform.OS === "ios" &&
58+
!Platform.isPad &&
59+
!Platform.isTV &&
60+
(isIPhone14Plus(dim) ||
61+
isIPhone14(dim) ||
62+
isIPhone12ProMax(dim) ||
63+
isIPhone12Mini(dim) ||
7964
isIPhone11ProMax(dim) ||
80-
isIPhone12(dim) ||
81-
isIPhone12Pro(dim) ||
82-
isIPhone12ProMax(dim))
65+
isIPhone11Pro(dim) ||
66+
isIPhoneXsMax(dim) ||
67+
isIPhoneSE(dim) ||
68+
isIPhoneX(dim))
8369
);
8470
};
8571

72+
const detectionForDynamicIsland = (): boolean => {
73+
const dim = Dimensions.get("window");
74+
return (
75+
Platform.OS === "ios" &&
76+
!Platform.isPad &&
77+
!Platform.isTV &&
78+
(isIPhone14Pro(dim) || isIPhone14ProMax(dim))
79+
);
80+
};
81+
82+
/**
83+
* This and hasNotch functions are the same,
84+
* just want to make two functions with different names
85+
* hasNotch is more accurate name
86+
*/
87+
const hasNotch = (): boolean => detection();
88+
89+
const hasNotchOnly = (): boolean => detectionNotchOnly();
90+
91+
const hasDynamicIsland = (): boolean => detectionForDynamicIsland();
92+
8693
const getStatusBarHeight = (): number => {
8794
return (
8895
Platform.select({
@@ -92,21 +99,4 @@ const getStatusBarHeight = (): number => {
9299
);
93100
};
94101

95-
export {
96-
getStatusBarHeight,
97-
hasNotch,
98-
isIPhoneNotchFamily,
99-
isIPhoneXFamily,
100-
isIPhoneSE,
101-
isIPhoneX,
102-
isIPhoneXr,
103-
isIPhoneXs,
104-
isIPhoneXsMax,
105-
isIPhone11,
106-
isIPhone11Pro,
107-
isIPhone11ProMax,
108-
isIPhone12,
109-
isIPhone12Pro,
110-
isIPhone12ProMax,
111-
isIPhone12Mini,
112-
};
102+
export { getStatusBarHeight, hasNotch, hasNotchOnly, hasDynamicIsland };

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freakycoder/react-native-helpers",
3-
"version": "1.0.2",
3+
"version": "2.0.0",
44
"description": "All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use",
55
"keywords": [
66
"ios",

0 commit comments

Comments
 (0)