JustifyContent not working in List in NativeBase

Question

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.

score 2 · Accepted Answer · answered Sep 09 '17 at 16:30

Generally by default all components starts with flexDirection: row, justifyContent: flex-start and alignItems: 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: 1 to 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.html

Hope it helps.

JustifyContent not working in List in NativeBase

1 Answers1