Flex Direction: Row-Reverse in React-Native

Flex direction: row-reverse in react-native

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:

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

React Native support of reverse flex directions

Edit: I haven't tried it but as of 0.29 it seems to be supported. (https://github.com/facebook/react-native/commit/d43e0db81e86d4d03638cd17034086717fe715a3)

It is not supported at the moment. React Native is using https://github.com/facebook/css-layout#supported-attributes for it's layout and it doesn't support reverse either so it would have to be implemented there.

React: Flex-direction row not taking effect

Since Fragment is a component, className goes to props object and does not pass as actual style.

Just wrap the items in a div and give it the class:

<Fragment>
  <h1>The About us page.</h1>
  <Fragment>
    <div className="container">
      <p>Dog</p>
      <p>Cat</p>
      <p>Other Dog</p>
    </div>
  </Fragment>
</Fragment>

React Native: Image inside flexDirection column inside flexDirection row

This View Screenshot

Also Add Dimensions as shown below

var {
  Dimensions

} = React;

try this way you need to set height and width of the image :

<View>
        <View style={{flexDirection: 'row', height:200 }}>

          <View style={{ flexDirection:'column', backgroundColor: 'blue', height:100 , width: 100}}>

            <Image
              style={{ backgroundColor: 'red', height:100 , width: 100}}
              source={require('./img/2.jpg')}
              resizeMode={Image.resizeMode.contain}
            />
             <Text style={{backgroundColor: 'blue'}}>24/06/2017</Text>

          </View> 
        </View>

      </View>

below is the code gives you the width of the mobile layout now change you width and height according to mobile device width
For Example :

width : deviceWidth/3,
height : deviceHeight/3

instead of static given height and width.
you can give height and width according to your requiredment now.

i hope you understand.

var deviceWidth = Dimensions.get('window').width;

React Native Flex Two Rows having ununsual spaces

Do you want like this ?

 <View
    style={{
      flex: 1,
      flexDirection: "column"
    }}
  >
    <View>
      <Text>Auto set reminders?</Text>
    </View>
    <View
      style={{
        width: "100%",
        flexDirection: "row",
        justifyContent: "flex-start"
        //padding: 14
      }}
    >
      <Text
        style={{
          width: "50%",
          flexDirection: "row",
          justifyContent: "space-around"
          //padding: 14
        }}
      >
        Do students need to do a new post? A reminder will be sent daily fro
        3 days until they post and tag your task during posting.
      </Text>
      <View
        style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
      >
        <Switch
          style={{ transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }] }}
          onValueChange={this.toggleSwitch}
          value={this.state.isEnabled}
        />
      </View>
    </View>
  </View>

sandbox

How to fix Items position in react native flex layout?

you can use NativeModules and Platform:

import { NativeModules, Platform } from 'react-native'

//OS
const isIOS = Platform.OS === 'ios';

// lang:
const lang = isIOS ? NativeModules.SettingsManager.settings.AppleLocale : NativeModules.I18nManager.localeIdentifier;

[...]

<View style={[
     somestyle, //var containing your style
     lang === 'yourlanguage' ? {flexDirection : 'row-reverse'} : {flexDirection : 'row'} ]} // if presian change flexdirection
/>

---

Related Topics