react native:"order" is not a valid style property

Question

The order is a useful property in flex.

I search this on the internet.

Summary The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

   <View style={{display:'flex'}}>
                  { item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null }
                  { item.title ? <Text numberOfLines={1} ellipsizeMode='tail'  style={styles.newsTTopTitle} source={{uri:item.cover}}>{item.title}</Text> : null }
                  { item.description ? <Text numberOfLines={1} ellipsizeMode="tail" style={styles.newsTSubTitle} source={{uri:item.cover}}>{item.description}</Text> : null }
                </View>
              </TouchableOpacity>



newsTSubTitle: {
    fontSize:10,
    lineHeight:13,
    color:'#9B9B9B',
    width:233,
    textAlign:'left',
    alignSelf:'flex-end',
    order:2,
  },
  newsTTopTitle: {
    fontSize:12,
    lineHeight:15,
    color:'#000000',
    width:233,
    textAlign:'left',
    alignSelf:'flex-end',
    order:1,
  },

My coder is like above, as a result, the error show.

One more thing. The item.cover sometimes does not have value. Then the Text will layout in the top of father view. I want to set the Text component in the bottom of the father view. Should I put a placeholder image in this case?

Answer 1

React Native's flexbox is not 100% identical to its web counterpart. RN's flexbox really only supports flexDirection, alignItems, justifyContent, and the flex attributes. You can learn more in the documentation here.