I'm trying to align the Thumbnail to the topLeft by using justifyContent: 'flex-start'. But it's not working. Below is my code.
<Content>
<View key = {index} style={styles.commentBody}>
<List>
<ListItem avatar>
<View style={{ justifyContent: 'flex-start'}}>
<Left>
<Thumbnail
source={post.Thumbnail}
/>
</Left>
</View>
<Body>
<Text>{post.body}</Text>
</Body>
<Right>
<Text note>3:43 pm</Text>
</Right>
</ListItem>
</List>
</View>
I tried to add the justifyContent: 'flex-start' to the Thumbnail style also but no luck.
How do I make the Thumbnail appear at the top Left and not the center?
Thanks.
Generally by default all components starts with
flexDirection: row,justifyContent: flex-startandalignItems: flex-start. If you are trying to set it to flex-start, maybe there's something wrong with your structure.Try adding some border with different colors to your components to understand the area they have in your screen (width, padding, margin, and so on). Identify if the component you want to align has the area needed to be aligned. Check if parent has or misses any style that prevent you to align the component. Keep in mind to add
flex: 1to the components you want to align. Also take a look at the docs of how to use alignItems and justifyContents https://facebook.github.io/react-native/docs/flexbox.htmlHope it helps.