Permalink
Browse files

DeviceInfo.isIPhoneX_deprecated: ugly and temporary way to fix your U…

…I on iPhone X

Summary:
If you are a product developer and you need to fix your app's issues related to iPhone X limitations asap,
you can temporary use `DeviceInfo.isIPhoneX_deprecated`.
You can, but you should not. Please consider use new <SafeAreaView>.
This prop was initially named so ugly because we are trying to discourage the community to use it.
However, we understand that sometimes we need a "band-aid" to prevent our apps bleeding.
Note: This prop (DeviceInfo.isIPhoneX_deprecated) will be removed completely after 06/18.

Reviewed By: fkgozali

Differential Revision: D5946329

fbshipit-source-id: 5d6dcaf0e2d175327d59cde4b5ec2e01cd77ec70
  • Loading branch information...
shergin authored and facebook-github-bot committed Oct 3, 2017
1 parent a16ef18 commit 33f4779ed8cbab765e9a3a4f864c23133d3c754e
Showing with 57 additions and 7 deletions.
  1. +33 −4 RNTester/js/SafeAreaViewExample.js
  2. +24 −3 React/Modules/RCTDeviceInfo.m
@@ -12,9 +12,14 @@
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {Button, Modal, SafeAreaView, StyleSheet, View} = ReactNative;
const Button = require('Button');
const DeviceInfo = require('DeviceInfo');
const Modal = require('Modal');
const React = require('react');
const SafeAreaView = require('SafeAreaView');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const View = require('View');
exports.displayName = (undefined: ?string);
exports.framework = 'React';
@@ -62,13 +67,37 @@ class SafeAreaViewExample extends React.Component<
}
}
class IsIPhoneXExample extends React.Component<{}> {
render() {
return (
<View>
<Text>
Is this an iPhone X:{' '}
{DeviceInfo.isIPhoneX_deprecated
? 'Yeah!'
: 'Nope. (Or `isIPhoneX_deprecated` was already removed.)'}
</Text>
</View>
);
}
}
exports.examples = [
{
title: 'SafeAreaViewExample',
title: '<SafeAreaView> Example',
description:
'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.',
render: () => <SafeAreaViewExample />,
},
{
title: 'isIPhoneX_deprecated Example',
description:
'`DeviceInfo.isIPhoneX_deprecated` returns true only on iPhone X. ' +
'Note: This prop is deprecated and will be removed right after June 01, 2018. ' +
'Please use this only for a quick and temporary solution. ' +
'Use <SafeAreaView> instead.',
render: () => <IsIPhoneXExample />,
},
];
var styles = StyleSheet.create({
@@ -52,6 +52,22 @@ - (void)setBridge:(RCTBridge *)bridge
#endif
}
static BOOL RCTIsIPhoneX() {
static BOOL isIPhoneX = NO;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
RCTAssertMainQueue();
isIPhoneX = CGSizeEqualToSize(
[UIScreen mainScreen].nativeBounds.size,
CGSizeMake(1125, 2436)
);
});
return isIPhoneX;
}
static NSDictionary *RCTExportedDimensions(RCTBridge *bridge)
{
RCTAssertMainQueue();
@@ -80,9 +96,14 @@ - (void)invalidate
- (NSDictionary<NSString *, id> *)constantsToExport
{
NSMutableDictionary<NSString *, NSDictionary *> *constants = [NSMutableDictionary new];
constants[@"Dimensions"] = RCTExportedDimensions(_bridge);
return constants;
return @{
@"Dimensions": RCTExportedDimensions(_bridge),
// Note:
// This prop is deprecated and will be removed right after June 01, 2018.
// Please use this only for a quick and temporary solution.
// Use <SafeAreaView> instead.
@"isIPhoneX_deprecated": @(RCTIsIPhoneX()),
};
}
- (void)didReceiveNewContentSizeMultiplier

0 comments on commit 33f4779

Please sign in to comment.