CODEWITHSUNDEEP
reactjsreact-nativeflexboxreact-native-flexbox
nanakondor
nanakondor

Reputation: 745

Vertically align a component in React Native

I want my items to be aligned like this: enter image description here

But somehow its like this: enter image description here

The code is:

 <View style={{flex: 1}}>
  <View style={{flexDirection: 'row'}>
    <Component.CircledIcon
       source={iconSource}
    />
    <Component.Text style={{fontWeight: 'bold',
      fontSize: '$regular',
      color: '$body',
      flex: 1,
      marginRight: '2.5rem',
      paddingBottom: '1rem',
    }}>
      {name}
    </Component.Text>
  </View>
 </View>

Upvotes: 2

Views: 5442

Answers (2)

Rajshekhar
Rajshekhar

Reputation: 614

U just have to add one attribute into the parent of components (in your view.)

justifyContent:"space-between"

Please refer this link that might help your for understanding the styling.

(React-Native Styling Cheat sheet)[https://github.com/vhpoet/react-native-styling-cheat-sheet]

Upvotes: 1

Shahanshah Alam
Shahanshah Alam

Reputation: 605

Try this:-

<View style={{flex: 1}}>
<View style={{flexDirection: 'row'
alignItems:"center"  //add this line to your code
 }>
<Component.CircledIcon
   source={iconSource}
/>
<Component.Text style={{fontWeight: 'bold',
  fontSize: '$regular',
  color: '$body',
  flex: 1,
  marginRight: '2.5rem',
  paddingBottom: '1rem',
}}>
  {name}
</Component.Text>

Upvotes: 2

Related Questions