CODEWITHSUNDEEP
javascriptreactjsreact-nativejsxstyling
Anu
Anu

Reputation: 1742

How to use justify content property in react native?

I'm trying to align contents to the left of image.But here what I'm getting is the text will take the left out space after the image.I'm expecting the float-align:left property just as in css to be here.So that I've used alignItems:flex-end.But not getting the output.Is there any possibility of doing this.What I've tried is as below

updated

<ScrollView>
    {article.map(a =>
        <TouchableOpacity onPress={() =>this.props.navigation.navigate('Article')}>
      <CardSection>
      <View style={{ flexDirection: 'row'}}>
       <Image source={{uri:a.poster}} style={styles.thumbnail_style}/>
        <Text style={styles.textStyle}> 
      {a.title}</Text>
    </View>
      </CardSection>
      </TouchableOpacity>
      )}
      </ScrollView>
    );
  }
}

const styles= StyleSheet.create({   
    thumbnail_style :{
        height: 50,
        width:50,
                },
    textStyle:{
        paddingTop:20,
    fontSize:16,
    paddingLeft:10,
    marginRight:20
    }
});

What I'm getting is as below

screenshot

Upvotes: 0

Views: 1786

Answers (2)

Harrison
Harrison

Reputation: 663

Could you explain why you are setting the Image inside your Text? If you want the image on top of the text simply do:

<Image />
<Text></Text>

otherwise, if you want them placed from left to right you can wrap them in a view and use flexDirection

<View style = {{flexDirection: 'row'}}>
  <Text></Text>
  <Image />
</View>

<View style = {{flexDirection: 'row'}}>
 <Image
 style={{height: 100, width: 100}}
 source = {{ uri: `https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg` }}/>
 <Text style = {{padding:10, flex: 1, flexWrap: 'wrap'}}>my text</Text>
</View>

Upvotes: 2

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

I am not sure why you are wrapping Image inside Text. Since you want Image and Text to appear side by side you need it to be siblings. You can have like:

<View>
 <Image />
 <Text />
</View>

Then you can apply following style to View

{
flexDirection: 'row',
alignItems: 'flex-start'
}

Upvotes: 1

Related Questions