Nativebase: List Item is not rendering properly when I am trying to render them dynamically

Created on 8 Jan 2018 · 11Comments · Source: GeekyAnts/NativeBase

Dynamic List doesn't look pleasant.

Here is my code:

    <Content>
          <Card> 
            <List
              dataArray={this.props.employees}
              renderRow={item => (
                // <ListItem icon>
                <ListItem onPress={() => this.editEmp(item)}>
                  <CardItem>
                    <Body>
                      <Text>
                        {"    "}
                        {item.name}
                      </Text>
                    </Body>
                  </CardItem>
                </ListItem>
              )}
            />
          </Card>
        </Content>

Also, item looks something like this:

I am using Nokia 5 with android Nougat.
When rendered, It shows this:

I think I can see a pattern of rendering lists items in an incorrect way, grouping of an item, then two items together most of the times, which looks unpleasant to eyes.

Please help regarding this issue.

awaiting response need doc

Source

AnubhavUjjawal

Most helpful comment

@AnubhavUjjawal we are deprecating List. Use FlatList instead. This will be documented.

akhil-geekyants on 11 Jan 2018

👍3

All 11 comments

@AnubhavUjjawal you can also use ReactNative FlatList instead of List and use it with other NativeBase components.

akhil-geekyants on 9 Jan 2018

Yeah, but that is a work-around. Why is that thing behaving like that?

AnubhavUjjawal on 10 Jan 2018

@AnubhavUjjawal we are deprecating List. Use FlatList instead. This will be documented.

akhil-geekyants on 11 Jan 2018

👍3

@akhil-geekyants I'm having another issue with List while trying to stick to native-base and not use FlatList.
Thanks for your last comment, it should be more visible as soon as possible I think, for everybody.

toussa on 30 Jan 2018

@toussa What is the issue?

SupriyaKalghatgi on 31 Jan 2018

@SupriyaKalghatgi Nothing related to this issue. I didn't succeed to re render the list based on some props or state, even if the data did not change. But I didn't investigate more when I saw this comment. I'm now using FlatList with ListItem

toussa on 31 Jan 2018