Flex direction: row-reverse in react-native

css react-native flexbox react-native-flexbox
Ivan Chernykh picture Ivan Chernykh · Jul 16, 2016 · Viewed 7.7k times · Source

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 :)

Answer

Michael Benjamin picture Michael Benjamin · Jul 16, 2016

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

Related questions

Make an item stick to the bottom using flex in react-native

Suppose this is the layout: <View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ... </View> <View style={styles.footer}> <TouchableOpacity> <View …

Read More
React-Native: Margin with percentage value

I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no …

Read More
React native text going off my screen, refusing to wrap. What to do?

The following code can be found in this live example I've got the following react native element: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.…

Read More