Skip to content

Commit 9d57652

Browse files
committed
WIP: correct iPhone X insets
1 parent 02e7a60 commit 9d57652

File tree

8 files changed

+1100
-1091
lines changed

8 files changed

+1100
-1091
lines changed

README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44

55
Cross-platform [action sheet](https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/) component with powerful customization options (including custom views) and built-in support for sheet chaining.
66

7+
## Installation
8+
9+
```
10+
`yarn add @delightfulstudio/react-native-power-action-sheet @delightfulstudio/react-native-safe-area-insets
11+
```
12+
[Manually link](https://github.com/DelightfulStudio/react-native-safe-area-insets#manual-linking) `@delightfulstudio/react-native-safe-area-insets`
13+
714
## Examples
815

916
To check out examples:

example/ios/power_action_sheet_example.xcodeproj/project.pbxproj

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
3838
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
3939
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
40+
9610B3CF214B70D700064F01 /* libRNSafeAreaInsets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9610B3CE214B70B200064F01 /* libRNSafeAreaInsets.a */; };
4041
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
4142
/* End PBXBuildFile section */
4243

@@ -307,6 +308,13 @@
307308
remoteGlobalIDString = 58B5119B1A9E6C1200147676;
308309
remoteInfo = RCTText;
309310
};
311+
9610B3CD214B70B200064F01 /* PBXContainerItemProxy */ = {
312+
isa = PBXContainerItemProxy;
313+
containerPortal = 9610B3A4214B70B200064F01 /* RNSafeAreaInsets.xcodeproj */;
314+
proxyType = 2;
315+
remoteGlobalIDString = 9610B20A214B4D6900064F01;
316+
remoteInfo = RNSafeAreaInsets;
317+
};
310318
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
311319
isa = PBXContainerItemProxy;
312320
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
@@ -342,6 +350,7 @@
342350
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
343351
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
344352
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
353+
9610B3A4214B70B200064F01 /* RNSafeAreaInsets.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNSafeAreaInsets.xcodeproj; path = "../../node_modules/@delightfulstudio/react-native-safe-area-insets/ios/RNSafeAreaInsets.xcodeproj"; sourceTree = "<group>"; };
345354
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
346355
/* End PBXFileReference section */
347356

@@ -358,6 +367,7 @@
358367
isa = PBXFrameworksBuildPhase;
359368
buildActionMask = 2147483647;
360369
files = (
370+
9610B3CF214B70D700064F01 /* libRNSafeAreaInsets.a in Frameworks */,
361371
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
362372
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
363373
146834051AC3E58100842450 /* libReact.a in Frameworks */,
@@ -545,6 +555,7 @@
545555
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
546556
isa = PBXGroup;
547557
children = (
558+
9610B3A4214B70B200064F01 /* RNSafeAreaInsets.xcodeproj */,
548559
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
549560
146833FF1AC3E56700842450 /* React.xcodeproj */,
550561
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
@@ -578,6 +589,7 @@
578589
00E356EF1AD99517003FC87E /* exampleTests */,
579590
83CBBA001A601CBA00E9B192 /* Products */,
580591
2D16E6871FA4F8E400B85C8A /* Frameworks */,
592+
9610B329214B6C8A00064F01 /* Recovered References */,
581593
);
582594
indentWidth = 2;
583595
sourceTree = "<group>";
@@ -595,6 +607,21 @@
595607
name = Products;
596608
sourceTree = "<group>";
597609
};
610+
9610B329214B6C8A00064F01 /* Recovered References */ = {
611+
isa = PBXGroup;
612+
children = (
613+
);
614+
name = "Recovered References";
615+
sourceTree = "<group>";
616+
};
617+
9610B3A5214B70B200064F01 /* Products */ = {
618+
isa = PBXGroup;
619+
children = (
620+
9610B3CE214B70B200064F01 /* libRNSafeAreaInsets.a */,
621+
);
622+
name = Products;
623+
sourceTree = "<group>";
624+
};
598625
ADBDB9201DFEBF0600ED6528 /* Products */ = {
599626
isa = PBXGroup;
600627
children = (
@@ -685,7 +712,7 @@
685712
83CBB9F71A601CBA00E9B192 /* Project object */ = {
686713
isa = PBXProject;
687714
attributes = {
688-
LastUpgradeCheck = 0610;
715+
LastUpgradeCheck = 610;
689716
ORGANIZATIONNAME = Facebook;
690717
TargetAttributes = {
691718
00E356ED1AD99517003FC87E = {
@@ -763,6 +790,10 @@
763790
ProductGroup = 146834001AC3E56700842450 /* Products */;
764791
ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
765792
},
793+
{
794+
ProductGroup = 9610B3A5214B70B200064F01 /* Products */;
795+
ProjectRef = 9610B3A4214B70B200064F01 /* RNSafeAreaInsets.xcodeproj */;
796+
},
766797
);
767798
projectRoot = "";
768799
targets = (
@@ -1027,6 +1058,13 @@
10271058
remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
10281059
sourceTree = BUILT_PRODUCTS_DIR;
10291060
};
1061+
9610B3CE214B70B200064F01 /* libRNSafeAreaInsets.a */ = {
1062+
isa = PBXReferenceProxy;
1063+
fileType = archive.ar;
1064+
path = libRNSafeAreaInsets.a;
1065+
remoteRef = 9610B3CD214B70B200064F01 /* PBXContainerItemProxy */;
1066+
sourceTree = BUILT_PRODUCTS_DIR;
1067+
};
10301068
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
10311069
isa = PBXReferenceProxy;
10321070
fileType = archive.ar;
@@ -1172,9 +1210,11 @@
11721210
"DEBUG=1",
11731211
"$(inherited)",
11741212
);
1213+
HEADER_SEARCH_PATHS = "$(inherited)";
11751214
INFOPLIST_FILE = exampleTests/Info.plist;
11761215
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
11771216
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
1217+
LIBRARY_SEARCH_PATHS = "$(inherited)";
11781218
OTHER_LDFLAGS = (
11791219
"-ObjC",
11801220
"-lc++",
@@ -1189,9 +1229,11 @@
11891229
buildSettings = {
11901230
BUNDLE_LOADER = "$(TEST_HOST)";
11911231
COPY_PHASE_STRIP = NO;
1232+
HEADER_SEARCH_PATHS = "$(inherited)";
11921233
INFOPLIST_FILE = exampleTests/Info.plist;
11931234
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
11941235
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
1236+
LIBRARY_SEARCH_PATHS = "$(inherited)";
11951237
OTHER_LDFLAGS = (
11961238
"-ObjC",
11971239
"-lc++",
@@ -1207,6 +1249,7 @@
12071249
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
12081250
CURRENT_PROJECT_VERSION = 1;
12091251
DEAD_CODE_STRIPPING = NO;
1252+
HEADER_SEARCH_PATHS = "$(inherited)";
12101253
INFOPLIST_FILE = example/Info.plist;
12111254
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
12121255
OTHER_LDFLAGS = (
@@ -1225,6 +1268,7 @@
12251268
buildSettings = {
12261269
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
12271270
CURRENT_PROJECT_VERSION = 1;
1271+
HEADER_SEARCH_PATHS = "$(inherited)";
12281272
INFOPLIST_FILE = example/Info.plist;
12291273
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
12301274
OTHER_LDFLAGS = (
@@ -1250,8 +1294,10 @@
12501294
DEBUG_INFORMATION_FORMAT = dwarf;
12511295
ENABLE_TESTABILITY = YES;
12521296
GCC_NO_COMMON_BLOCKS = YES;
1297+
HEADER_SEARCH_PATHS = "$(inherited)";
12531298
INFOPLIST_FILE = "example-tvOS/Info.plist";
12541299
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
1300+
LIBRARY_SEARCH_PATHS = "$(inherited)";
12551301
OTHER_LDFLAGS = (
12561302
"-ObjC",
12571303
"-lc++",
@@ -1276,8 +1322,10 @@
12761322
COPY_PHASE_STRIP = NO;
12771323
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
12781324
GCC_NO_COMMON_BLOCKS = YES;
1325+
HEADER_SEARCH_PATHS = "$(inherited)";
12791326
INFOPLIST_FILE = "example-tvOS/Info.plist";
12801327
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
1328+
LIBRARY_SEARCH_PATHS = "$(inherited)";
12811329
OTHER_LDFLAGS = (
12821330
"-ObjC",
12831331
"-lc++",
@@ -1301,8 +1349,10 @@
13011349
DEBUG_INFORMATION_FORMAT = dwarf;
13021350
ENABLE_TESTABILITY = YES;
13031351
GCC_NO_COMMON_BLOCKS = YES;
1352+
HEADER_SEARCH_PATHS = "$(inherited)";
13041353
INFOPLIST_FILE = "example-tvOSTests/Info.plist";
13051354
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
1355+
LIBRARY_SEARCH_PATHS = "$(inherited)";
13061356
OTHER_LDFLAGS = (
13071357
"-ObjC",
13081358
"-lc++",
@@ -1326,8 +1376,10 @@
13261376
COPY_PHASE_STRIP = NO;
13271377
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
13281378
GCC_NO_COMMON_BLOCKS = YES;
1379+
HEADER_SEARCH_PATHS = "$(inherited)";
13291380
INFOPLIST_FILE = "example-tvOSTests/Info.plist";
13301381
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
1382+
LIBRARY_SEARCH_PATHS = "$(inherited)";
13311383
OTHER_LDFLAGS = (
13321384
"-ObjC",
13331385
"-lc++",

example/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"run-android": "react-native run-android"
1010
},
1111
"devDependencies": {
12+
"@delightfulstudio/react-native-safe-area-insets": "link:../node_modules/@delightfulstudio/react-native-safe-area-insets",
1213
"casual-browserify": "^1.5.19-2",
1314
"react-native": "link:../node_modules/react-native",
1415
"react-native-wheel-datepicker": "^2.2.3"

example/yarn.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,10 @@
432432
lodash "^4.17.10"
433433
to-fast-properties "^2.0.0"
434434

435+
"@delightfulstudio/react-native-safe-area-insets@link:../node_modules/@delightfulstudio/react-native-safe-area-insets":
436+
version "0.0.0"
437+
uid ""
438+
435439
abbrev@1:
436440
version "1.1.1"
437441
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"

lib/power-action-sheet-styles.js

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Dimensions, Platform, StyleSheet } from "react-native"
1+
import { Platform, StyleSheet } from "react-native"
2+
3+
import { currentInsets } from "@delightfulstudio/react-native-safe-area-insets";
24

35
const hairlineWidth = StyleSheet.hairlineWidth;
46

@@ -97,9 +99,7 @@ const ios = {
9799
},
98100

99101
sheet: {
100-
backgroundColor: "transparent",
101-
paddingHorizontal: 10,
102-
paddingBottom: 10
102+
backgroundColor: "transparent"
103103
},
104104

105105
control: {
@@ -112,14 +112,6 @@ const ios = {
112112

113113
};
114114

115-
const iphonex = {
116-
117-
sheet: {
118-
paddingBottom: 34
119-
}
120-
121-
};
122-
123115
const android = {
124116

125117
topBorder: {},
@@ -144,26 +136,13 @@ const android = {
144136

145137
};
146138

147-
148-
const platformStyle = () => {
149-
if ( Platform.OS !== "ios" )
150-
return android;
151-
152-
const { height, width } = Dimensions.get( "window" );
153-
154-
if ( height === 812 || width === 812 )
155-
copyStyles( iphonex, ios );
156-
157-
return ios;
158-
};
159-
160-
161-
const platform = platformStyle();
139+
const platform = Platform.select( {
140+
ios,
141+
android
142+
} );
162143

163144
const _default = copyStyles( platform, copyStyles( base, {} ) );
164145

165-
const defaultStyles = StyleSheet.create( _default );
166-
167146
function copyStyles( source, target ) {
168147
Object.keys( source )
169148
.forEach( key => {
@@ -172,15 +151,27 @@ function copyStyles( source, target ) {
172151
return target;
173152
}
174153

175-
const createStyles = ( ...customStyles ) => {
176-
const styles = customStyles.filter( style => !!style );
177-
if ( !styles.length )
178-
return defaultStyles;
154+
export const insetsStyle = async () => {
155+
const insets = await currentInsets();
156+
const result = {
157+
paddingLeft: insets.left,
158+
paddingRight: insets.right,
159+
paddingTop: insets.top,
160+
paddingBottom: insets.bottom,
161+
};
162+
if ( Platform.OS === "ios" ) {
163+
result.paddingBottom = result.paddingBottom || 10;
164+
result.paddingLeft = result.paddingLeft || 10;
165+
result.paddingRight = result.paddingRight || 10;
166+
}
167+
168+
return result;
169+
};
179170

171+
export const createStyles = ( ...customStyles ) => {
172+
const styles = [ ...customStyles.filter( style => !!style ) ];
180173
return StyleSheet.create( styles.reduce(
181174
( result, style ) => copyStyles( style, result ),
182175
_default
183176
) );
184177
};
185-
186-
export default createStyles;

0 commit comments

Comments
 (0)