Is it possible to space components in the same row? [React Native Design]

user_14390956 0
Viewed 35

I am attempting to space out these two components (heart and flag) while keeping them in the same row. I have rounded the cell and added a bottom border to give you an idea of where the icons lie relative to the screen. As you can see, they are right in the middle:

enter image description here

I would like the heart and the number of likes to be on the far left, with the flag on the far right. I am having trouble spacing them without hardcoding the width I would like them to be. Here is the code:

          <View style={{flexDirection: 'row', justifyContent: 'left', alignItems: 'center'}}>

                <LikeComponent postID = {this.state.postID} />

                <ReportComponent postID = {this.state.postID} />
                
            </View>

Any insight would be helpful.

react-native
1 Answers
<View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>

  <LikeComponent postID = {this.state.postID} />

  <ReportComponent postID = {this.state.postID} />
            
</View>

Use

justifyContent: 'space-between'

, If you also want to space on the right and left margin of the screen then use,

justifyContent: space-around

user_131844240
Related