CODEWITHSUNDEEP
androidiosreact-nativereact-native-svgreact-native-text
Dibakar Halder
Dibakar Halder

Reputation: 213

React-native icon inline with text

Hi I want achieve the following style:

enter image description here

But with the following code i get a the icon in separate column and the text in another

<View style={{flex:1, flexDirection:'row'}}>
  <Icon height={10} width={10} />
  <Text>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that it 
    has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
    content here'
</Text>
</View>

enter image description here

please ignore the different icons. Any solution to this problem?

Upvotes: 4

Views: 4088

Answers (1)

kenmistry
kenmistry

Reputation: 2143

actually, you can embed the icon within the text, like this:

<View style={{flex:1, flexDirection:'row'}}>
  <Text>
    <Icon height={10} width={10} />
    It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that it 
    has a more-or-less normal distribution of letters, as opposed to using 
    'Content here, content here'
  </Text>
</View>

Upvotes: 6

Related Questions