Skip to content
Permalink
Browse files

PixelRatio.pixel()

Summary:
This implements #5073. It adds a static method `PixelRatio.pixel()` which returns the smallest drawable line width, primarily for use in styles.

It also updates the example apps to use the new function.
Closes #5076

Reviewed By: svcscm

Differential Revision: D2799849

Pulled By: nicklockwood

fb-gh-sync-id: b83a77790601fe882affbf65531114e7c5cf4bdf
  • Loading branch information...
corbt authored and facebook-github-bot-5 committed Jan 15, 2016
1 parent 78c6e41 commit cd89016ee7168bb6971f800779e0878e9a70206f
@@ -18,7 +18,6 @@
var React = require('react-native');
var {
Image,
PixelRatio,
Platform,
StyleSheet,
Text,
@@ -99,8 +98,7 @@ var styles = StyleSheet.create({
},
cellBorder: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
// Trick to get the thinest line the device can display
height: 1 / PixelRatio.get(),
height: StyleSheet.hairlineWidth,
marginLeft: 4,
},
});
@@ -18,7 +18,6 @@
var React = require('react-native');
var {
Image,
PixelRatio,
ScrollView,
StyleSheet,
Text,
@@ -152,7 +151,7 @@ var styles = StyleSheet.create({
},
separator: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
height: 1 / PixelRatio.get(),
height: StyleSheet.hairlineWidth,
marginVertical: 10,
},
castTitle: {
@@ -15,7 +15,6 @@

var React = require('react-native');
var {
PixelRatio,
Navigator,
StyleSheet,
ScrollView,
@@ -131,7 +130,7 @@ var styles = StyleSheet.create({
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
buttonText: {
@@ -16,7 +16,6 @@
var React = require('react-native');
var {
Navigator,
PixelRatio,
StyleSheet,
ScrollView,
TabBarIOS,
@@ -185,7 +184,7 @@ var styles = StyleSheet.create({
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
buttonText: {
@@ -16,7 +16,6 @@

var React = require('react-native');
var {
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
@@ -164,7 +163,7 @@ var styles = StyleSheet.create({
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
buttonText: {
@@ -16,7 +16,6 @@
var React = require('react-native');
var {
Navigator,
PixelRatio,
ScrollView,
StyleSheet,
Text,
@@ -190,7 +189,7 @@ var styles = StyleSheet.create({
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
buttonText: {
@@ -20,7 +20,6 @@ var ViewExample = require('./ViewExample');
var createExamplePage = require('./createExamplePage');
var {
AlertIOS,
PixelRatio,
ScrollView,
StyleSheet,
Text,
@@ -227,7 +226,7 @@ var styles = StyleSheet.create({
},
line: {
backgroundColor: '#bbbbbb',
height: 1 / PixelRatio.get(),
height: StyleSheet.hairlineWidth,
},
row: {
backgroundColor: 'white',
@@ -236,7 +235,7 @@ var styles = StyleSheet.create({
paddingVertical: 15,
},
separator: {
height: 1 / PixelRatio.get(),
height: StyleSheet.hairlineWidth,
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
@@ -229,15 +229,15 @@ var styles = StyleSheet.create({
logBox: {
padding: 20,
margin: 10,
borderWidth: 1 / PixelRatio.get(),
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
eventLogBox: {
padding: 10,
margin: 10,
height: 120,
borderWidth: 1 / PixelRatio.get(),
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
@@ -18,7 +18,6 @@
var React = require('react-native');
var {
ListView,
PixelRatio,
StyleSheet,
Text,
TextInput,
@@ -159,7 +158,7 @@ var styles = StyleSheet.create({
paddingVertical: 8,
},
separator: {
height: 1 / PixelRatio.get(),
height: StyleSheet.hairlineWidth,
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
@@ -17,7 +17,6 @@

var React = require('react-native');
var {
PixelRatio,
ProgressBarAndroid,
StyleSheet,
Text,
@@ -312,7 +311,7 @@ var styles = StyleSheet.create({
flexDirection: 'row',
paddingVertical: 8,
alignItems: 'center',
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'grey',
},
textButton: {
@@ -21,7 +21,6 @@ var {
CameraRoll,
Image,
LinkingIOS,
PixelRatio,
ProgressViewIOS,
StyleSheet,
Text,
@@ -343,7 +342,7 @@ var styles = StyleSheet.create({
flexDirection: 'row',
paddingVertical: 8,
alignItems: 'center',
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'grey',
},
photoLabel: {
@@ -11,9 +11,16 @@
*/
'use strict';

var PixelRatio = require('PixelRatio');
var StyleSheetRegistry = require('StyleSheetRegistry');
var StyleSheetValidation = require('StyleSheetValidation');
var flattenStyle = require('flattenStyle');

var flatten = require('flattenStyle');

var hairlineWidth = PixelRatio.roundToNearestPixel(0.4);
if (hairlineWidth === 0) {
hairlineWidth = 1 / PixelRatio.get();
}

/**
* A StyleSheet is an abstraction similar to CSS StyleSheets
@@ -59,20 +66,37 @@ var flattenStyle = require('flattenStyle');
* - It also allows to send the style only once through the bridge. All
* subsequent uses are going to refer an id (not implemented yet).
*/
class StyleSheet {
static flatten: typeof flattenStyle;
module.exports = {
/**
* This is defined as the width of a thin line on the platform. It can be
* used as the thickness of a border or division between two elements.
* Example:
* ```
* {
* borderBottomColor: '#bbb',
* borderBottomWidth: StyleSheet.hairlineWidth
* }
* ```
*
* This constant will always be a round number of pixels (so a line defined
* by it look crisp) and will try to match the standard width of a thin line
* on the underlying platform. However, you should not rely on it being a
* constant size, because on different platforms and screen densities its
* value may be calculated differently.
*/
hairlineWidth,

flatten,

static create(obj: {[key: string]: any}): {[key: string]: number} {
/**
* Creates a StyleSheet style reference from the given object.
*/
create(obj: {[key: string]: any}): {[key: string]: number} {
var result = {};
for (var key in obj) {
StyleSheetValidation.validateStyle(key, obj);
result[key] = StyleSheetRegistry.registerStyle(obj[key]);
}
return result;
}
}

/* TODO(brentvatne) docs are needed for this */
StyleSheet.flatten = flattenStyle;

module.exports = StyleSheet;
};
@@ -16,20 +16,6 @@ var Dimensions = require('Dimensions');
/**
* PixelRatio class gives access to the device pixel density.
*
* There are a few use cases for using PixelRatio:
*
* ### Displaying a line that's as thin as the device permits
*
* A width of 1 is actually pretty thick on devices with high pixel density
* (such as iPhone 4+ and many Android devices), we can make one that's
* thinner using a width of `1 / PixelRatio.get()`.
* It's a technique that works on all the devices independent of their
* pixel density.
*
* ```
* style={{ borderWidth: 1 / PixelRatio.get() }}
* ```
*
* ### Fetching a correctly sized image
*
* You should get a higher resolution image if you are on a high pixel density
@@ -91,6 +77,17 @@ class PixelRatio {
return Math.round(layoutSize * PixelRatio.get());
}

/**
* Rounds a layout size (dp) to the nearest layout size that corresponds to
* an integer number of pixels. For example, on a device with a PixelRatio
* of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to
* exactly (8.33 * 3) = 25 pixels.
*/
static roundToNearestPixel(layoutSize: number): number {
var ratio = PixelRatio.get();
return Math.round(layoutSize * ratio) / ratio;
}

// No-op for iOS, but used on the web. Should not be documented.
static startDetecting() {}
}
@@ -82,7 +82,7 @@ - (void)reactSetFrame:(CGRect)frame
self.bounds = bounds;
}

- (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
- (void)reactSetInheritedBackgroundColor:(__unused UIColor *)inheritedBackgroundColor
{
// Does nothing by default
}
@@ -10,6 +10,7 @@

jest.dontMock('../')
.dontMock('underscore')
.dontMock('PixelRatio')
.dontMock('../../DependencyResolver/lib/extractRequires')
.dontMock('../../DependencyResolver/lib/replacePatterns');

0 comments on commit cd89016

Please sign in to comment.
You can’t perform that action at this time.