Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Flex direction: row-reverse in react-native

Tags:

css

flexbox

react-native

react-native-flexbox

How can i reproduce flex-direction: row-reverse in React-Native? When in element' style i'm doing:

 flexDirection: 'row-reverse'

i'm getting error:

Invalid prop flexDirection of value row-reverse supplied to StyleSheet

UPDATE: They just added it in version 0.29.0 :)

like image 600
Ivan Chernykh Avatar asked Jul 15 '16 22:07

Ivan Chernykh

People also ask

How do you use Flex direction row in React Native?

Flex DirectionBy default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right. LTR (default value) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.

What is Flex row-reverse?

The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction. row-reverse. Behaves the same as row but the main-start and main-end points are opposite to the content direction. column.

How do I change the direction of my flex in react?

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column ). Choose from start , end , center , baseline , or stretch (browser default).

How do you reverse a element in Flex?

Reverse the display of the itemsrow-reverse. column-reverse.

1 Answers

UPDATE

As of v29, React Native provides support for reverse flex directions in Android and iOS. https://github.com/facebook/react-native/releases/tag/v0.29.0

ORIGINAL ANSWER

There is no row-reverse or column-reverse in react-native.

See this table of supported attributes:

enter image description here

https://github.com/facebook/css-layout

like image 62
Michael Benjamin Avatar answered Sep 20 '22 11:09

Michael Benjamin
Sign in to Comment

Related questions

How to style up a hr tag
How to insert space between text and icon in bootstrap?
Counter does not increment in CSS
CSS/LESS: Calc() using percentages minus pixels not evaluating correctly [duplicate]
i18n in CSS property "content"
How to move last li to right most side CSS
Is the CSS3 transform translate percentage values relative to its width and/or height?
How do I scale the size of the elements in my HTML according to screen size?
jQuery: add click event to specific id
div onclick function to change body background image
How to make website bigger on mobile with media queries
Multiply mode in CSS?
AngularJS bug in IE with style vs ng-style
Gin-golang: Loading html files with stylesheet
How to link external CSS in html format at Email Body?Here I am not using twitter bootstrap?
HTML5 Video container slightly larger than video
Override Materialize CSS properties
Flex items create space between them when they wrap [duplicate]
How to design customized audio player with HTML
Show just cursor (caret) but hide the letters in input

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!