React Native FlexLayout: Alignment item right

Question

I have a list of products and want to display the text "ITEM UNIT" at the right end of my infobox. It is however affected by the position of the text above it.

How do I solve this and put "ITEM UNIT" to the right end of the display?

<TouchableOpacity
onPress={() => this.props.onItemClicked(this.props.item)}
style={{ marginRight: 130 }}
>
<View style={styles.itemContent}>
    <View>
        <FadeIn>
            <Image
                resizeMode="contain"
                style={{
                    height: 100,
                    width: 100,
                    marginTop: 10,
                    marginLeft: 10
                }}
                source={{ uri: url }}
            />
        </FadeIn>
    </View>
    <View style={{ justifyContent: "space-around" }}>
        <Text style={{ fontSize: 16, fontFamily: "System" }}>
            {articleName}
        </Text>
        <View
            style={{
                flexDirection: "row",
                justifyContent: "space-between"
            }}
        >
            <View style={{ flexDirection: "row" }}>
                <Text style={styles.itemPrice}>{originalprice} </Text>
                <Text style={styles.itemPriceReduced}>{specialprice}€</Text>
            </View>
            <View>
                <Text>ITEMUNIT</Text>
            </View>
        </View>
    </View>
</View>
</TouchableOpacity>;

score 1 · Accepted Answer · answered Apr 05 '18 at 18:19

I crated a small demo for you. Please check it here: https://snack.expo.io/@tarikfojnica/layout (Click Tap To Play on the right side)

Here are the code parts you should check:

<TouchableOpacity style={styles.container} onPress={() => this.props.onItemClicked(this.props.item)}>
  <View style={styles.itemContent}>
    <View style={styles.iconContainer}>
      <Image source={Icon} style={styles.icon} />
    </View>
    <View style={styles.textContainer}>
      <Text>This is the title </Text>

      <View style={styles.downText}>
        <View style={styles.priceText}>
          <Text style={{marginRight: 10}}>$99.9</Text>
          <Text>$99.9</Text>
        </View>

        <View style={styles.label}>
          <Text>Label</Text>
        </View>
      </View>
    </View>
  </View>
</TouchableOpacity>

const styles = StyleSheet.create({
  container: {
    marginTop: 24,
  },

  itemContent:  {
     flexDirection: 'row',
     borderBottomWidth: 1,
     borderColor: 'e5e5e5'
  },

  iconContainer: {
    padding: 10,
    flex: 1,
  },

  icon: {
    width: 40,
    heigth: 40
  },

  textContainer: {
    backgroundColor: 'whitesmoke',
    flex: 7,
    padding: 5
  },

  downText: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  priceText: {
    flexDirection: 'row',
  },

  label: {
    textAlign: 'right',
    backgroundColor: 'yellow',
    padding: 3
  }
});

For a reference, here is how it looks like:

PS: I would avoid writing inline styles.

Hey Tarik. Thank you so much for your answer. Your code is in fact superior to mine. There just one thing. If the icon is much higher than in your example the pricetexts are not aligned to the bottom. Is there any way to archive this? — Ranga B., Apr 05 '18 at 18:43
Please check again. I made few changes to fit your new requirements: Code: https://snack.expo.io/@tarikfojnica/layout Screenshot: https://i.imgur.com/TODSqDy.png — Tarik Fojnica, Apr 05 '18 at 20:31

React Native FlexLayout: Alignment item right

1 Answers1