mirror of
https://github.com/status-im/react-native.git
synced 2025-01-23 07:49:25 +00:00
0a9b6bedb3
Summary: This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works. This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff. Reviewed By: majak Differential Revision: D3876927 fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
384 lines
13 KiB
JavaScript
384 lines
13 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule LayoutPropTypes
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var ReactPropTypes = require('react/lib/ReactPropTypes');
|
|
|
|
/**
|
|
* React Native's layout system is based on Flexbox and is powered both
|
|
* on iOS and Android by an open source project called css-layout:
|
|
* https://github.com/facebook/css-layout
|
|
*
|
|
* The implementation in css-layout is slightly different from what the
|
|
* Flexbox spec defines - for example, we chose more sensible default
|
|
* values. Since our layout docs are generated from the comments in this
|
|
* file, please keep a brief comment describing each prop type.
|
|
*
|
|
* These properties are a subset of our styles that are consumed by the layout
|
|
* algorithm and affect the positioning and sizing of views.
|
|
*/
|
|
var LayoutPropTypes = {
|
|
/** `width` sets the width of this component.
|
|
*
|
|
* It works similarly to `width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
|
|
*/
|
|
width: ReactPropTypes.number,
|
|
|
|
/** `height` sets the height of this component.
|
|
*
|
|
* It works similarly to `height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
|
|
*/
|
|
height: ReactPropTypes.number,
|
|
|
|
/** `top` is the number of logical pixels to offset the top edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `top` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/top
|
|
* for more details of how `top` affects layout.
|
|
*/
|
|
top: ReactPropTypes.number,
|
|
|
|
/** `left` is the number of logical pixels to offset the left edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `left` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/left
|
|
* for more details of how `left` affects layout.
|
|
*/
|
|
left: ReactPropTypes.number,
|
|
|
|
/** `right` is the number of logical pixels to offset the right edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `right` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/right
|
|
* for more details of how `right` affects layout.
|
|
*/
|
|
right: ReactPropTypes.number,
|
|
|
|
/** `bottom` is the number of logical pixels to offset the bottom edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `bottom` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
|
|
* for more details of how `top` affects layout.
|
|
*/
|
|
bottom: ReactPropTypes.number,
|
|
|
|
/** `minWidth` is the minimum width for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `min-width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
|
|
* for more details.
|
|
*/
|
|
minWidth: ReactPropTypes.number,
|
|
|
|
/** `maxWidth` is the maximum width for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `max-width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
|
|
* for more details.
|
|
*/
|
|
maxWidth: ReactPropTypes.number,
|
|
|
|
/** `minHeight` is the minimum height for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `min-height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
|
|
* for more details.
|
|
*/
|
|
minHeight: ReactPropTypes.number,
|
|
|
|
/** `maxHeight` is the maximum height for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `max-height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
|
|
* for more details.
|
|
*/
|
|
maxHeight: ReactPropTypes.number,
|
|
|
|
/** Setting `margin` has the same effect as setting each of
|
|
* `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
|
|
* for more details.
|
|
*/
|
|
margin: ReactPropTypes.number,
|
|
|
|
/** Setting `marginVertical` has the same effect as setting both
|
|
* `marginTop` and `marginBottom`.
|
|
*/
|
|
marginVertical: ReactPropTypes.number,
|
|
|
|
/** Setting `marginHorizontal` has the same effect as setting
|
|
* both `marginLeft` and `marginRight`.
|
|
*/
|
|
marginHorizontal: ReactPropTypes.number,
|
|
|
|
/** `marginTop` works like `margin-top` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
|
|
* for more details.
|
|
*/
|
|
marginTop: ReactPropTypes.number,
|
|
|
|
/** `marginBottom` works like `margin-bottom` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
|
|
* for more details.
|
|
*/
|
|
marginBottom: ReactPropTypes.number,
|
|
|
|
/** `marginLeft` works like `margin-left` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
|
|
* for more details.
|
|
*/
|
|
marginLeft: ReactPropTypes.number,
|
|
|
|
/** `marginRight` works like `margin-right` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
|
|
* for more details.
|
|
*/
|
|
marginRight: ReactPropTypes.number,
|
|
|
|
/** Setting `padding` has the same effect as setting each of
|
|
* `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
|
|
* for more details.
|
|
*/
|
|
padding: ReactPropTypes.number,
|
|
|
|
/** Setting `paddingVertical` is like setting both of
|
|
* `paddingTop` and `paddingBottom`.
|
|
*/
|
|
paddingVertical: ReactPropTypes.number,
|
|
|
|
/** Setting `paddingHorizontal` is like setting both of
|
|
* `paddingLeft` and `paddingRight`.
|
|
*/
|
|
paddingHorizontal: ReactPropTypes.number,
|
|
|
|
/** `paddingTop` works like `padding-top` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
|
* for more details.
|
|
*/
|
|
paddingTop: ReactPropTypes.number,
|
|
|
|
/** `paddingBottom` works like `padding-bottom` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
|
|
* for more details.
|
|
*/
|
|
paddingBottom: ReactPropTypes.number,
|
|
|
|
/** `paddingLeft` works like `padding-left` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
|
|
* for more details.
|
|
*/
|
|
paddingLeft: ReactPropTypes.number,
|
|
|
|
/** `paddingRight` works like `padding-right` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
|
|
* for more details.
|
|
*/
|
|
paddingRight: ReactPropTypes.number,
|
|
|
|
/** `borderWidth` works like `border-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
|
|
* for more details.
|
|
*/
|
|
borderWidth: ReactPropTypes.number,
|
|
|
|
/** `borderTopWidth` works like `border-top-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
|
|
* for more details.
|
|
*/
|
|
borderTopWidth: ReactPropTypes.number,
|
|
|
|
/** `borderRightWidth` works like `border-right-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
|
|
* for more details.
|
|
*/
|
|
borderRightWidth: ReactPropTypes.number,
|
|
|
|
/** `borderBottomWidth` works like `border-bottom-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
|
|
* for more details.
|
|
*/
|
|
borderBottomWidth: ReactPropTypes.number,
|
|
|
|
/** `borderLeftWidth` works like `border-left-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
|
|
* for more details.
|
|
*/
|
|
borderLeftWidth: ReactPropTypes.number,
|
|
|
|
/** `position` in React Native is similar to regular CSS, but
|
|
* everything is set to `relative` by default, so `absolute`
|
|
* positioning is always just relative to the parent.
|
|
*
|
|
* If you want to position a child using specific numbers of logical
|
|
* pixels relative to its parent, set the child to have `absolute`
|
|
* position.
|
|
*
|
|
* If you want to position a child relative to something
|
|
* that is not its parent, just don't use styles for that. Use the
|
|
* component tree.
|
|
*
|
|
* See https://github.com/facebook/css-layout
|
|
* for more details on how `position` differs between React Native
|
|
* and CSS.
|
|
*/
|
|
position: ReactPropTypes.oneOf([
|
|
'absolute',
|
|
'relative'
|
|
]),
|
|
|
|
/** `flexDirection` controls which directions children of a container go.
|
|
* `row` goes left to right, `column` goes top to bottom, and you may
|
|
* be able to guess what the other two do. It works like `flex-direction`
|
|
* in CSS, except the default is `column`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
|
|
* for more details.
|
|
*/
|
|
flexDirection: ReactPropTypes.oneOf([
|
|
'row',
|
|
'row-reverse',
|
|
'column',
|
|
'column-reverse'
|
|
]),
|
|
|
|
/** `flexWrap` controls whether children can wrap around after they
|
|
* hit the end of a flex container.
|
|
* It works like `flex-wrap` in CSS (default: nowrap).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
|
|
* for more details.
|
|
*/
|
|
flexWrap: ReactPropTypes.oneOf([
|
|
'wrap',
|
|
'nowrap'
|
|
]),
|
|
|
|
/** `justifyContent` aligns children in the main direction.
|
|
* For example, if children are flowing vertically, `justifyContent`
|
|
* controls how they align vertically.
|
|
* It works like `justify-content` in CSS (default: flex-start).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
|
* for more details.
|
|
*/
|
|
justifyContent: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'space-between',
|
|
'space-around'
|
|
]),
|
|
|
|
/** `alignItems` aligns children in the cross direction.
|
|
* For example, if children are flowing vertically, `alignItems`
|
|
* controls how they align horizontally.
|
|
* It works like `align-items` in CSS (default: stretch).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
|
* for more details.
|
|
*/
|
|
alignItems: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
/** `alignSelf` controls how a child aligns in the cross direction,
|
|
* overriding the `alignItems` of the parent. It works like `align-self`
|
|
* in CSS (default: auto).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
|
|
* for more details.
|
|
*/
|
|
alignSelf: ReactPropTypes.oneOf([
|
|
'auto',
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
/** `overflow` controls how a children are measured and displayed.
|
|
* `overflow: hidden` causes views to be clipped while `overflow: scroll`
|
|
* causes views to be measured independently of their parents main axis.`
|
|
* It works like `overflow` in CSS (default: visible).
|
|
* See https://developer.mozilla.org/en/docs/Web/CSS/overflow
|
|
* for more details.
|
|
*/
|
|
overflow: ReactPropTypes.oneOf([
|
|
'visible',
|
|
'hidden',
|
|
'scroll',
|
|
]),
|
|
|
|
/** In React Native `flex` does not work the same way that it does in CSS.
|
|
* `flex` is a number rather than a string, and it works
|
|
* according to the `css-layout` library
|
|
* at https://github.com/facebook/css-layout.
|
|
*
|
|
* When `flex` is a positive number, it makes the component flexible
|
|
* and it will be sized proportional to its flex value. So a
|
|
* component with `flex` set to 2 will take twice the space as a
|
|
* component with `flex` set to 1.
|
|
*
|
|
* When `flex` is 0, the component is sized according to `width`
|
|
* and `height` and it is inflexible.
|
|
*
|
|
* When `flex` is -1, the component is normally sized according
|
|
* `width` and `height`. However, if there's not enough space,
|
|
* the component will shrink to its `minWidth` and `minHeight`.
|
|
*
|
|
* flexGrow, flexShrink, and flexBasis work the same as in CSS.
|
|
*/
|
|
flex: ReactPropTypes.number,
|
|
flexGrow: ReactPropTypes.number,
|
|
flexShrink: ReactPropTypes.number,
|
|
flexBasis: ReactPropTypes.number,
|
|
|
|
/** `zIndex` controls which components display on top of others.
|
|
* Normally, you don't use `zIndex`. Components render according to
|
|
* their order in the document tree, so later components draw over
|
|
* earlier ones. `zIndex` may be useful if you have animations or custom
|
|
* modal interfaces where you don't want this behavior.
|
|
*
|
|
* It works like the CSS `z-index` property - components with a larger
|
|
* `zIndex` will render on top. Think of the z-direction like it's
|
|
* pointing from the phone into your eyeball.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for
|
|
* more details.
|
|
*/
|
|
zIndex: ReactPropTypes.number,
|
|
};
|
|
|
|
module.exports = LayoutPropTypes;
|