CODEWITHSUNDEEP
htmlcssreactjsreact-native
rock stone
rock stone

Reputation: 493

How to align items on extreme left and right in react native?

In react native I cannot use something like float:left or float:right so I want to align items extreme left and right how can I do that? I have used absolute position on parent View but inside that View flexdirection and justify content space between is not working why so? Does flexbox and absolute positioning doesn't work together?

Code:

<View style={styles.cardContent}>
        <View style={{maxWidth: 175}}>
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              padding: 10,
              color: 'white',
            }}>
            {hotelName}
          </Text>
        </View>
        <View style={{flexDirection: 'column', marginLeft: 75}}>
          <Text
            style={{
              fontSize: 20,
              fontWeight: '700',
              padding: 5,
              textAlign: 'right',
              color: 'white',
            }}>
            &#8377; {newRate}
          </Text>
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              textAlign: 'right',
              color: 'white',
              textDecorationLine: 'line-through',
              textDecorationStyle: 'solid',
            }}>
            &#x20b9; {oldRate}
          </Text>
        </View>
      </View>

CSS:

 cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

For cardContent I cannot remove position absolute and bottom 0 property because I want to fix the card at bottom of the screen.

In below screenshot you can see that hotel name is present on extreme left but newRate and oldRate is not going in extreme right even after using flexDirection: 'row' and justify content: space between

Screenshot:

enter image description here

Upvotes: 2

Views: 10272

Answers (3)

Rafael C&#226;mara
Rafael C&#226;mara

Reputation: 1

I would just add width: Dimensions.get('window').width to the cardContent style instead of width: 100%.

Since 100% means that you want this element to fits 100% of its parent width and Dimensions.get('window').width means that you want the width of the viewport (device).

Upvotes: 0

Limitless Claver
Limitless Claver

Reputation: 497

add a width: '100%' to your cardContent component styles.

Upvotes: 1

Nagesh Fultambkar
Nagesh Fultambkar

Reputation: 576

You can try this

cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor:'red',
    width:'100%' // add width 
  },

Upvotes: 6

Related Questions