Permalink
Browse files

Add support for reverse flex directions on Android and iOS

Summary:
This PR adds support for both 'row-reverse' and 'column-reverse' for Android and iOS and is based on the changes in #6683 that looked like it's all but abandoned.
It also adds examples for the new directions to the "Layout - Flexbox" section of UIExplorer as well as some rad new colors to the section to make the difference between "row-reverse" and "flex-end" more apparent.

**Test plan (required)**
Tested inside of UIExplorer

Android
<img width="571" alt="screen shot 2016-06-05 at 7 42 14 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807140/cf8e05de-2b55-11e6-9366-a2e3194cabf8.png">

iOS
<img width="578" alt="screen shot 2016-06-05 at 7 41 35 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807143/dee8e9b8-2b55-11e6-8777-c30329fa54e8.png">
Closes #7938

Differential Revision: D3417182

fbshipit-source-id: e8c9f5976ca95b2d2069a5b31a20f6d6309eb3cc
  • Loading branch information...
fabulant authored and Facebook Github Bot 6 committed Jun 10, 2016
1 parent 92926f9 commit d43e0db81e86d4d03638cd17034086717fe715a3
@@ -29,11 +29,12 @@ var UIExplorerPage = require('./UIExplorerPage');
var Circle = React.createClass({
render: function() {
var size = this.props.size || 20;
+ var backgroundColor = this.props.bgColor || '#527fe4';
return (
<View
style={{
borderRadius: size / 2,
- backgroundColor: '#527fe4',
+ backgroundColor: backgroundColor,
width: size,
height: size,
margin: 1,
@@ -69,16 +70,32 @@ var LayoutExample = React.createClass({
displayName: 'LayoutExample',
render: function() {
+ var fiveColoredCircles = [
+ <Circle bgColor="#527fe4" key="blue" />,
+ <Circle bgColor="#D443E3" key="violet" />,
+ <Circle bgColor="#FF9049" key="orange" />,
+ <Circle bgColor="#FFE649" key="yellow" />,
+ <Circle bgColor="#7FE040" key="green" />
+ ];
+
return (
<UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
<UIExplorerBlock title="Flex Direction">
<Text>row</Text>
<CircleBlock style={{flexDirection: 'row'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
+ </CircleBlock>
+ <Text>row-reverse</Text>
+ <CircleBlock style={{flexDirection: 'row-reverse'}}>
+ {fiveColoredCircles}
</CircleBlock>
<Text>column</Text>
<CircleBlock style={{flexDirection: 'column'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
+ </CircleBlock>
+ <Text>column-reverse</Text>
+ <CircleBlock style={{flexDirection: 'column-reverse'}}>
+ {fiveColoredCircles}
</CircleBlock>
<View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
<Text>{'top: 15, left: 160'}</Text>
@@ -88,23 +105,23 @@ var LayoutExample = React.createClass({
<UIExplorerBlock title="Justify Content - Main Direction">
<Text>flex-start</Text>
<CircleBlock style={{justifyContent: 'flex-start'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{justifyContent: 'center'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{justifyContent: 'flex-end'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
</CircleBlock>
<Text>space-between</Text>
<CircleBlock style={{justifyContent: 'space-between'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
</CircleBlock>
<Text>space-around</Text>
<CircleBlock style={{justifyContent: 'space-around'}}>
- <Circle /><Circle /><Circle /><Circle /><Circle />
+ {fiveColoredCircles}
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Align Items - Other Direction">
@@ -60,7 +60,9 @@ var LayoutPropTypes = {
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flexDirection: ReactPropTypes.oneOf([
'row',
- 'column'
+ 'row-reverse',
+ 'column',
+ 'column-reverse'
]),
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
View
@@ -816,7 +816,9 @@ + (NSPropertyList)NSPropertyList:(id)json
RCT_ENUM_CONVERTER(css_flex_direction_t, (@{
@"row": @(CSS_FLEX_DIRECTION_ROW),
- @"column": @(CSS_FLEX_DIRECTION_COLUMN)
+ @"row-reverse": @(CSS_FLEX_DIRECTION_ROW_REVERSE),
+ @"column": @(CSS_FLEX_DIRECTION_COLUMN),
+ @"column-reverse": @(CSS_FLEX_DIRECTION_COLUMN_REVERSE)
}), CSS_FLEX_DIRECTION_COLUMN, intValue)
RCT_ENUM_CONVERTER(css_justify_t, (@{
@@ -60,7 +60,7 @@ public void setFlex(float flex) {
public void setFlexDirection(@Nullable String flexDirection) {
setFlexDirection(
flexDirection == null ? CSSFlexDirection.COLUMN : CSSFlexDirection.valueOf(
- flexDirection.toUpperCase(Locale.US)));
+ flexDirection.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.FLEX_WRAP)

0 comments on commit d43e0db

Please sign in to comment.